In some cases, you may have a group of essential fields and some optional ones. To avoid putting users off completing your form (overwhelmed by the number of fields), you could choose to hide the optional fields unless a user chooses to complete them.
Log into sc_admin and navigate to the contact form builder page. I recommend placing your essential fields in a group from the start of the form, with the optional fields afterwards.
1) Add HTML snippets
Create an HTML snippet and position it before your essential fields, with the following code:
<div id="essential">
Next, create another snippet and position it between your last essential field and your first optional field with the following code:
</div><div id="optional">
Last, create one more snippet and position it after your last optional field with the following code:
</div>
2) Edit forms.js
Open sc_admin/js/forms.js
Delete line 2 and replace it with these lines:
if ($("#form_contact").is("form")) {
$("#form_contact").submit( function() { return validateContact(); } );
$("#optional").hide();
$("#essential").after("<p id=\"show_optional\">That's the minimum, but we can process your enquiry faster if you <a href=\"#optional\">provide some extra information.</a></p>");
$("#show_optional a").click(function () {
$("#show_optional").remove();
$("#optional").slideDown("slow");
});
}
If you visit contact.php in your web browser, you should now have a message with a link which reveals your optional fields.
Please note: By using JavaScript in this way, we ensure that the form will work even if JavaScript is not available. In that case, the message would not appear and optional form fields would be visible.