Dynamic Input Values In Form Steps

Fluent Forms allows you to dynamically populate input values to make your multi-step forms more connected and personalized.

This article will guide you through adding dynamic input values to the form steps with Fluent Form on the WordPress site.

Creating a Multi-Step Form

To utilize dynamic input values, first, create a multi-step form. Read Creating a Multi-Step Form in Fluent Forms if you don’t know how to make a multi-step form.

For this example, I will create a multi-step form where the user enters their Name in the first step. In the second step, we will dynamically display their name as a personalized greeting.

Adding Custom HTML Input Field

Add a Custom HTML input field from the General Field section to populate the name input data.

You will find an innovative code sample at the bottom right of the HTML input areas. If you want to learn more about the Custom HTML field, read the Custom HTML Field documentation.

Using the SmartCode

Now, using the Smart codes, you can show the content of the previous input. For this, use the {dynamic.YOUR_INPUT_NAME}, where YOUR_INPUT_NAME is the Name Attribute of the input field you want to populate.

Finding the Name Attribute

To find the Name Attribute of the input field, click on the Input Field (Name Field). Now, on the right-side panel, navigate to Advanced Options. Here, you’ll find the Name Attribute assigned to the input field. For a better understanding, see the screenshot below.

Adding Smart Code in the HTML Field

To display the entered Name dynamically in the second step, use the following Smart Code in the HTML Content Field:

Hello {dynamic.names}, welcome to Fluent Forms!

Where names is the Name Attribute of the Name Field.

Embed the Form into the Front

Once you complete the customization, click the Save Form button to save all your changes. Click the Preview & Design button in the middle to see the form preview.

To integrate and display the form on a specific Page or post, copy the Shortcode from the top right side and paste it into your desired Page or post.

Preview of Dynamic Input Values

After embedding, you can preview the form with the dynamic input values in form steps.

Your multi-step form will display a personalized message using the name entered in the first step.