HeroBytes Confirm & Masks for Contact Form 7

Description

Three things people keep asking Contact Form 7 for, in one small add-on:

1. A confirmation screen. Before the message is sent, the visitor sees a summary of everything they typed, with a Back button and a Send button. Fewer typos in phone numbers and emails, fewer “sorry, I meant…” follow-ups. Standard practice in Japan, useful everywhere.

2. Input masks. Add mask:phone-us, mask:cpf, mask:date, mask:money or your own pattern to any text or tel field and the input formats itself while the visitor types. Mobile keyboards switch to numeric automatically. Incomplete values are rejected on the server too.

3. Multi-step forms. Write [step "Title"] where a new step begins. Each step is validated before moving on. One form, one submission, no extra pages.

Confirmation screen

• Turn it on per form (its own Confirm & Masks tab), for every form at once (Contact > Confirm & Masks), or with a line confirm_screen: on in the form’s Additional Settings.
• Shown in place of the form or as a pop-up over the page.
• Title, intro and button labels are editable globally and per form.
• Labels are taken from your form’s <label> elements. Fields hidden by conditional-fields plugins are left out. Add the class avoid-confirm to anything you do not want in the summary.
• Files, checkboxes, radio buttons, selects and acceptance boxes are summarised properly.
• Keyboard and screen-reader friendly: focus moves to the summary, the pop-up traps focus and closes with Escape.
• Templates built for the old “Contact Form 7 add confirm” plugin keep working: the [confirm] button opens the confirmation screen and [back] is ignored.

Input masks

Add mask:NAME to a [text] or [tel] field:

[tel* phone mask:phone-us]
[text* document mask:cpf]
[text birthday mask:date placeholder "DD/MM/YYYY"]
[text* budget mask:money]
[text plate mask:AAA-000]
[tel* mobile mask placeholder "+57 (000) 000-0000"]

Presets: phone, digits, money, phone-us, phone-br, phone-co, phone-mx, phone-ar, phone-cl, phone-es, phone-pt, phone-uk, phone-de, phone-fr, phone-it, phone-jp, date, date-us, date-iso, time, year, cpf, cnpj, cpf-cnpj, cep, nit, rut, dni, nie, curp, rfc, zip, zip-us, postcode.

Pattern tokens: 0 digit, 9 optional digit, A letter, S letter or digit, # any character. Anything else is printed literally. Contact Form 7 does not allow spaces or brackets inside tag options, so for those write a bare mask and put the pattern in the placeholder, or define a named mask under Contact > Confirm & Masks.

Dates and times are also checked to be real (no 31/02). The [mask* name "(___) ___-____" "Placeholder"] tag from the old “Contact Form 7 – Phone mask field” plugin keeps working.

Multi-step forms

[step "About you"]
<label> Your name [text* your-name] </label>
[step "Your message"]
<label> Message [textarea your-message] </label>
[submit "Send"]

A progress list shows the steps. Next validates the current step with Contact Form 7’s own rules. If the server rejects a field, the form jumps back to its step. The confirmation screen, if enabled, comes after the last step.

For developers

• Events on the form element: hvcm:confirmopen, hvcm:confirmback, hvcm:confirmsend, hvcm:stepchange.
• window.hvcm.init(form) for forms inserted after page load.
• Filters: hvcm_confirm_enabled, hvcm_frontend_config, hvcm_mask_presets, hvcm_incomplete_message, hvcm_always_enqueue.
• Per-form settings live in the _hvcm post meta of the contact form. Global settings in the hvcm_settings option.

No external requests, no tracking, no accounts, no jQuery. Assets load only on pages that render a form using one of the features. Uninstalling removes the option and the per-form settings.

This plugin is not affiliated with the developers of Contact Form 7.