Articles in this section
Category / Section

How to Hide Default Web Widget Fields

Published:

Using custom CSS and JS, you can hide the default web widget fields, such as name, subject, email address, description, etc. First, you have to pre-fill the values before hiding the fields.

Hiding subject field

As the subject field is mandatory, use custom JS to prefill the value and then hide it with custom CSS. Copy and paste the following codes in the widget’s advanced customization.

Custom JS code

setTimeout(() => {
 var sub = document.querySelector('.widget-form-body-container').querySelector('.subject-field').querySelector('#subject-field');
   if (sub && sub.ej2_instances && sub.ej2_instances[0]) {
     sub.ej2_instances[0].value = 'New request'
   }
}, 2000); 

Note: Here, the subject value is filled as ‘New request’. You can fill the subject according to your needs.

Custom CSS code

.widget-form-body-container {
  .subject-field {
     display: none !important;
  }
} 

Widget_customization.png

Hiding phone number field

Copy and paste the following codes in the widget’s advanced customization section to hide the phone number field.

Custom CSS code

.widget-form-body-container {
  .phone-number-field{
   display: none !important;
  }
} 
Was this article useful?
Like
Dislike
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied