It's common to create a select menu (e.g. to ask where users found out about a website), and provide an "other" option to cover scenarios where none of the given options are appropriate. This hack allows you to add a field to your form that only appears if the user chooses "other", so they can enter their information.
This hack uses JavaScript, but if that's unavailable the conditional field will be displayed at all times.
1) Create your menu and field
Log into sc_admin and go to the Contact fields page. Add a "drop-down menu" object to your form, specify some options and set it to be required. For the purposes of this hack, make the last option say "Other (please state)".
Next, add a "long field" object. It should be placed after the menu, and not required. The JavaScript code you will add later will make it required or not based on whether it is shown.
2) Add HTML snippets to identify your fields
Create "HTML snippet" objects (you'll probably need three) and position them around your fields. Add HTML code into them that will be used by JavaScript to identify your fields. So for instance:
Before the menu place an HTML snippet with the following code:
<div id="choose">
Between the menu and the field place an HTML snippet with the following code:
</div><div id="other">
After the field place an HTML snippet with the following code:
</div>
3) Add JavaScript to control the form behaviour
Open sc_admin/js/forms.js
Insert this code between lines 4 and 5:
if ($("#choose select").val() != "Other (please state)") { $("#other").hide(); }
$("#choose select").change(function() {
if ($(this).val() == "Other (please state)") {
if ($(this).hasClass("err")) { $(this).removeClass("err").next().remove(); }
$("#other").show();
$("#other input").addClass("req");
} else {
$("#other").hide();
$("#other input").removeClass("err").removeClass("req").val("");
$("#other p").remove();
}
});
If you visit your contact form you should now find that the field appears and disappears depending on whether you selected the "other" option.