{"id":395647,"date":"2026-10-30T12:00:32","date_gmt":"2026-10-30T12:00:32","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/herobytes-confirm-masks-for-contact-form-7\/"},"modified":"2026-10-30T12:48:11","modified_gmt":"2026-10-30T12:48:11","slug":"herobytes-confirm-masks-for-contact-form-7","status":"publish","type":"plugin","link":"https:\/\/wordpress.org\/plugins\/herobytes-confirm-masks-for-contact-form-7\/","author":23588307,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"1.0.0","stable_tag":"1.0.0","tested":"7.1.4","requires":"6.2","requires_php":"7.4","requires_plugins":null,"header_name":"HeroBytes Confirm & Masks for Contact Form 7","header_author":"Sebasti\u00e1n Pe\u00f1aranda","header_description":"Confirmation screen before sending, input masks (phone, ID documents, dates, money, custom patterns) and simple multi-step forms for Contact Form 7. No jQuery, no external services.","assets_banners_color":"a5b6e7","last_updated":"2026-10-30 12:48:11","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"https:\/\/wordpress.org\/plugins\/herobytes-confirm-masks-for-contact-form-7\/","header_author_uri":"https:\/\/profiles.wordpress.org\/herovibes\/","rating":0,"author_block_rating":0,"active_installs":0,"downloads":39,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.0.0":{"tag":"1.0.0","author":"herovibes","date":"2026-10-30 12:48:11","revision":3775264}},"upgrade_notice":{"1.0.0":"

Initial release.<\/p>"},"ratings":[],"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3775163,"resolution":"128x128","location":"assets","locale":"","width":128,"height":128},"icon-256x256.png":{"filename":"icon-256x256.png","revision":3775163,"resolution":"256x256","location":"assets","locale":"","width":256,"height":256},"icon.svg":{"filename":"icon.svg","revision":3775163,"resolution":false,"location":"assets","locale":false}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3775163,"resolution":"1544x500","location":"assets","locale":"","width":1544,"height":500},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3775163,"resolution":"772x250","location":"assets","locale":"","width":772,"height":250}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.0.0"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":3775264,"resolution":"1","location":"assets","locale":"","width":2560,"height":1600},"screenshot-2.png":{"filename":"screenshot-2.png","revision":3775264,"resolution":"2","location":"assets","locale":"","width":2560,"height":1600},"screenshot-3.png":{"filename":"screenshot-3.png","revision":3775264,"resolution":"3","location":"assets","locale":"","width":2560,"height":1600},"screenshot-4.png":{"filename":"screenshot-4.png","revision":3775264,"resolution":"4","location":"assets","locale":"","width":2560,"height":1600},"screenshot-5.png":{"filename":"screenshot-5.png","revision":3775264,"resolution":"5","location":"assets","locale":"","width":2560,"height":1600},"screenshot-6.png":{"filename":"screenshot-6.png","revision":3775264,"resolution":"6","location":"assets","locale":"","width":2560,"height":1600}},"screenshots":{"1":"The confirmation screen shown in place of the form.","2":"The confirmation screen as a pop-up.","3":"Input masks while typing: phone, date and money.","4":"A multi-step form with its progress list.","5":"The Confirm & Masks tab in the form editor.","6":"Global settings under Contact > Confirm & Masks."}},"plugin_section":[],"plugin_tags":[8381,1152,289737,127662,269121],"plugin_category":[],"plugin_contributors":[288985],"plugin_business_model":[],"class_list":["post-395647","plugin","type-plugin","status-publish","hentry","plugin_tags-confirmation","plugin_tags-contact-form-7","plugin_tags-input-mask","plugin_tags-multi-step","plugin_tags-phone-mask","plugin_contributors-herovibes","plugin_committers-herovibes"],"banners":{"banner":"https:\/\/ps.w.org\/herobytes-confirm-masks-for-contact-form-7\/assets\/banner-772x250.png?rev=3775163","banner_2x":"https:\/\/ps.w.org\/herobytes-confirm-masks-for-contact-form-7\/assets\/banner-1544x500.png?rev=3775163","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":"https:\/\/ps.w.org\/herobytes-confirm-masks-for-contact-form-7\/assets\/icon.svg?rev=3775163","icon":"https:\/\/ps.w.org\/herobytes-confirm-masks-for-contact-form-7\/assets\/icon.svg?rev=3775163","icon_2x":false,"generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/herobytes-confirm-masks-for-contact-form-7\/assets\/screenshot-1.png?rev=3775264","caption":"The confirmation screen shown in place of the form."},{"src":"https:\/\/ps.w.org\/herobytes-confirm-masks-for-contact-form-7\/assets\/screenshot-2.png?rev=3775264","caption":"The confirmation screen as a pop-up."},{"src":"https:\/\/ps.w.org\/herobytes-confirm-masks-for-contact-form-7\/assets\/screenshot-3.png?rev=3775264","caption":"Input masks while typing: phone, date and money."},{"src":"https:\/\/ps.w.org\/herobytes-confirm-masks-for-contact-form-7\/assets\/screenshot-4.png?rev=3775264","caption":"A multi-step form with its progress list."},{"src":"https:\/\/ps.w.org\/herobytes-confirm-masks-for-contact-form-7\/assets\/screenshot-5.png?rev=3775264","caption":"The Confirm & Masks tab in the form editor."},{"src":"https:\/\/ps.w.org\/herobytes-confirm-masks-for-contact-form-7\/assets\/screenshot-6.png?rev=3775264","caption":"Global settings under Contact > Confirm & Masks."}],"raw_content":"\n

