Contact Form 7
Show radiobuttons on certain condition (8 posts)

  1. donbucknall
    Posted 4 years ago #

    Hello All,

    I have a few questions in my form but they only need to be filled if the previous question is yes.
    Example: Do you use medication? yes no

    In this case: if yes I want more options, what do you use them for? How long? etc.
    if no, it's ok and they go on.

    Is this possible? If so how?
    Thanks alot!



  2. BunnyBomb
    Posted 4 years ago #

    I would like to know the answer to this also please.

    Thanks in advance.

  3. englebip
    Posted 4 years ago #

    You would need to use some JavaScript to show/hide certain fields based on a condition. See, for example, this post. You can include the code between <script></script> tags above the code for the form.

  4. BunnyBomb
    Posted 4 years ago #

    Thanks very much for the post englebip, that is helpful.

    I tried the basic example from your link, but it doesn't seem to work properly. I pasted it into jsFiddle so you can see it here --> http://jsfiddle.net/WWaFQ/

    Would appreciate some advice. Otherwise I'll just leave a comment on the author's blog page.

  5. BunnyBomb
    Posted 4 years ago #


    1. Working simple example
    I managed to get that example working. My first attempt had errors due to copy/paste issues from the website with the code. Here is the simple working example using jQuery: http://jsfiddle.net/WWaFQ/3/

    2. Example using Slick Ajax Form with jQuery
    I decided to have a go at a more complex example of using jQuery to show/hide form fields. I've created this working example which contains one conditional form field that shows/hides itself when you select "Nope" in the answer to the previous question. Check out the live example here: http://jsfiddle.net/r262B/1/

    What does all this mean for Contact Form 7?
    If you use the "div" method I have applied within my second example above, you could very VERY easily write a .js script to show/hide form fields generated by Contact Form 7...without modifying any of the plugin code at all!

    Happy days :)

  6. BunnyBomb
    Posted 4 years ago #

    Oh and by the way, to get to the above conclusion I found this tutorial very helpful: http://anthonygthomas.com/2010/03/14/display-form-fields-based-on-selection-using-jquery/

  7. BunnyBomb
    Posted 4 years ago #


    I've posted a step-by-step example in a new thread on how to create the jQuery script to work with Contact Form 7 and achieve the answer to the conditional fields question.

    See the post here --> http://wordpress.org/support/topic/plugin-contact-form-7-this-is-how-to-showhide-fields-with-jquery?replies=2#post-2640281

  8. donbucknall
    Posted 4 years ago #

    Wow! I've been out a few days. Seeing all the awnsers I'm gonna look through it tomorrow! Thanks alot! Hope this is gonna work for me:)


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