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;
}
}
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;
}
}