Essentials:

Contact Form 7 Conditional Form


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.

I 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.

code    
$(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.

code    
Extension Type
[radio extension id:unlimited class:unlimited use_label_element "Unlimited"]
[radio extension id:virtual class:virtual use_label_element "Virtual"]
 
Phone Options
[checkbox* phonemodel id:phonecost class:phonecost exclusive "Cisco303G" "Cisco504G"]
 
 
 
[text* your-name id:binput class:binput placeholder "Your Name (required)"]
[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: http://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.

code    
 

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.

Search with these terms to find more content:

Terms: contact form 7 conditional logic, contact form 7 conditional fields, contact form 7 logic, contactform 7 conditional logic, whateverfpf, rubbednnm, physical2zn, option in contact form 7, noisevt4, never7rz, jump logic in contact form 7, freedomxkc, deadxcf, contactform 7 show/hide fields, add input code contact form 7, contact form conditional, contact form 7 show hide, contact form 7 show different option dependend on other option, contact form 7 conditional validation, conditionnal form with if form  
Add a comment

Comments (8)

    Error thrown

    Call to undefined function ereg()