Using Multi Step Form in wordpress

Welcome to the guide on integrating the Multi-Step Form into your project. This form can send data to two endpoints: Contact Form 7 and Zapier via catch webhook. Follow the steps below to set up and configure the form for your needs.

demo page for this form available at this url

This project is built with vue js ,tailwind and vite.

Step 1: Download the Code

First, you need to download the code from the repository. Follow the installation process from there.

Step 2: Configure the Project

Now, you need to configure the project to suit your settings. The form can be integrated to send data to Contact Form 7 or Zapier for now.

Configuring for Contact Form 7

To send data to Contact Form 7, you need to set the api field prop to cf7 and provide the URL of the website where the form is hosted, as well as the apiId which is the ID of the Contact Form 7 form.

1. Set api to cf7
2. Set formURL to the website URL such as https://example.com and not https://example.com/
3. Set apiId to the form ID

Finding the Form ID

To find the ID of your Contact Form 7 form, navigate to the Contact Form 7 plugin in your WordPress dashboard. The form ID is displayed as url once you hover on Edit button. Here’s a screenshot for reference:

Configuring for Zapier

To send data to Zapier, you need to set the api field to zapier and provide the catch webhook URL from Zapier.

1. Set api to zapier
2. Set apiId to the catch webhook URL such as https://hooks.zapier.com/hooks/catch/123456/abcdef

Zapier webhook guide attached here just in case

There are other props available as well to customise the form such as enable/disable form tracking slider , button texts etc learn more about it here

Conclusion

That’s it! You’ve successfully integrated the Multi-Step Form into your project. Now you can configure it to send data to either Contact Form 7 or Zapier based on your needs.

Happy coding!