It seems a lot of people wanted to know how to “conditionally” show and hide form fields with Contact Form 7, based on input into other fields. After some research I have found the answer using jQuery and am happy to share a simple example that you can adapt for your own purposes.
I will do my best to explain the steps you should follow if you would like to re-create my working example for yourself on your own WordPress installation.
Here are the steps:
1. Add the JQuery script to your theme
Download and save the jQuery script from the official source here, and save it into the /js/1.7.1/ folder for your theme. You may need to create the folders, if they aren’t already there for your theme (example: “./wordpress/wp-content/themes/your-theme-name/js/1.7.1/”)
2. Create a simple form using Contact Form 7
Here is the code for the form –> http://pastebin.com/jQeQqRhj
To follow with my example, you’ll need to create the same simple form I did. It doesn’t matter what you call the form, but it needs to have the same fields and attributes.
3. Create a jQuery script to hide fields
Create a script called “hidefieldsScript.js” using this code –> http://pastebin.com/eUdEcHhC.
Create it and save it directly into the “js” folder for your theme (example: “./wordpress/wp-content/themes/your-theme-name/js/”.
4. Add some basic styling for the form
Add the following code to the end of your theme’s style.css file –> http://pastebin.com/7fMA4nDn
I recommend doing this, so you can see the example correctly. The CSS I have made is all specific to the id element “contactForm” so it doesn’t pollute your theme design.
5. Add the scripts to your header.php
Add the following lines within your <head> class inside the header.php file for your theme.
6. Test out the form!
Paste the form code from Contact Form 7 into a page or post, then view the page. You should see a form but one of the fields will be hidden.
To see the hidden field, simply answer “Nope” to the question “Are you awesome?”. An extra line will appear asking you to explain why!
That’s all folks! I hope this helps others. 🙂
PS: This example won’t actually send email anywhere, I’m just showing you how to make the interface work to show/hide fields.
PPS: I’m no coder, I just spent some time reading today…
- The topic ‘[Plugin: Contact Form 7] This is how to show/hide fields with jQuery’ is closed to new replies.