Podmíněné zobrazení pole v Contact Form 7 pomocí jednoduchého JavaScriptu

Tento článek (nebo jeho část) je převzat z externího zdroje. Je tedy slušností jej uvést včetně případného autora.

I was recently building a contact form for a client using the popular Contact Form 7 WordPress plugin.

Like many forms, this form I was building had a drop down and one of the choices on the drop down was “Other”. The client wanted to display a text box if the user selected “Other”.

Contact Form 7

This sounds like it would be a common request right? It is. However, Contact Form 7 does not natively support conditional fields yet (ver 4.8.1).

There is a sweet add-on plugin for Contact Form 7 that will do that. And if you search online, there are many tutorials like this that in my opinion is an overkill for what could be done with some simple JavaScript.

Sure, if you have too many conditional fields, go for the add-on plugin. It will be cleaner and easier to manage. But for a lot of users with one or two conditional fields per form, the following should work just fine.

Inline JavaScript On Contact Form 7

If you add JavaScript into the Contact Form 7 form builder, it will run on the front-end on the page where the form is displayed. How neat!

Be warned! Do not add empty lines in the script or the form will add paragraph <p> and break the script. Other than that, inline js works just fine.

Conditionally Display Text Field When “Other” Is Selected In A Drop Down

For this example, I will build a simple contact form that accepts:

  • Name
  • Email
  • Favorite Color (Pink, Red, Purple or Other)
  • Text Field to specify the favorite color

Create a new form in Contact Form 7 and start by adding all the elements you want to be displayed on the form. Remember to specify a unique CSS ID for the Favorite Color drop down.

Drop Down Builder With Unique ID

Drop Down Builder With Unique ID

Add the text field and a label and specify a unique CSS ID to the label. The form builder will look like this right now.

Note that the label for favorite-color text field has the CSS ID ‘EnterFavoriteColorLabel‘.

Here is the JavaScript to display the text field when the option ‘Other‘ is selected in the dropdown with the ID ‘FavoriteColorDropDown‘.

The inline comments explain the script pretty well.

Add the script after the form elements. The Contact Form 7 form editor should look like this.

Edit Contact Form Contact Form 7

Contact Form 7 Form Editor With Inline JavaScript

Remember, no blank lines in the inline JavaScript or it won’t work.

Conditional Fields In Action – Drop Down

Here is the result of our inline js.

Conditionally Display Fields In Contact Form 7 With Simple JavaScript

Conditionally Fields In Contact Form 7

Conditionally Display Text Field When A Radio Button Group Selection Is “Other”

For radio buttons, we get the value of the checked radio and when the value is “Other”, we can display the text field.

In this example, we will look at radio buttons that ask for your shirt size with an “Other” option. Just in case if you are an alien.

The inline comments will explain the code.

Conditional Fields In Action – Radio Buttons

Here is how the inline js works with the radio buttons.

Conditional Text Field With Radio Buttons

Conditional Text Field With Radio Buttons

No add-on plugins. Just simple plain old JavaScript.