Creating a Multi-Step Form with Contact Form 7 on WordPress

Creating a multi-step form in Contact Form 7 is an excellent way to enhance user experience by breaking lengthy forms into smaller, more manageable sections. In this article, we'll guide you through the process of creating a multi-step form using the Contact Form 7 plugin on WordPress.

Step 1: Install Multi Step for Contact Form 7

First, you need to install the "Multi Step for Contact Form 7" plugin. To do this, follow these steps:

Go to your WordPress dashboard, then navigate to Plugins > Add New.
Search for "Multi Step for Contact Form 7."
Click "Install Now" and then "Activate."

Step 2: Create a New Contact Form

Once you've installed the plugin, follow these steps to create a new multi-step form:

Go to your WordPress dashboard, and navigate to Contact > Contact Forms.
Click "Add New" to create a new form.
Give your form a title, such as "Multi-Step Moving Quote Form."

Step 3: Set Up the Multi-Step Form

Now, it's time to create the steps for your multi-step form. We'll create a two-step form for this example.

Step 1: Basic Information

In the form editor, add the following code for the first step:

<center> <h3>Basic Information</h3> </center>

<label>First Name
  [text* firstname] </label>
<label> Last Name
  [text* lastname] </label>
<label> Phone Number
  [tel* phone1] </label>
<label> Your email
  [email* email] </label>

Step 2: Additional Information

For the second step, add the following code after the first step's code:

<center> <h3>Additional Information</h3> </center>
<label> Desired Move Date:
  [date movedate] </label>
<label> Moving from Zip Code?
  [text* fromzip] </label>
<label> Moving to Zip Code? 
  [text* tozip] </label>
<label> Service Type: [select* fromapartmenttype include_blank "Local Moving" "Moving with Storage" "Loading Help" "Unloading Help" "Flat rate" "Over Night" "Long Distance" "Packing Day" ] </label>
<label> Move Size [select* movesizetext include_blank "Room or Less" "Studio Aprtment" "Small 1 Bedroom" "large 1 Bedroom" "small 2 Bedroom" "large 2 Bedroom" "3 Bedroom Apartment" "2 Bedroom House/Townhouse" "3 Bedroom House/Townhouse" "4 Bedroom House/Townhouse" "Commerical"] </label>
<label> Type of entrance (To): [select* reference include_blank "No Stairs - Ground Floor" "Stairs - 2nd Floor" "Stairs - 3rd Floor" "Stairs - 4th Floor" "Stairs - 5th Floor" "Elevator" "Private House"] </label>

[hidden uniquekey default:"XX-XXXX" ]
[submit "Submit"]

Step 4: Add the Posting URL To contact form 7

Note: Make sure you have installed the "CF7 to Webhook" plugin.

In the WordPress Contact Forms interface, navigate to the "Webhook" section.
Paste the following URL: `https://api.network-leads.com/post`
Make sure to mark the "Integration Send to webhook" checkbox.

Step 5: Embed the Multi-Step Form

To embed the multi-step form on a page or post, copy the shortcode provided by Contact Form 7 and paste it where you want the form to appear.

Step 6: Saving Changes and Testing

Finally, save the changes made to your form and test it. Fill out the form on your website and submit it. Check your board on our software platform to verify if the lead appears. If the lead is successfully captured, congratulations! Your integration is complete.

By following these steps, you can create user-friendly multi-step forms using Contact Form 7 on your WordPress website. Breaking down lengthy forms into smaller steps improves the user experience and increases form completion rates. Start implementing multi-step forms today to enhance your website's forms and capture valuable user information more effectively.

What's Next?

Read more about sales advanced tools and make sure to go over key features.