Webheadcoder Multi-Step Forms for Contact Form 7 vs Masks Form Fields

First released in 2013, Webheadcoder Multi-Step Forms for Contact Form 7 adds multi-step flows to forms by placing each step on a separate page, preserving submitted data between steps, and sending the completed email only from the designated step configured to send it. See it in action at https://webheadcoder.com/contact-form-7-multi-step-forms/ Requires Contact Form 7 (5.2 or above) by Rock Lobster Inc. (Takayuki Miyoshi). Usage Create one page or post for each step in your multi-step form process. If you have three steps, create three pages or posts. You will need their URLs when creating your forms. Create a Contact Form 7 form. Place your cursor at the end of the form. On the “Form” tab of the Contact Form 7 form, click on the button named “multistep”. In the window that opens, select “First Step” if this is the first step of your multi-step form. If this is the last step, select “Last Step.” All other checkboxes are optional. 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. Click “Insert Tag.” Save your completed form and place the form’s shortcode into the appropriate page or post you created in step 1. Repeat for each form in your multi-step form process. On the last step, you may want to send an email. Select “Send Email” in step 5. On the Mail tab, enter mail-tags as you normally would. For example, if your first form has the field your-email, you can include [your-email] in the Mail tab on your last form. Contact Form 7 may flag this because your-email is not displayed on the current form; you can safely ignore that warning. Multistep Tag Options Name – The name of this multistep form-tag. This is required, but is currently not being used. First Step – Besides marking the first step of your multistep form, this allows any form to act as the first step and display when no previous data has been submitted. This is useful when you want some users to skip the first step. Last Step – Besides marking the last step of your multistep form, this clears the data from users’ browsers. Once they submit this form, they will no longer see their data populate the forms. Send Email – If this is checked the form will send an email like a normal Contact Form 7 submission. Skip Save – If you use Flamingo or CFDB7 to save submissions to the database this prevents saving this form submission. 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”] Additional Tags [multiform "your-name"] The multiform form-tag can be used to display a field from a previous step. Replace your-name with the name of your field. This is only for use on the Form tab, this tag will not work in the Mail tab. [previous "Go Back"] The previous form-tag can be used to display a button to go to a previous step. Replace Go Back with text you want to show in the button. Messages Tab When a visitor visits the fourth step in your multi-step form without completing the first step, the message “Please fill out the form on the previous page.” is displayed. You can change this for each form in the Messages tab. What this plugin DOES NOT do: 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. 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. 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”. Learn more here. Source Code The human-readable source for this plugin’s minified JavaScript and compiled CSS is published at https://github.com/coreyt808/webheadcoder-multi-step-forms-for-contact-form-7, with the unminified files in assets-src/. To rebuild the generated files in resources/, use Node.js 24 and run composer install, npm ci, and npm run deploy. External services This plugin uses Freemius, an external service, for optional usage tracking and opt-in, licensing, account management, pricing, and purchase or upgrade functions. Freemius receives and processes information used for these functions. The free plugin remains usable if an administrator chooses “Skip” on the Freemius opt-in screen. If an administrator opts in, the plugin can send the opted-in administrator’s first name, last name, and email address; the plugin’s version and state; the WordPress and PHP versions; the site language and website URL; and, when the administrator separately allows it, the list of installed plugins and themes. Activating and maintaining a paid license sends the license and site or product information needed for license activation, account management, and update checks. A pricing or checkout connection is initiated only after an administrator explicitly selects a plugin-provided Upgrade or Purchase link and proceeds through the Freemius SDK-managed flow. Learn more about Freemius, its opt-in behavior, and its data practices. Use of the service is subject to the Freemius Terms of Service and Privacy Policy.

Add a class in the form field. Example of use with Contact Form 7: [tel your-phone class:phone placeholder "Phone"] Listing of classes available for use. ('span.start, input.start').mff_mask('00/0000'); ('span.date, input.date').mff_mask('00/00/0000'); ('span.time, input.time').mff_mask('00:00:00'); ('span.time2, input.time2').mff_mask('00:00'); ('input.date_time').mff_mask('00/00/0000 00:00:00'); ('input.date_time2').mff_mask('00/00/0000 00:00'); ('input.cep').mff_mask('00000-000', { clearIfNotMatch: true }); ('input.zip').mff_mask('00000'); ('input.phone, input[name="phonebr"]').mff_mask(PhoneMaskBehavior, nonoOptions); ('input.phone_us').mff_mask('(000) 000-0000'); ('input.taxid').mff_mask('00-0000000'); ('input.ssn').mff_mask('000-00-0000'); ('input.mixed').mff_mask('AAA 000-S0S'); ('input.cpf').mff_mask('000.000.000-00', { reverse: true, clearIfNotMatch: true }); ('input.cnpj').mff_mask('00.000.000/0000-00', { reverse: true, clearIfNotMatch: true }); ('input.money').mff_mask('000.000.000.000.000,00', { reverse: true }); ('input.money2').mff_mask('#.##0,00', { reverse: true }); ('input.money3').mff_mask('#,##0.00', { reverse: true }); ('input.money4').mff_mask('000,000,000,000,000.00', { reverse: true }); ('input.money5').mff_mask('#.##0', { reverse: true }); ('input.money6').mff_mask('#,##0', { reverse: true }); ('input.ip_address').mff_mask('099.099.099.099'); ('input.percent').mff_mask('##0,00%', { reverse: true }); ('input.percent2').mff_mask('##0.00%', { reverse: true }); ('input.percent3').mff_mask('990,0%', { reverse: true }); ('input.percent4').mff_mask('990.0%', { reverse: true }); ('input.percent5').mff_mask('#,##0%', { reverse: true }); ('input.percent6').mff_mask('#.##0%', { reverse: true }); Click here for more details on how to add custom mask. Optional – Added option for the format of the Brazilian phone number, with attribute name equal to phonebr. Credits jQuery Mask Plugin