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

  • Resolved BunnyBomb

    (@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 –> 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…

    http://wordpress.org/extend/plugins/contact-form-7/

Viewing 13 replies - 31 through 43 (of 43 total)
  • BunnyBomb/Anyone,

    Is there any way to use conditional fields with CF7 to run a payment through Authorize.net?

    For example, we have a form created in CF7 whereby a person can register their team for a baseball showcase. I would like to add something in our form that says “Would you like to pay now?”

    If they click “No” they submit the form as usual. If they click “Yes” it populates the Authorize.net fields (Name, credit card number, etc…) for them to fill out before they can submit. We’re using the CF7 to database plugin as well to track all of our submissions, so we’d also like to be able to see who paid and who didn’t pay.

    In thinking about this, it almost seems too complex because if they click “Yes,” their credit card info will have to go through Authorize.net while the rest of the form data comes to us.

    Is this at all possible??

    Thanks! 🙂

    @jinumanalody how were you able to assign id tags to each radio button option? I looked at the example you posted and it works perfectly. Mine isn’t working and I think it’s because I can’t differentiate between the different options with unique id tags. Really would love to get this working with radio buttons and checkboxes.

    thanks!

    Bos

    (@hermanbos)

    Second hiding doesnot show up?
    The first hidefunction operates perfect, I added e second hide function (and i am intending to create more hidefunctions). But the field doesnot show up?
    See the jQuery code and the contactform code here below. What i am doing wrong?

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

    /*! jQuery script to hide certain form fields */
    $(document).ready(function() {
    	//Hide the field initially
    	$("#hide1").hide();
      $("#hide2").hide();
    	$("#hide3").hide();
    	//First hidefunction: Laat de tekst zien, waneer resp "ik kom niet", "mijn partner komt niet" gekozen wordt.
    	$('#wieniet').change(function() {
    		if ($("#wieniet").val() == "ik kom niet") {
    			$("#hide1").show();
    		}
    		else {
    			$("#hide1").hide();
    			}
    			if ($("#wieniet").val() == "mijn partner komt niet") {
    			$("#hide2").show();
    		}
    		else {
    			$("#hide2").hide();
    			}
    	});
    //Second hidefunction:Laat de tekst zien, waneer resp "graag informatie over mogelijke invaller", "ik zorg zelf voor een invaller" gekozen wordt.
    	$('#intinv').change(function() {
    		if ($("#intinv").val() == "ja") {
    			$("#hide3").show();
    		}
    		else {
    			$("#hide3").hide();
    			}
      });
    });
    
    Contact Form 7 code:
    <table>
    <tr>
    
    <td><label for="wieniet">Wie komt er niet?*</label></td>
    <td>[select* wieniet 20 id:wieniet include_blank class:contactForm "ik kom niet" "mijn partner komt niet" "mijn partner en ik komen niet"]</td>
    <tr>
    <td><div class="hide" id="hide1">
            <label for="telp">Telefoonnr. partner*</label>
            [text* telp 11/11 id:telp class:contactForm]
    
     <label for="intinv">Interesse om met invaller te spelen?*</label>
    [select* intinv include_blank "ja" "nee"]
    </div>
    
    <div class="hide" id="hide2">
              <label for="mtel">Mijn telefoonnr.*</label>
              [text* mtel 11/11 id:mtel class:contactForm]
      <label for="intinv">Interesse om met invaller te spelen?*</label>
    [select* intinv include_blank "ja" "nee"]
    </div>
    
    </tr>
    <tr>
    <td>
    <div class="hide" id="hide3">
    
      <label for="zinv">Indien er interesse is om met een invaller te spelen:*</label>
    [select* zinv  id:intinv include_blank class:contactForm "graag informatie over mogelijke invaller" "ik zorg zelf voor een invaller"]
    </div>
    </td>
    </table>
    Moderator Jan Dembowski

    (@jdembowski)

    Forum Moderator and Brute Squad

    @hermanbos Please post your own topic. This one is resolved and those tend to get ignored.

    http://wordpress.org/support/plugin/contact-form-7#postform

    Is it possible to include multiple variables in the if statement within the jquery?
    What I would like to do is allow someone to select any one of several items in a drop down list in order to display the hidden fields.

    if ($("#fault").val() == "Waste Collections, Recycling, Parking, Planning") {

    Is this possible and what am I doing wrong.
    I’m new to jquery and hope its something simple. I appreciate any help you can provide.
    Thanks,
    Allen

    Its okay, I figure it (good old stackoverflow)

    I repeat the element in the brackets divided by ||

    if ($("#fault").val() == "Waste Collections" || $("#fault").val() == "Recycling" || $("#fault").val() == "Parking" || $("#fault").val() == "Planning")

    has anyone gone all the way through this process? It makes an awesome looking form, but messy output to your inbox. Does anyone know how to hide the empty fields in the ‘message body’ as well???

    Moderator Jan Dembowski

    (@jdembowski)

    Forum Moderator and Brute Squad

    @digitalrenewal as this thread has been resolved already can you please start your own new one? You’ll get a more targeted response if you do.

    http://wordpress.org/support/plugin/contact-form-7#postform

    Bos

    (@hermanbos)

    Nobody did help me, so after a long time of trial and error I solved this problem myself.
    Every hiding that has to fullfill to the same condition you have to write an if/else statement more with another hide number.
    Every other hide condition you have to write a new JQuery script. See step 3 of the work of BunnyBomb.
    You have to give this script another filename. For instance hidefieldsScript2.js.
    Ad this file directly into the “js” folder for your theme (example: “./wordpress/wp-content/themes/your-theme-name/js/”.
    Don’t forget step 5 by adding “<script type=”text/javascript” src=”<?php echo get_stylesheet_directory_uri(); ?>/js/hidefieldsScript2.js”></script> to the header.php
    Now you are able to expand the contact form with extra hidings and new conditions for hiding.
    It works great!

    Wow! thanks for this tutorial. I’ve been searching on this feature for so long until I landed to this thread through searching in Google. It really works for me, I even created more if else statements for more hide and show up fields.

    Many thanks BunnyBomb!!

    I can’t get this to work at all in the Genesis Framework with a child theme. What I noticed in the Genesis framework is the jquery version is 1.7.2 and not 1.7.1 like Bunny’s tut. I don’t know if this has anything to do with the code not functioning properly or not. I wouldn’t think so – but I can’t figure it out. Anyone find the same problem? Also – working with the latest CF7 Version 3.3.1 and latest WP Version 3.4.2

    I needed the same option HermanBos mentioned where you need to hide the required field and I came up with this trick which works in IE Chrome Firefox test others and let me know!

    <script type="text/javascript">
    /*! jQuery script to hide certain form fields */
    $(document).ready(function () {
    
        //Hide the field initially
        $("#hide").hide();
    
        //Show the text field only when the third option is chosen
        $('#dropdown').change(function () {
            if ($("#dropdown").val() == "Other") {
                $("#hide").show();
                var input = $("#hide");
                if (input.length > 0) { //If the input field contains any value remove it
                    input.val('');
                }
    
            } else {
                $("#hide").hide();
                var input = $("#hide");
                input.val("NA"); //add NA Value to hidden field that is required!
    
            }
        });
    });
    </script>

    Thanks Bunnybomb !!

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