How to add conditional fields in contact form 7? [Solved]

0

Sometimes we may need to add conditional fields or conditional  text in contact form  7. But unfortunately, they don’t have these type of feature to add conditional logic like gravity form. In this tutorial, I am going to show the process to add that feature in contact form 7. Here following the steps to do that:

Install Contact Form 7:

  1. Upload the entire contact-form-7 folder to the /wp-content/plugins/ directory.
  2. Activate the plugin through the ‘Plugins’ menu in WordPress.

You will find ‘Contact’ menu in your WordPress admin panel.

Create a new Form

After installing the contact form 7, navigate the “Contact” Menu from the left sidebar in your admin dashboard. Now go to the Contact > Add New  and then hit the Add New button there.  You will get a form sample there.

contact form 7

Contact form 7

Now put the required information there. In this tutorial, I will  make a special drop down option field  with conditional logic. Suppose I want to add a question like “What is your favorite Game?” there will have 4 options basically “Cricket, Tenis, Football and Other”  if user select the option “Other”, then a new text box will appear there to write the name of the game. Let’s go ahead.

So normally contact form code will be like that,

To show  extra text box for the option “Other”, we should add HTML code there something like that below:

screenshot_760

Activate Conditional Logic by jQuery

Now write the logic by jquery to activate that feature in your form. Here is the example of code below:

 

Live Preview:

I believe that simple tutorial may save you from lots of pain.  If you want to improve your wordpress website speed follow that, Special guidelines

Share.

About Author

I have no more personal information to share with you but have enough experience to share with all. I am always funny