Support » Plugin: Contact Form 7 » [Plugin: Contact Form 7] This is how to show/hide fields with jQuery

  • Resolved BunnyBomb


    Dear all~

    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 –>

    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 –>

    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 –>

    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.

    <!-- Add jquery script to support Conditional Forms-->
    <script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/hidefieldsScript.js"></script>

    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…

Viewing 15 replies - 16 through 30 (of 43 total)
  • AH-HA! I had to create a new template for my form modal so I stuck the script in the header of that and everything is working beautifully.

    Great solution, thank you! – worked for me!

    I can just say KUDOS! @bunnybomb

    thanks for this help. i created a form using your files. Here is another issue.

    hi anyone can help

    see my page how can i inline the radio buttons. I tried to put

    span.wpcf7-checkbox span.wpcf7-list-item { display: block; }
    span.wpcf7-radio span.wpcf7-list-item { display: inline; }

    in styles.css of the plugin style sheet and nothing helped

    @jinumanalody Try This.

    .wpcf7-form-control  wpcf7-radio
        float: left;
        margin: 0 auto 15px;

    then put “clear:both;” in the div of “Your Company Information”

    in #contactForm label – remove “clear:left;”


    This may get you, what you want. Let me know if it works.

    @vajrasar Goswami let me try. i will surely let u know

    i added normal html code instead of using the cf7 format inside a table to make the alignment correct.

    @bunnybomb how to check the value of a selected radio button in js? i have a yes/no radio button. how can i check what is the value of the selected radio button using your javascript? please help

    ok thank you very much

    This is great, thank you! I have one question – what if I want to create a form that sends the message to a different email address depending on a drop down or radio button selected by the user? For example:

    A user selects that they are a potential customer, so their contact form goes to sales. Or a user selects that they are an existing customer, so their contact form goes to customer support.

    Is that possible with your solution?

    I am not sure about the radio button but to send to a different person based on a drop down just create the normal drop down in the form editor. When you go to add your options just do this:

    Someone |
    Someoneelse |

    This will send your emails out based on the option selected.

    Thank you, I will try that! I finally found a page in the documentation that tells how to do this, but had to find it through Google:

    This answer is in regards to having issues with hiding and showing required fields. For example if you are trying to hide a text box that is required as part of the form, and only show it when a certain value is selected from a dropdown, you are going to have trouble with submitting the form when the text box is still hidden since the user cannot enter in a value.

    The solution I came up with was to use Jquery to alter the value attribute of the text box. It’s an ugly hack, but was the most simple solution I could come up with in short time.

    My JQuery code:

    [ Moderator Note: Please post code or markup snippets between backticks or use the code button. ]

    <script type="text/javascript">
    				$('.hide input').val('n/a'); //give the text box a value when it is hidden so it passes the required field validation.
    					//Show the text field only when the third option is chosen - this doesn't
    					$('.dropdown').change(function() {
    						if ($(this).val() == "Other") {
    							$(this).parent().parent().next('p').find('input').val(''); //give an empty string as its value before sliding it down so it will not pass the required field validation.
    						else {
    							$(this).parent().parent().next('p').find('input').val('n/a'); //give back its value so it passes validation

    As for the conditional fields in the email text itself, I have not looked into this thus far. If I end up doing so and find a solution I will make a post about it.

    I’ve tested this, and it works with the twenty eleven theme, however it doesnt work for my polyon theme, anyone know why it wouldnt work?

    *when i do this step by step in polyon, it shows the form properly, however it never hides the field

    anyone can help
    is there any option for connecting the the contact form 7 to other database,

    my requirement is to retreive value from the database to the dropdown menu..

    is this possible??


    saved me hours

Viewing 15 replies - 16 through 30 (of 43 total)
  • The topic ‘[Plugin: Contact Form 7] This is how to show/hide fields with jQuery’ is closed to new replies.