Contact Form 7
[resolved] This is how to show/hide fields with jQuery (44 posts)

  1. BunnyBomb
    Posted 4 years ago #

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

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


  2. BunnyBomb
    Posted 4 years ago #

    Oh I should have added..

    How do you modify the example?
    To make this work for your own specific needs, you need to modify steps 2 and 3 so that the form and jQuery work together to hide the fields you want them to. You will also need to modify step 4 to get CSS styling you prefer.

    I suggest doing what I did and reading about what jQuery functions mean what. There are loads of tutorials to explain jQuery functions, so get Googling.

    With a little reading, you can adjust the script I wrote to to handle responses to checkboxes, radiobutton, etc.

    Best of luck :)

  3. graphicscove
    Posted 4 years ago #

    I just wanted to say you are amazing! I've wanted this functionality for quite a while but only last night did a client want it. After stressing out and using some other examples that didn't work I stumbled upon this, and I'm glad I did. It works perfectly for what I need and will help my client save a little by using this free alternative rather than some other paid options I wont mention.

    I'm not a major coder, I can edit bits here and there and I know which way is up, so I'm not a total noob either, but I was wondering why the script only worked if the JS was in the /my-theme/js/1.7.1/ directory. I usually keep all the javascript files within /my-theme/js/ without another directory and I edited the code in step 5 for the header to reflect this and nothing worked. I then followed your instructions perfectly to get it working and it did! I couldn't find any reference to only finding the script in that directory so I wondered what's going on..

    Anyway thanks again! All the posts on this have been 1-2 years old and I'm surprised this hasn't been added to the core of the plugin yet, I'm glad you shared this.

  4. BunnyBomb
    Posted 4 years ago #

    You're very welcome!

    I found the same when I looked yesterday; lots of posts 1-2 years old with people asking how to do this, but no detailed answers with examples given. I wanted it for myself and had a free afternoon yesterday, so went digging.

    As for the 1.7.1 thing, that's just me following the filing conventions that WordPress seems to use to file scripts. I noticed it gives each a folder with the version number on it and (to be quite honest) I figured....I better do that just in case it means something :)

    I'm sure it would work fine if you put it into plain old /js folder, as long as your call to it (in my step 5) looks for it there.

    Anyhoo, really glad this was useful for you :)

  5. graphicscove
    Posted 4 years ago #

    That's the thing though, I did just put it into the /js folder and called it in the header with:

    <script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/jquery-1.7.1.min.js"></script>

    But it didn't work. I assumed it would work if I filled in the location/name in step 5 but nothing. It's only when I filled it as you said that it did work. I just wondered if there was anything hidden away in the script that specifically asked for that file structure.

    And you're right, perhaps I should start using this structure as well, it seems to make sense!

  6. BunnyBomb
    Posted 4 years ago #

    Hrm, well I noticed a typo in my step 5 above. It should say this:

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

    The filename I gave for jQuery 1.7.1 was slightly borked. Here I am telling folks to "download this file here" then I give it a different name when I get to the step that needs it. Good one Bunny, great stuff....

    Glad you got it working though :)

  7. graphicscove
    Posted 4 years ago #

    I hadn't even noticed that before. I'm glad it's working now though, there goes the rest of my night I'm about to code up some awesome contact forms, thanks again!

  8. base007
    Posted 4 years ago #

    You are awesome! What more can I say?

  9. Rusty35
    Posted 4 years ago #

    I concur with base007. I was trying to figure out how to do this for the past few weeks (see here). Unlike many on these boards, I know virtually nothing about coding outside of general html. It took me a few days of trial and error and re-reading this thread dozens of times to get everything set right. I think I am pretty close now, but I have an additional question or two that I wonder if someone can point me in the right direction.

    (1) I have a conditional field in my form that requires a five character response entry. I've limited the text field to 5 characters maximum, but is there a way to mandate that 5 characters be entered and not 1-4?

    (2) More of a formatting issue. I have a CAPTCHA field with a brief explanation under the text entry box. All of my other text entry explanations are neatly lined up underneath the text field, while the CAPTCHA explanation is left aligned and I cannot figure out how to line it up properly.

    Here is a screenshot of the form showing the two above matters; and here are the snippets of code that produced it.

  10. BunnyBomb
    Posted 4 years ago #

    Hey there - I'm glad this was helpful for you.

    I don't think I can help with the other two issues you have though sadly, as they don't relate to showing/hiding fields with jQuery :(

    (1) The first question relates to the minlength attribute, which does not exist with HTML5 or Contact Form 7.

    I'm no expert, but I think normally in HTML5 you add this kind of validation into the script handling your Form (it's easier), but in this case the AJAX script lives in the Contact Form 7 plugin itself. I suggest you raise it as a question for the CF7 writers, they may be able to help you with a work around for their plugin.

    (2) Sounds like a CSS formatting issue, as opposed to a functionality issue. I suggest posting up your CSS in a separate thread for someone to take a look at and help you with.

    Best of luck getting it sorted!

  11. Schnappinator
    Posted 4 years ago #

    this is great for some fields. But i want to hide a complete area.

    Example: http://www.stoetefeld-catering.de/wordpress-catering/?page_id=132

    I want to dupliacate the input area (2 new tables below the actual) with another topic. I want that the user have the possibility to show or hide the next area / all areas.

    Does anybody have an idea how to resolve this issue?


  12. BunnyBomb
    Posted 4 years ago #

    Hi Schnappinator,

    I'm afraid I don't understand what you are describing. You can hide any area with the code I gave you, by putting the <div> in the correct location and using the correct field validation.

    If you are trying to let users manually show/hide portions of your form (i.e. by clicking expand/collapse somewhere on your form), I believe you can do that with CSS. A script it not necessary.

    Best of luck


  13. asganev
    Posted 4 years ago #

    I've also thought about hiding conditionally with jquery, but some issues come to mind:

    • Hiding required fields
    • Conditional email text

    I'm currently creating a contact form for reservations or simple feedback. For this I have a drop-down menu from which the user has to choose a subject. If "Reservation" is chosen, I'll fade in fields for date, time and number of persons to reserve a table for. Those are required fields. If the subject is "Feedback", the above would be hidden and the form would not submit.

    Maybe a possible solution would be to use
    but I haven't tested this yet.

    As for the email, I don't have any ideas. Currently I have something like this:

    Date: [date]
    Time: [time]
    Number of Persons: [persons]

    I don't want "Date", "Time" and "Number of Persons" to be part of the message body when there is nothing beside them (speak user didn't fill the appropriate fields)

    Would be thankful if someone comes with a solution.

  14. asganev
    Posted 4 years ago #

    Well the removeClass thingy didn't work out :(

    Here's the code I tried if someone is willing to help:

    // Contact form conditional toggle
    	$('#subject-menu').change(function() {
    		var subject = $(this).val();
    		if (subject == "Reservation" || subject == "Event") {
    		} else {
  15. nsantillo
    Posted 4 years ago #

    This is just something to point out.

    You should not have to add the jQuery 1.7.1 script to your head because in most wordpress themes the wp_head function is called. When it is called it automatically calls jQuery 1.7.1 and adds it between your <head></head> tags.

    If you add it you will be calling the same script twice in the head of your theme.

    No need to put the extra load on your site if you do not have to. :)

    Other than that awesome tutorial. :D

  16. figaro1818
    Posted 4 years ago #

    I know I have to have the jQuery 1.7.1 script in the Header.php in order to hide the fields. But my issue is that all my items that are called out with Fancybox for WordPress on my site (including video, galleries, and modals with the forms) will not popup when the script is in place. Does anyone know of this issue with Fancybox and a fix for it? If I remove the jQuery 1.7.1 script from the Header.php, Fancybox works but of course that means my hidden fields are visable. I'm using Fancybox for WordPress Version 3.0.1 and WordPress Version 3.2.1.

  17. figaro1818
    Posted 4 years ago #

    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.

  18. ddadian
    Posted 4 years ago #

    Great solution, thank you! - worked for me!

  19. Vajrasar Goswami
    Posted 4 years ago #

    I can just say KUDOS! @bunnybomb

  20. jinumanalody
    Posted 4 years ago #

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

    hi anyone can help

    see my page http://eappraisalvaluation.com/sample.html. 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

  21. Vajrasar Goswami
    Posted 4 years ago #

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

  22. jinumanalody
    Posted 4 years ago #

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

  23. jinumanalody
    Posted 4 years ago #

    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

  24. samsi berlian
    Posted 4 years ago #

    ok thank you very much

  25. AsraiLight
    Posted 4 years ago #

    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?

  26. nsantillo
    Posted 4 years ago #

    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 | someone@someemail.com
    Someoneelse | someoneelse@someemail.com

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

  27. AsraiLight
    Posted 4 years ago #

    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: http://contactform7.com/selectable-recipient-with-pipes/

  28. bmoore2
    Posted 4 years ago #

    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.

  29. AndreasStrauss
    Posted 4 years ago #

    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

  30. Raza Napx
    Posted 3 years ago #

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

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Contact Form 7
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic