Kakunin Modal for Contact Form 7

“Kakunin” (確認) is the Japanese word for “confirmation”.

This plugin adds a confirmation step to forms built with Contact Form 7. When the visitor presses the submit button, the entered values are listed in a modal window. The form is only sent after the visitor confirms them, which helps to avoid typos in e-mail addresses and accidental submissions.

The plugin does not process the submission itself. Sending is delegated to Contact Form 7 ( wpcf7.submit() ), and the plugin registers no admin-ajax or REST endpoints of its own.

Features

• Confirmation modal that lists the entered values in a table. Long values are scrolled instead of truncated.
• Per-form settings. Enable or disable the modal for each form, and set the modal title, button labels and primary color separately.
• Label control with data-label . Add a data-label attribute to an ancestor element to decide the label shown in the modal, and data-label-suffix to append a decorative inline-HTML suffix such as a “required” badge (limited to a fixed set of inline tags).
• Real-time validation. The submit button stays disabled until all required fields are filled in. Changes are tracked with a MutationObserver, and acceptance fields are supported.
• Field match validation with data-cf7-match , useful for “confirm your e-mail address” fields.
• Works with the Contact Form 7 Conditional Fields plugin. Fields inside a group marked with .wpcf7cf-hidden are excluded from validation, from the submit button state and from the modal.
• Optional stacked layout on small screens, with a breakpoint that can be set per form.
• Optional redirect after a successful submission, per form. Both relative paths and absolute URLs are accepted. Errors are never redirected, so Contact Form 7 error messages are still shown.
• No external services. The plugin sends no data anywhere, loads nothing from third-party servers and does not use jQuery on the front end.

Requirements

• WordPress 5.0 or later