Conditional content based on contact form 7 Input

Conditions/features in use: Query String DKI Shortcode

Try it!

Enter your name and favorite color in the form below to see the result:

How to Display CF7 User Input Dynamically – Step by Step

To dynamically display the user input from of a Contact Form 7 form, follow these steps:

1. Creating the contact form on Contact Form 7 and adding it to your page.
2. Adding a JavaScript code to your page that sends the user inputs to the page’s query string when the form is submitted.
3. Displaying the values using the If-So Query String Dynamic Keyword Insertion.

Attach the user input to the query string

1. Create a contact form with your desired fields and add it to your page. In our example bellow we have a name field and a color field.

<p >what is your name?</p>
[text* your-name default:get ]

<p >What is your favorite color?</p>
[radio your-color use_label_element default:get "Red" "Green" "Blue"]

[submit "Submit"]

2. Embed this JavaScript code in your page. The code add the user input to the query string upon form submission.

document.addEventListener( 'wpcf7mailsent', function( event ) { 
  var formId = 111111
  var fieldNames = ['your-name', 'your-color']
  var nextURL = 'display-page-url'

  if(event.detail.contactFormId == formId){
    let fields = event.detail.inputs.filter(input => fieldNames.includes(input.name))
    if ('URLSearchParams' in window) {
      var searchParams = new URLSearchParams(window.location.search)
      fields.forEach(field => searchParams.set(field.name, field.value));
      var newPath = nextURL ? nextURL : window.location.pathname
      var newPathQuery = nextURL + '?' + searchParams.toString();
      window.location = newPathQuery
    }
  }
}, false );

3. Replace the value inside the formId parameter with your form ID.
4. Add the name of any input that should be displayed upon submittion inside the fieldNames parameter, each field name separated by a comma and wrapped by quotes.
5. Replace the nextURL parameter with the address of the page that the user inputs will be displayed on (usually it will be a thank-you page). Leaving the URL empty will lead to the form’s page being used to display the user inputs.
   

Display the values from the query string

Your can display a field directly using the Query String Dynamic Keyword Insertion shortcode or use a trigger to add dynamic content according to the field’s content.

In our example we display the user name directly while changing the page style according to the color field using a trigger.

Display an input field using the Query String DKI

Add the Query String DKI shortcode inside your display page. Bellow is the shortcode from our example:

[ifsoDKI type="querystring" parameter="your-name" fallback="{name}"]

Add additional dynamic content using a trigger

To add dynamic content according to the user input follow these steps:

1. Create a new If-So trigger.
2. Select the “Page URL”.
3. Select the “URL Contains” operator.
4. type your query string. In our example we want to use the ‘your-color’ field, so our query string will be “your-color=”Red”.
5. Add the desired content in the content field. In our example, we alter the page style. Learn more about conditional CSS here.
6. Add another version for each possible query string. In our example we add a version for “your-color=Green and “your-color=Blue”.
7. Publish the trigger and paste the trigger shortcode on the display page.
8. Add the If-So trigger shortcode on the top of the display page.