最終更新日  2021年10月25日

【Contact Form 7 add confirm代替】確認画面プラグインの決定版!(2021年版)

Confirm Plus Contact Form 7 バナーネットショップ運営

Contact Form 7 確認画面プラグインを無料公開!

WordPressで制作したブログやWebサイトにメールフォームを設置するには、プラグインを導入するのが一番簡単な方法です。
Contact Form 7というプラグインがおススメですが、標準では確認画面がついていません。

牧野 あかり
牧野 あかり

以前は確認画面を表示できるContact Form 7 add confirm(*1)という素晴らしいプラグインがあったんですが…。
このところ更新されてなくて、最新のContact Form 7では動かないんですよね。

そこで今回、WooCommerceプラグインネットではContact Form 7に確認画面を追加できるプラグインConfirm Plus Contact Form 7を作成しました。
WordPress公式サイトから無料でダウンロードできます。
(*1) Contact Form 7 add confirmを最新CF7に対応させたものではなく、あくまでも別のプラグインですのでご注意ください。

本記事ではConfirm Plus Contact Form 7の使い方を紹介しています。

Confirm Plus Contact Form 7 はContact Form 7本体との併用が前提です。

Contact Form 7とConfirm Plus Contact Form 7は、いずれもWP公式サイトからZIPファイルをダウンロード、またはWordPress管理画面「プラグイン」メニューから検索してインストールできます。

Contact Form 7 確認画面プラグインの使い方

Confirm Plus Contact Form 7 のインストール

Confirm Plus Contact Form 7をWordPress管理画面からインストールします(画像参照)。

プラグイン>新規追加>キーワードに「Confirm Plus Contact Form 7」

インストール後は【有効化】をクリックします。

以上でインストールは完了です!

お問い合わせ画面で確認

基本的にプラグインを有効化するだけで、確認機能が追加されています。
(※適切にHTMLマークアップされている場合)

コンタクトフォームを確認してみましょう。

確認画面付きメールフォームのイメージ

確認ボタンをクリックします。

確認画面のイメージ

  1. 修正ボタンを押すと、入力フォームに戻って編集できます。
  2. 送信ボタンを押すと、メッセージが送信されます。

確認画面が追加できました!
これでお問い合わせメールの誤送信を減らすことができますね。

プラグインをダウンロード

うまく動かない!という場合

ちょっと変わったHTMLタグを使っている場合など、インストールしただけでは動作しないこともあります。
そんな場合はContact Form 7のメールフォーム編集画面(管理画面の「お問い合わせ > コンタクトフォーム」メニュー)から、次のどれかを試してみてください!

(1) 項目名もinputタグ(*2)も、同じlabelタグで囲む

<label>
    項目名
   <input name="namae" type="text">
</label>

Contact Form 7公式サイトでも紹介されているフォーム形式です。
この形にすればもちろんきちんと動きます。

(*2) inputタグのほか、select、textareaタグも対象となります。

(2) label要素のfor属性で対象inputタグを指定する

<label for="namae">項目名</label>
<input name="namae" type="text">

こちらのフォーム形式であれば、labelタグの外にinputタグを配置してもだいじょうぶです。
上の例ではlabelとinputが隣り合っていますが、離して配置してもちゃんと動きますよ!

(3) tableの同じ行に項目名とinputタグを配置し、クラスを付ける

labelタグは使わず、代わりにtitle-contactform7クラスを付与したspanタグを使うフォーム形式です。
この場合、table内の同じ段(trタグ)内にinputとtitle-contactform7クラス要素を配置する必要があります。

この形式のメールフォームは
【コピペOK】ContactForm7を企業サイトみたいな感じでカスタマイズする方法
でも紹介されています。
こちらの記事はデザインなどとても参考になります!

<table>
    <tr>
        <th><span class="title-contactform7">項目名</span></th>
        <td><input name="namae" type="text"></td>
    </tr>
</table>

(4) 項目名をspan class=”title-contactform7 for-your_input_name”タグで囲む

labelタグ、tableタグをご利用でない場合や、HTML構造が特に複雑な場合も対応できます。
title-contactform7クラスを付与したspanタグに、さらにfor-your_input_nameクラスも追加すればOKです。

牧野 あかり
牧野 あかり

your_input_nameは対象となるinputタグのname値に合わせて変更してください。
下の例だと「namae」ですね!

<div>
    <p>
        <span class="title-contactform7 for-namae">項目名</span>
    </p>
</div>
<p>
    <input name="namae" type="text">
