webheadcoder

I needed a contact form that spanned across multiple pages and in the end would send an email with all the info collected. This plugin adds onto the popular Contact Form 7 plugin to do just that.
Sample of this working is at <a href="https://webheadcoder.com/contact-form-7-multi-step-form/" rel="nofollow ugc">https://webheadcoder.com/contact-form-7-multi-step-form/</a>
Requires the <a href="https://wordpress.org/plugins/contact-form-7/" rel="ugc">Contact Form 7 plugin</a>, version 5.2 or above, by Takayuki Miyoshi.
Usage
<ol>
<li>
Create one page or post for each step in your multi-step form process. If you have 3 steps, create 3 pages/posts. You will need the urls to these when creating your forms.
</li>
<li>
Create a Contact Form 7 form.
</li>
<li>
Place your cursor at the end of the form.
</li>
<li>
On the “Form” tab of the Contact Form 7 form, click on the button named “multistep”.
</li>
<li>
In the window that pops up, check the checkbox next to “First Step” if this is the first step of your multi step forms. If this is your last step in the multi step forms, check the “Last Step” checkbox. All other checkboxes are optional.
</li>
<li>
The Next Page URL is the url that contains your next form. If this form is the last step, you can leave the URL field blank.
</li>
<li>
Click “Insert Tag”
</li>
<li>
Save your completed form and place the form’s shortcode into the appropriate Page/Post you created in step 1.
</li>
<li>
Repeat for each form in your multi-step form process.
</li>
<li>
On the last step, you probably would want to send an email. Make sure to check the “Send Email” checkbox in step 5. On the Mail Tab, simply enter the mail-tags as you normally would. For example if your first form has the field <code>your-email</code> you can include <code>[your-email]</code> in the Mail tab on your last form. Note: CF7 will see this as an error because <code>your-email</code> may not be displayed on the current form. You can safely ignore this error.
</li>
</ol>
Multistep Tag Options
<ul>
<li>
Name – The name of this multistep form-tag. This is required, but is currently not being used.
</li>
<li>
First Step – Besides marking the first step of your multistep forms, this allows any form to act as the first step and show when no previous data has ben submitted. This is useful when you want some users to skip the first step.
</li>
<li>
Last Step – Besides marking the last step of you multistep forms, this clears the data from user’s browsers. Once they submit this form they won’t see their data populating the forms anymore.
</li>
<li>
Send Email – If this is checked the form will send an email like a normal Contact Form 7 submission.
</li>
<li>
Skip Save – If you use Flamingo or CFDB7 to save submissions to the database this prevents saving this form submission.
</li>
<li>
Next Page URL – This is the URL your users will go to after the form is submitted.
[multistep multistep-123 last_step send_email skip_save “/thank-you”]
</li>
</ul>
Additional Tags
<pre><code>[multiform "your-name"]
</code></pre>
The <code>multiform</code> form-tag can be used to display a field from a previous step. Replace <code>your-name</code> with the name of your field. This is only for use on the Form tab, this tag will not work in the Mail tab.
<pre><code>[previous "Go Back"]
</code></pre>
The <code>previous</code> form-tag can be used to display a button to go to a previous step. Replace <code>Go Back</code> with text you want to show in the button.
Messages Tab 
When a visitor to your site visits the 4th step in your multi step form without filling out the 1st step, the message “Please fill out the form on the previous page.” will be displayed. You can change this on each form in the Messages tab.
What this plugin DOES NOT do:
<ul>
<li>
This plugin does not support file uploads on every form. If you need to use file uploads make sure to place it on the last step.
</li>
<li>
This plugin currently does not support “pipes” in the select field. See https://contactform7.com/selectable-recipient-with-pipes/ for more on what “pipes” is on the Contact Form 7 site.
</li>
<li>
This plugin does not load another form on the same page. It only works when the forms are on separate pages. Many have asked to make it load via ajax so all forms can reside on one page. This plugin does not support that.
</li>
</ul>
PRO Version 
If you expect to have a lot of data submitted through your multi-step forms, the Pro version may be able to help you better. The PRO version uses Session Storage so it is able to handle roughly 1,000 times more data for your multiple forms. In total it can handle about 5MB vs 4KB in the free version. Currently the Pro version REQUIRES the WordPress REST API and Contact Form 7 AJAX Submission to be enabled.
Another feature the Pro version offers is the ability to skip steps with the “Contact Form 7 – Conditional Fields plugin”. <a href="https://webheadcoder.com/contact-form-7-multi-step-forms/#pro" rel="nofollow ugc">Learn more here.</a>

Contact Form 7 Multi-Step Forms

After another well-known contact form plugin stopped working I needed a different multi-page form solution. CF7 with this plugin fit the bill.

Does what it needs to do.

