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, add input code contact form 7, jump logic in contact form 7, contactform 7 show/hide fields, contactform 7 conditional logic, contact form conditional, contact form 7 show different option dependend on other option, conditionnal form with if form, cf7 conditional, option in contact form 7  
Add a comment

Comments (8)

  1. Fajo Tuesday - 08 / 04 / 2014 Reply
    Thanx a lot, great solution!
  2. Adrian Jones Tuesday - 15 / 07 / 2014 Reply
    I am having trouble with this, my Contact Form 7 code is: Category (required) [checkbox* checkbox-722 id:category "Accommodation" "Cycling" "Events" "Fishing" "Food and Drink" "Golf" "Historic Homes" "Things To Do" "Tours" "Walking"] This is a conditional test and my jquery is: //Hide the field initially $("#hide1").hide(); //Show the text field only when the third option is chosen - this doesn't $('#category').change(function() { if ($("input:checkbox[name='checkbox-722']:checked").val() == "Cycling") { $("#hide1").show(); } else { $("#hide1").hide(); } }); }); what could be wrong here?
  3. Sueli Friday - 26 / 09 / 2014 Reply
    Thanks! Works very well! Question: How can you make the radio buttons "Unlimited" and "Virtual" to show on the same line?
    • Pinwire Friday - 26 / 09 / 2014 Reply
      Contact form 7 pretty much works 'in-line' what you put into the CF7 editor will be displayed in the page, unless there is CSS over-riding it. Try putting the two form items on the same line and see if they render the way you want.
      • Sueli Wednesday - 01 / 10 / 2014 Reply
        Thanks! I used css for the first radio (float: left; width: 50%;) This way the 2nd radio jumps to the first line.
  4. Sueli Wednesday - 01 / 10 / 2014 Reply
    What if you wanted to show other 2 check boxes when "virtual" is checked instead? Thanks
  5. Donny Monday - 16 / 02 / 2015 Reply
    Hi Tom, This looks like a great solution. For some reason I am unable to get it to work properly. I added the jquery-1.7.1.min.js to my theme folder and copied the script inclusion code and shortcode to my contact form, but that did not work. So I tried adding the script to my page and had no success either :/. Has something changed since you posted this tutorial? Thank you!
  6. Eric Thursday - 12 / 05 / 2016 Reply
    Worked. Thanks!

Add a comment

Pinwire @ tumblr

    http://pinwirecom.tumblr.com/post/99399753457http://pinwirecom.tumblr.com/post/99056819727http://pinwirecom.tumblr.com/post/98488475777http://pinwirecom.tumblr.com/post/94745420282http://pinwirecom.tumblr.com/post/92737496842http://pinwirecom.tumblr.com/post/88505613492