Display CF7 Field Input Upon Submission

Conditions/features in use: Query String DKI Shortcode

Try it!

Enter your name and favorite color in the form below to see how we display them dynamically.

    what is your name?

    What is your favorite color?

    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"]
    1. 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 );
    1. Replace the value inside the formId parameter with your form ID.
    2. 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.
    3. 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.

    Categories

    Realated templates and examples