Enables the Contact Form 7 plugin to create multi-page, multi-step forms.

Jack K

Nikolay Strikhar

Estevão Costa

WordPress Form Builder Plugin – Gutenberg Forms
This is the next generation WordPress form builder plugin. You can easily build your forms by adding form fields as gutenberg blocks within the Gutenberg Editor. You do not need to leave the editor to build your forms using some other drag & drop form builder. Now you can build your form within Gutenberg editor using Gutenberg Forms.
Gutenberg Forms adds a Form Block in Gutenberg and all the form fields are child blocks which you can add within the Form Block, nice and easy. You can add multiple contact forms, and you can customize the form within the Gutenberg Editor. Google reCAPTCHA integration added for spam filtering.
<h3>Feature Highlights</h3>
The following are some of the main features, but there’s more which you need to checkout by installing the plugin.
<ul>
<li>No Bulky Form Builder – Build Forms Directly in Gutenberg Editor.</li>
<li>Easy Form Layouts using builtin Form Columns Block.</li>
<li>Create Multi-Step / Multi-Page Forms Easily.</li>
<li>Conditional Logic – Show/hide fields conditionally.</li>
<li>Form Entries – Form Entries are recorded in the database and accessible via WordPress admin.</li>
<li>Use Forms Anywhere – You can create standalone forms using Gutenberg and use it anywhere using a shortcode. That Gutenberg Forms compatible with any WordPress page builder.</li>
<li>Dynamically populate field values via URL parameters.</li>
<li>Hidden field type with dynamic value tags.</li>
<li>Spam Protection – Google reCaptcha & Akismet Integration.</li>
<li>Email Notification Builder – Create a custom email notification content.</li>
<li>Form Styles – Form & Field blocks come with different styles. (you can add yours as well).</li>
<li>Responsive Forms – The forms you create are fully responsive.</li>
<li>Import/Export Forms – Do it the same way you do with any Gutenberg block.</li>
<li>More features you will find out while using the plugin.</li>
</ul>
<h3>Documentation</h3>
Please read the docs before creating a support ticket here. 
<a href="https://gutenbergforms.com/docs" rel="nofollow ugc">https://gutenbergforms.com/docs</a>
<h3>Extensions</h3>
MailPoet 
Our first add-on has been released. It is for MailPoet plugin that lets you connect Gutenberg Forms with MailPoet to send leads to your MailPoet list.
Read More & Install it, it’s FREE. 
<a href="https://wordpress.org/plugins/guten-forms-mailpoet/" rel="ugc">https://wordpress.org/plugins/guten-forms-mailpoet/</a>
Mailchimp 
Mailchimp integration is ready as an add-on. Mailchimp add-on lets you connect your Mailchimp account with Gutenberg Forms to send leads to your selected list.
Read More & Install it, it’s FREE. 
<a href="https://wordpress.org/plugins/guten-forms-mailchimp/" rel="ugc">https://wordpress.org/plugins/guten-forms-mailchimp/</a>
Akismet 
Akismet integration is ready as an add-on. It let’s you secure your forms from spammers. Akismet checks your contact form submissions against their global database of spam.
Read More & Install it, it’s FREE. 
<a href="https://wordpress.org/plugins/guten-forms-akismet/" rel="ugc">https://wordpress.org/plugins/guten-forms-akismet/</a>
<h3>Share Your Feedback & Suggestions 👏</h3>
Your feedback, ideas and suggestions would be really helpful in adding & improving the features that you need. We have set up a tool to collect your feedback and prioritize the features based on votes.
<a href="https://github.com/nikolaystrikhar/gutenberg-forms/issues" rel="nofollow ugc">https://github.com/nikolaystrikhar/gutenberg-forms/issues</a>

Gutenberg Forms – WordPress Form Builder Plugin

Have just found out that Caldera Forms, one of the last decent free form builders, is sunsetting and so need to find something that is competitive and expandable.

Gutenberg Forms seems like a great initiative and it would be great if we can better understand how we can contribute and extend this work - for example develop hooks and other exciting functions.

Keep up the good work.

Great work - how can we help?

The form building process - right in the editor, or as reusable ones - are awesome.

The Conditions and the Multi Step options are not perfect - not working as expected. That was what I was looking for when installed. The problem is initially selected options as radio buttons or select dropdown. The do not get registered, and it goes undetected until submission, that they have no value. This makes the Conditions not detect their value, and therefore cannot work.

I have a support question for this - so far unanswered.

When fixed - this plugin will get my full five star rating.

Awesome forms - with glitches

The Next Generation WordPress Form Builder. Build forms directly within Gutenberg editor live. Add & arrange form fields like blocks.

Contact Form 7 Multi-Step Forms vs Gutenberg Forms – WordPress Form Builder Plugin