Three things people keep asking Contact Form 7 for, in one small add-on:<\/p>\n\n

https:\/\/www.youtube.com\/watch?v=4PB7xqJh8mI<\/p>\n\n

1. A confirmation screen.<\/strong> Before the message is sent, the visitor sees a summary of everything they typed, with a Back<\/em> button and a Send<\/em> button. Fewer typos in phone numbers and emails, fewer \"sorry, I meant...\" follow-ups. Standard practice in Japan, useful everywhere.<\/p>\n\n

2. Input masks.<\/strong> Add mask:phone-us<\/code>, mask:cpf<\/code>, mask:date<\/code>, mask:money<\/code> 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.<\/p>\n\n

3. Multi-step forms.<\/strong> Write [step \"Title\"]<\/code> where a new step begins. Each step is validated before moving on. One form, one submission, no extra pages.<\/p>\n\n

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

    Input masks<\/h4>\n\n

    Add mask:NAME<\/code> to a [text]<\/code> or [tel]<\/code> field:<\/p>\n\n

    [tel* phone mask:phone-us]\n[text* document mask:cpf]\n[text birthday mask:date placeholder \"DD\/MM\/YYYY\"]\n[text* budget mask:money]\n[text plate mask:AAA-000]\n[tel* mobile mask placeholder \"+57 (000) 000-0000\"]\n<\/code><\/pre>\n\n
    Presets: phone<\/code>, digits<\/code>, money<\/code>, phone-us<\/code>, phone-br<\/code>, phone-co<\/code>, phone-mx<\/code>, phone-ar<\/code>, phone-cl<\/code>, phone-es<\/code>, phone-pt<\/code>, phone-uk<\/code>, phone-de<\/code>, phone-fr<\/code>, phone-it<\/code>, phone-jp<\/code>, date<\/code>, date-us<\/code>, date-iso<\/code>, time<\/code>, year<\/code>, cpf<\/code>, cnpj<\/code>, cpf-cnpj<\/code>, cep<\/code>, nit<\/code>, rut<\/code>, dni<\/code>, nie<\/code>, curp<\/code>, rfc<\/code>, zip<\/code>, zip-us<\/code>, postcode<\/code>.<\/p>\n\n
    Pattern tokens: 0<\/code> digit, 9<\/code> optional digit, A<\/code> letter, S<\/code> letter or digit, #<\/code> 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<\/code> and put the pattern in the placeholder, or define a named mask under Contact > Confirm & Masks<\/em>.<\/p>\n\n
    Dates and times are also checked to be real (no 31\/02). The [mask* name \"(___) ___-____\" \"Placeholder\"]<\/code> tag from the old \"Contact Form 7 - Phone mask field\" plugin keeps working.<\/p>\n\n
    Multi-step forms<\/h4>\n\n
    [step \"About you\"]\n<label> Your name [text* your-name] <\/label>\n[step \"Your message\"]\n<label> Message [textarea your-message] <\/label>\n[submit \"Send\"]\n<\/code><\/pre>\n\n
    A progress list shows the steps. Next<\/em> 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.<\/p>\n\n
    For developers<\/h4>\n\n
      \n
    • Events on the form element: hvcm:confirmopen<\/code>, hvcm:confirmback<\/code>, hvcm:confirmsend<\/code>, hvcm:stepchange<\/code>.<\/li>\n
    • window.hvcm.init(form)<\/code> for forms inserted after page load.<\/li>\n
    • Filters: hvcm_confirm_enabled<\/code>, hvcm_frontend_config<\/code>, hvcm_mask_presets<\/code>, hvcm_incomplete_message<\/code>, hvcm_always_enqueue<\/code>.<\/li>\n
    • Per-form settings live in the _hvcm<\/code> post meta of the contact form. Global settings in the hvcm_settings<\/code> option.<\/li>\n<\/ul>\n\n
      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.<\/p>\n\n
      This plugin is not affiliated with the developers of Contact Form 7.<\/p>\n\n\n
        \n
      1. Install and activate Contact Form 7 (5.6 or newer).<\/li>\n
      2. Upload the plugin folder to \/wp-content\/plugins\/<\/code> or install it from Plugins > Add New<\/em>.<\/li>\n
      3. Activate it.<\/li>\n
      4. Edit a form: the new Confirm & Masks<\/strong> tab turns on the confirmation screen and shows the mask reference.<\/li>\n
      5. Optional: set global defaults in Contact > Confirm & Masks<\/em>.<\/li>\n<\/ol>\n\n\n
        \n
        The summary shows \"Your name\" but my label says something else<\/h3><\/dt>\n
        The plugin reads <label><\/code> elements: either wrap the field in one, or give the field an id:<\/code> option and a <label for=\"...\"><\/code>. You can also wrap the label text in <span class=\"title-contactform7 for-FIELDNAME\"><\/code>. When nothing is found, the field name is prettified.<\/p><\/dd>\n
        Can I leave a field out of the confirmation screen?<\/h3><\/dt>\n
        Yes. Add the class avoid-confirm<\/code> (or hvcm-skip<\/code>) to the field's wrapper: <p class=\"avoid-confirm\">[text internal-note]<\/p><\/code>. Fields hidden by conditional-fields plugins are skipped automatically.<\/p><\/dd>\n
        Does the confirmation screen work with reCAPTCHA, Turnstile or Akismet?<\/h3><\/dt>\n
        Yes. The form is submitted through Contact Form 7's normal path after the visitor confirms, so every spam check runs as usual.<\/p><\/dd>\n
        My mask needs spaces or brackets<\/h3><\/dt>\n
        Tag options cannot contain them. Use [tel* phone mask placeholder \"(000) 000-0000\"]<\/code> (bare mask<\/code> takes the placeholder as pattern) or define a named mask in Contact > Confirm & Masks<\/em> and use mask:thatname<\/code>.<\/p><\/dd>\n
        Does mask:money accept decimals?<\/h3><\/dt>\n
        Visitors type digits and the amount fills from the right, like a cash register: typing 1 2 5 0 gives 12.50. The separators and the number of decimals are set under Contact > Confirm & Masks<\/em> and apply to every form on the site: mask:money<\/code> cannot use different separators or decimals per form.<\/p><\/dd>\n
        Can I validate masks on the server only?<\/h3><\/dt>\n
        Server validation is on by default and can be switched off in the settings. Client-side formatting cannot be disabled per field; just leave mask:<\/code> out of fields that do not need it.<\/p><\/dd>\n
        Does the multi-step form save progress between pages?<\/h3><\/dt>\n
        No. All steps live on one page and are sent together. This keeps things simple and avoids storing visitor data. If you need separate pages per step, look for a dedicated multi-page plugin.<\/p><\/dd>\n
        I am migrating from \"Contact Form 7 add confirm\" or \"Phone mask field\"<\/h3><\/dt>\n
        Deactivate the old plugin and activate this one. [confirm]<\/code>, [back]<\/code> and [mask* name \"(___) ___-____\"]<\/code> tags keep working. Old CSS written for the wpcf7c-<\/code> classes will no longer apply; the new confirmation screen uses hvcm-<\/code> classes.<\/p><\/dd>\n\n<\/dl>\n\n\n
        1.0.0<\/h4>\n\n
          \n
        • Initial release: confirmation screen (inline or pop-up), input masks with presets and custom patterns, multi-step forms, compatibility tags for the old \"add confirm\" and \"phone mask field\" plugins.<\/li>\n<\/ul>","raw_excerpt":"Confirmation screen before sending, input masks (phone, ID, date, money, custom) and simple multi-step forms for Contact Form 7. No jQuery.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/395647","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=395647"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/herovibes"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=395647"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=395647"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=395647"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=395647"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=395647"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=395647"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}