Title: Kakunin Modal for Contact Form 7 Author: torigoedesign Published: August 6, 2026 Last modified: August 6, 2026 --- Search plugins ![](https://ps.w.org/kakunin-modal-for-contact-form-7/assets/icon.svg?rev=3636258) # Kakunin Modal for Contact Form 7 By [torigoedesign](https://profiles.wordpress.org/torigoedesign/) [Download](https://downloads.wordpress.org/plugin/kakunin-modal-for-contact-form-7.0.9.0.zip) * [Details](https://wordpress.org/plugins/kakunin-modal-for-contact-form-7/#description) * [Reviews](https://wordpress.org/plugins/kakunin-modal-for-contact-form-7/#reviews) * [Installation](https://wordpress.org/plugins/kakunin-modal-for-contact-form-7/#installation) * [Development](https://wordpress.org/plugins/kakunin-modal-for-contact-form-7/#developers) [Support](https://wordpress.org/support/plugin/kakunin-modal-for-contact-form-7/) ## Description “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 decorative HTML such as a “required” badge. * 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 * PHP 7.4 or later * Contact Form 7 #### Notes The admin screen and the default modal texts are written in Japanese, because the confirmation step is a common convention on Japanese websites. All texts shown in the modal can be replaced from the settings screen. This plugin is not affiliated with or endorsed by the authors of Contact Form 7. #### Privacy The plugin stores its settings in the WordPress options table only. It collects no personal data, sets no cookies and makes no requests to external servers. ## Screenshots [⌊The confirmation modal shown before the form is submitted.⌉⌊The confirmation modal shown before the form is submitted.⌉[ The confirmation modal shown before the form is submitted. [⌊The per-form settings screen with the accordion open.⌉⌊The per-form settings screen with the accordion open.⌉[ The per-form settings screen with the accordion open. ## Installation 1. Install and activate Contact Form 7 first. This plugin cannot be activated without it. 2. Upload the plugin through Plugins > Add New > Upload Plugin, or install it from the WordPress plugin directory. 3. Activate the plugin. 4. Go to Settings > Kakunin Modal for Contact Form 7 and open the section of the form you want to use. 5. Check “Show the confirmation modal for this form” and save. The modal is disabled by default for every form. ## FAQ ### Do I have to rewrite my existing Contact Form 7 forms? No. Forms written in the standard way work as they are. Only when a label is not picked up as expected do you need to add a `data-label` attribute to an ancestor element of the field. ### Can I put several Contact Form 7 forms on one page? Yes. Every form on the page gets its own modal instance, and the modal can be enabled or disabled per form. ### Is the Conditional Fields plugin supported? Yes. Fields inside a group that has the `.wpcf7cf-hidden` class are ignored by the validation, by the submit button state and by the modal. The groups are watched with a MutationObserver, so switching a condition is reflected immediately. ### The required mark “*” appears in the label inside the modal. How do I remove it? Add a `data-label-required` attribute to the element that wraps the mark. It is then removed when the label is read. For backward compatibility, a `span` with ` class="required"` is also removed. To control the wording completely, set `data- label` on an ancestor element. ### Does the plugin need jQuery? No. The front-end code is plain JavaScript. jQuery is only used on the plugin settings screen in the admin area, where WordPress loads it anyway. ### How do I change the design of the modal? The markup uses BEM class names such as `.cf7-confirm-modal__header`, and the colors are set through CSS custom properties such as `--cf7-confirm-modal-primary-color`. Override them in your theme or child theme. The primary color of the submit button can also be picked on the settings screen. ### Where are the settings stored? In four options in the `wp_options` table: `cf7_confirm_redirect_urls`, `cf7_confirm_show_empty_fields`,` cf7_confirm_empty_text` and `cf7_confirm_form_settings`. They are removed when the plugin is deleted. ## Reviews There are no reviews for this plugin. ## Contributors & Developers “Kakunin Modal for Contact Form 7” is open source software. The following people have contributed to this plugin. Contributors * [ torigoedesign ](https://profiles.wordpress.org/torigoedesign/) “Kakunin Modal for Contact Form 7” has been translated into 1 locale. Thank you to [the translators](https://translate.wordpress.org/projects/wp-plugins/kakunin-modal-for-contact-form-7/contributors) for their contributions. [Translate “Kakunin Modal for Contact Form 7” into your language.](https://translate.wordpress.org/projects/wp-plugins/kakunin-modal-for-contact-form-7) ### Interested in development? [Browse the code](https://plugins.trac.wordpress.org/browser/kakunin-modal-for-contact-form-7/), check out the [SVN repository](https://plugins.svn.wordpress.org/kakunin-modal-for-contact-form-7/), or subscribe to the [development log](https://plugins.trac.wordpress.org/log/kakunin-modal-for-contact-form-7/) by [RSS](https://plugins.trac.wordpress.org/log/kakunin-modal-for-contact-form-7/?limit=100&mode=stop_on_copy&format=rss). ## Changelog #### 0.9.0 * Renamed the plugin to “Kakunin Modal for Contact Form 7” and changed the slug to “kakunin-modal-for-contact-form-7”. Settings are kept, because the option names are unchanged. * Removed the bundled Japanese translation files. Translations are handled through translate.wordpress.org instead. * Removed the load_plugin_textdomain() call, which is not needed for plugins hosted on WordPress.org. * Hardened the sanitization of the per-form redirect setting. Protocol-relative paths such as “//example.com” are rejected, and absolute URLs are limited to http and https. #### 0.8.0 * Renamed the plugin to “Confirm Modal for Contact Form 7” for the WordPress plugin directory. Settings are kept, because the option names are unchanged. * Added the “Requires Plugins: contact-form-7” header, so WordPress 6.5 and later handles the dependency on Contact Form 7. * Added uninstall.php, which removes the plugin options when the plugin is deleted. * Moved the admin styles, the admin script and the front-end settings data out of inline tags into enqueued files. * Fixed a possible fatal error on the front end when Contact Form 7 was missing. * Escaped the settings link on the plugins screen and unified the text domain. * The error message of the field match validation no longer overrides the styling of standard Contact Form 7 error tips. #### 0.7.0 * Added a per-form option to stack the confirmation table vertically on small screens( on by default). * Added a per-form breakpoint (px) for the stacked layout. * Grouped the settings screen into four sections. #### 0.6.0 * Added field match validation with the `data-cf7-match` attribute. #### 0.5.1 * Changed the default of “Show the confirmation modal” to off. #### 0.5.0 * Added a per-form option to enable or disable the confirmation modal. * Added support for several Contact Form 7 forms on the same page. * Added the `data-label-suffix` attribute for decorated modal labels. * Reworked the label lookup and made the escaping of label text consistent. #### 0.4.1 * Fixed the behaviour with the Contact Form 7 Conditional Fields plugin. #### 0.4.0 * Added label control with the `data-label` attribute. #### 0.3.0 * Added validation of required fields. * The submit button is disabled until the required fields are filled in. #### 0.2.2 * Changed the default primary color from #00a968 to #0d6efd. #### 0.2.1 * Reordered the fields on the settings screen. #### 0.2.0 * Added per-form settings. * Added the `data-label-required` attribute for excluding required marks. * Line breaks in textarea values are kept in the modal. * Improved the settings screen. #### 0.1.0 * First release. ## Meta * Version **0.9.0** * Last updated **1 day ago** * Active installations **Fewer than 10** * WordPress version ** 5.0 or higher ** * Tested up to **7.0.3** * PHP version ** 7.4 or higher ** * Languages * [English (US)](https://wordpress.org/plugins/kakunin-modal-for-contact-form-7/) and [Japanese](https://ja.wordpress.org/plugins/kakunin-modal-for-contact-form-7/). * [Translate into your language](https://translate.wordpress.org/projects/wp-plugins/kakunin-modal-for-contact-form-7) * Tags * [confirmation](https://wordpress.org/plugins/tags/confirmation/)[contact form 7](https://wordpress.org/plugins/tags/contact-form-7/) [form](https://wordpress.org/plugins/tags/form/)[modal](https://wordpress.org/plugins/tags/modal/) [preview](https://wordpress.org/plugins/tags/preview/) * [Advanced View](https://wordpress.org/plugins/kakunin-modal-for-contact-form-7/advanced/) ## Ratings No reviews have been submitted yet. [Your review](https://wordpress.org/support/plugin/kakunin-modal-for-contact-form-7/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/kakunin-modal-for-contact-form-7/reviews/) ## Contributors * [ torigoedesign ](https://profiles.wordpress.org/torigoedesign/) ## Support Got something to say? Need help? [View support forum](https://wordpress.org/support/plugin/kakunin-modal-for-contact-form-7/)