</p>

やっぱり動かないみたい…?

4つのどれかを試してもうまく動かない、もしかして不具合?という場合はWordPress公式サイトのSupportページに書き込んでみてください(要ログイン)。
弊社スタッフ、または他のユーザーの方が回答します。

例外的な挙動と追加設定

ラジオボタンとチェックボックスについて

radioボタンやcheckboxタイプのinputタグの場合は、以下のようなlegendタグが自動的に優先表示されます。

<fieldset>
    <legend>項目名</legend>
    <input name="namae[ペン]" type="checkbox">ペン<br>
    <input name="namae[パイナップル]" type="checkbox">パイナップル<br>
    <input name="namae[りんご]" type="checkbox">りんご
</fieldset>

フォーム内でfieldset、legendタグが適切にマークアップされている必要があります。

確認画面に表示したくない項目

メールフォームの中に「これ、確認画面には出したくないんだけど…」というinputタグがある場合、avoid-confirmクラスを追加することで表示を回避できます!

<label>
    表示したくない項目
   <input name="namae" type="text" class="avoid-confirm">
</label>

 

プラグインをダウンロード

カスタマイズするには

プラグインが出力する確認画面のHTMLソースにはほとんどCSSが適用されていません。
シンプルなtableとなっていますので、導入直後にはWordPressテーマのCSSが自然に適用され、違和感の少ない外観になります。

牧野 あかり
牧野 あかり

凝ったデザインにしたい場合は、テーマのstyle.cssを編集してみてください!

「#wpcf7cpcnf」を付ければ他の部分に影響させずにデザインできますよ♪

 簡単なデザイン例

 WordPress管理画面の「外観 > テーマエディター」メニューから、style.cssというファイルを編集することでデザインをカスタマイズできます。

CSS

ご使用中のWordPressテーマのstyle.cssに、たとえば以下のように書きます。

/* テーブル */
#wpcf7cpcnf table {
    border: none;
}
#wpcf7cpcnf table th {
    background-color: #00008B;
    border: 1px solid #ccc;
    color: #fff;
    text-align: center;
}
#wpcf7cpcnf table td {
    border: 1px solid #ccc;
}

/* ボタン */
#wpcf7cpcnf button {
    background-color: #555;
    border: 4px outset #000;
    color: #fff;
}

 結果

他のCSSの記述にも影響されますが、こんな感じになります。

だいぶ変わりましたね!

プラグインをダウンロード

既知の問題と動作環境

reCAPTCHAはContact Form 7 純正を使おう!

サイトの安全性を高めるreCAPTCHAという仕組みがあります。
Invisible reCaptchaという優れたプラグインもあるので、それを使ってサイト全体を保護されている方もいらっしゃるかもしれません。

しかしInvisible reCaptchaの設定でContact Form 7を保護すると動作に問題が生じます
これは確認画面プラグインではなく、Contact Form 7プラグイン本体の仕様によるものです。

Contact Form 7は純正のインテグレーション機能でreCAPTCHAに対応していますので、そちらをご利用ください。
WordPress管理画面から「設定 > お問い合わせ > インテグレーション」を開き、reCAPTCHAが有効になっていることを確認しましょう。

Contact Form 7 インテグレーション

詳しい設定方法はContact Form 7公式サイトで解説されています。

Invisible reCaptchaプラグインを併用する場合は、Contact Form 7をInvisible reCaptchaプラグインの保護対象から外すようにしましょう。
WordPress管理画面の「設定 > Invisible reCaptcha」メニュー内、問い合わせタブで「Contact Form 7の保護を有効化」のチェックが外れていればOKです!

Invisible reCaptchaでCF7を保護しない

Contact Form 7公式のFAQも参考にされてください。
reCAPTCHA のスクリプトファイルが全ページにロードされます。これを止めることはできますか?

 Internet Explorerは対象外

Contact Form 7プラグイン本体がInternet Explorerのサポート終了を宣言しているため、Confirm Plus Contact Form 7でもIE系のブラウザはサポートしておりません

正確にいうと、Contact Form 7はIE系のブラウザでも動作します。しかし、Contact Form 7本来のスムースな動作方式(AJAX。JS=JavaScriptを使ってページ遷移することなくデータ通信を行う方式)ではなくなってしまいます。

Confirm Plus Contact Form 7はAJAX eventを利用して動作するように設計されているため、IE系の環境では確認画面を表示することができません(メールは正常に送信されます)。

タイトルとURLをコピーしました