Contact Form 7 Conditional Form

 In Visual Moxie

 

I recently had a need to build a form for a customer to order a VoIP (Voice over IP) service. There were two options for the service. Either they could buy an actual phone or they could buy a virtual phone.

CF7 Conitional Radio Clear CheckboxI needed a conditional way to present different options for each type and clear settings if they changed their mind so that I wouldn’t receive form data for fields they no longer wanted or were hidden. Most importantly, it needed it to work in WordPress using the Contact Form 7 (CF7) plugin.

It turns out that this is a relatively simple task to accomplish if you are a bit of a hacker and aren’t afraid to troubleshoot and bug test JavaScript. Checking radio buttons and checkboxes and hiding  them dynamically and unchecking them conditionally can all be done. In my case, I had to hack hack hack.

Bring on the good stuff

We need to make some JavaScript to use the features of jQuery. In my case I named the file phoneForm.js. I saved phoneForm.js in my theme folder. You may want to save this in a sub-folder of your theme to keep things clean. It’s up to you, adjust the code accordingly.

$(document).ready(function() {

	$("#ipphone").hide(); //Hide the div with the id of ipphone by default

	//Show the hidden ipphone div if the radio with the id of unlimited is ticked
	$('#unlimited').change(function() {

		if ($("input:radio[name='extension']:checked").val() == "Unlimited") {
			$("#ipphone").slideDown();
		}
	});

	//Hide the visible ipphone div if the radio with the id of virtual is ticked
	$('#virtual').change(function() {

		if ($("input:radio[name='extension']:checked").val() == "Virtual") {
			$("#ipphone").slideUp();

			// Check if they changed their mind
			$("#virtual").click(function () {
			// uncheck the phone model checkboxes
			$('input:checkbox[name=phonemodel]').prop('checked',false);
			});
		}
	});
});

There are some pretty slick lessons to be learned from the code above. Mainly in that there is an example of how to un-check a checkbox with JavaScript.

A simple Contact Form 7 setup

Here is a very simple contact form that has the ID’s that jQuery will look for in order to hide the element.

<h2>Extension Type</h2>
[radio extension id:unlimited class:unlimited use_label_element "Unlimited"]
[radio extension id:virtual class:virtual use_label_element "Virtual"]
<div id="ipphone">
<h2>Phone Options</h2>
[checkbox* phonemodel id:phonecost class:phonecost exclusive "Cisco303G" "Cisco504G"]
</div>
[text 1="your-name" 2="id:binput" 3="class:binput" 4="placeholder" 5="Your Name (required)" language="*"][/text]
[email* your-name id:binput class:binput placeholder "Your Email (required)"]
[submit "Send Order Request"]

Check your website page source to see if your theme is loading jQuery by default. If you aren’t already loading jQuery, you can get it from here: https://code.jquery.com/jquery-1.7.1.min.js. My theme and active plugins weren’t loading jQuery so I downloaded it and saved the file to my theme folder.

You may want to add the following code to your theme header.php however I find that simply adding it to my CF7 form is just as effective and it will then only load on the pages where that particular form is. These two script tags will add the necessary Javascript to your website.

<!-- Add jquery script to support if needed -->
<!-- Change path to .js files if needed -->
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/jquery-1.7.1.min.js"></script> 
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/phoneForm.js"></script>

To re-cap:

  • Copy the Javascript in the code block from above and save it to your theme folder.
  • Download jquery.js from the link above and save it to your theme folder.
  • Copy the CF7 code and script inclusion code from above and paste it into a CF7 form.
  • Copy and paste the CF7 shortcode to your page on wordpress.
  • Rock and Roll.
0
Visual Moxie | Creative Agency