=== Kakunin Modal for Contact Form 7 ===
Contributors: torigoedesign
Tags: contact form 7, confirmation, modal, form, preview
Requires at least: 5.0
Tested up to: 7.1
Requires PHP: 7.4
Stable tag: 0.9.3
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html

Shows a confirmation modal with the entered values before a Contact Form 7 form is submitted, so visitors can review their input first.

== 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 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
* 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.

== 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.

== Frequently Asked Questions ==

= 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.

== Screenshots ==

1. The confirmation modal shown before the form is submitted.
2. The per-form settings screen with the accordion open.
3. The stacked modal layout on a narrow screen.

== Changelog ==

= 0.9.3 =
* The value of `data-label-suffix` is now sanitized before it is inserted into the modal. Only the inline tags `span`, `strong`, `em`, `b`, `i`, `small`, `sup`, `sub`, `u`, `s`, `mark`, `abbr`, `code`, `kbd`, `br` and `wbr` and the `class`, `title`, `dir`, `lang` and `aria-*` attributes are kept. Everything else, including scripts, event handler attributes, `style`, images and links, is removed, so a suffix that used other tags or attributes will lose them.
* This fixes a stored cross-site scripting (XSS) issue that users who can edit a form but do not have the `unfiltered_html` capability could exploit.

= 0.9.2 =
* Radio buttons, quiz and CAPTCHA (`[captchar]`) fields are now treated as required, matching Contact Form 7. The submit button stays disabled until an option is selected or the field is filled in.
* Acceptance checkboxes with the `invert` option now work. The form can be submitted while the box is unchecked. Acceptance checkboxes inside a hidden group of the Conditional Fields plugin are ignored.
* Multiple-select fields now show every selected option in the modal, separated by commas. A required multiple select with `include_blank` now accepts the blank option selected together with another option. A select with no option chosen is shown as empty when empty fields are set to be displayed.
* File fields now show only the file name in the modal, without the `C:\fakepath\` prefix added by the browser.
* The free text of checkbox and radio options with `free_text` is now shown next to the option label, in the same form as the email Contact Form 7 sends. Quiz and CAPTCHA answers are no longer shown in the modal.
* When a field label falls back to the name attribute, the trailing `[]` is removed.

= 0.9.1 =
* Fixed the submit button staying disabled on forms with a required checkbox field (`[checkbox*]`). Contact Form 7 puts the required class on the wrapper of the options, so the wrapper is now checked for a selected option.
* Checkbox values in the modal now show the label of each selected option instead of the fixed text "チェック済み" (checked). Radio button values use the same label lookup.

= 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.

== Upgrade Notice ==

= 0.9.3 =
Security release. The value of `data-label-suffix` is now sanitized before it is shown in the modal, fixing a stored XSS exploitable by users who can edit a form. Only a fixed set of inline tags and the class, title, dir, lang and aria-* attributes are kept.

= 0.9.0 =
Renamed from "Confirm Modal for Contact Form 7". Option names are unchanged, so your settings carry over. If you installed the ZIP version, install this one, then deactivate and delete the old one.

= 0.8.0 =
The plugin was renamed from "Contact Form 7 Confirm Modal". If you installed the old ZIP version, install this version, then deactivate and delete the old one. The option names are unchanged, so your settings are picked up automatically. Do not keep both versions active at the same time.
