Having multiple selections with individual fields using Contact Form 7

Written by: Ivan in How-To, Web Technology

Contact Form 7 is a great tool for form creation. We have been using it for a while now and have come up with a few solutions of our own that extend Contact Form 7 capabilities and here is a new one that we’ve created.

Imagine you are building a contact form (or any other type of form for that matter), and all you want it to do is open a new set of fields when a user selects or clicks something. For example:


Please Select Your Drink




 Coca-Cola Pepsi

Please Select Your Dessert




 Cherry Pie Ice Cream


Building the Form

Lets start by creating a really basic form in Contact Form 7 (the only reason I am using a table is because they provide more structure without additional styling)

<table cellpadding="0" cellspacing="0" style="border: 0px;" width="100%">
<tr>
<td width="50%"><h4>Please Select Your Drink</h4><br>[radio drink_preference "Coca Cola" "Pepsi Cola"]</td>

<td width="50%"><h4>Please Select Your Dessert</h4><br>[radio desert_preference "Cherry Pie" "Ice Cream"]</td>
</tr>
</table>

Hidden Divs

Now we can insert a few divs with a new set of fields.

<tr>
<td>
<div id="show1" style="display:block;">
<h4>Which One?</h4>
[checkbox drink_requested "Coca-Cola" "Diet Coke" "Coca-Cola Zero"]
</div>
<div id="show2" style="display:block;">
<h4>Which One?</h4>
[checkbox drink_requested "Pepsi" "Pepsi Max" "Pepsi One"]
</div>
</td>
<td>
<div id="show3" style="display:block;">
<h4>Which One?</h4>
[checkbox dessert_requested "Large Slice" "Medium Slice" "Tiny Slice"]
</div>
<div id="show4" style="display:block;">
<h4>Which One?</h4>
[checkbox dessert_requested "Chocolate" "Orange" "Vanilla"]
</div>
</td>
</tr>

After you are done with styling the new fields, you can convert the display:block to none.

Adding the Script

Now it is time to add the script that will make it all work. Lets assume that you already have jQuery loaded in your header (if not you can add the jQuery link with the rest of the script).

We will add a script  that will toggle switch the hidden divs that we created based on user selection.

Add the script after or before the form fields. This way you don’t have to make a custom page just for that form, and as you work on the form you can go back and forth and edit the script.

<script language="javascript" type="text/javascript">
jQuery("input[name='drink_preference']").change(function(){
 if (jQuery("input[name='drink_preference']:checked").val() == 'Coca-Cola')
 {
jQuery("div#show2").hide("slow");
jQuery("div#show1").show("slow");}
 else if (jQuery("input[name='drink_preference']:checked").val() == 'Pepsi')
 {
jQuery("div#show1").hide("slow");
jQuery("div#show2").show("slow");
}  });
jQuery("input[name='dessert_preference']").change(function(){
 if (jQuery("input[name='dessert_preference']:checked").val() == 'Cherry Pie')
 {
jQuery("div#show4").hide("slow");
jQuery("div#show3").show("slow");}
 else if (jQuery("input[name='dessert_preference']:checked").val() == 'Ice Cream')
 {
jQuery("div#show3").hide("slow");
jQuery("div#show4").show("slow");
}  });
</script>

You can create really nice forms using this method.

Hope you enjoyed this tutorial. Please let us know if it was helpful, or if you have any notes and comments.