Contact Form 7 add confirm

【WP】Contact Form 7 add confirm – Contact Form7に確認画面を追加するプラグインを福岡一わかりやすく説明します

WPにおいて、お問い合わせフォームとして最も使われているプラグイン「Contact Form7」に確認ステップを追加するプラグイン「Contact Form 7 add confirm」が便利過ぎたのでご紹介します。

特徴

  1. Contact Form7に確認ステップを追加します(同一ページ内で表示されます)
  2. インストールするだけで動作し、フォーム内に簡易なタグを挿入するだけなので複雑な設定がいりません
  3. 確認ステップ時のみ表示させたい文言等も挿入できます

インストール方法

  1. WordPress管理画面 ＞ プラグイン ＞ 新規追加 ＞「Contact Form 7 add confirm」で検索
  2. 公式サイトWordPress.org からダウンロード

管理画面の設定

インストールが完了するだけでContact Form7の編集画面に「確認ボタン」「戻って編集ボタン」が追加されています。
Contact Form 7 add confirm
各ボタンを押すと、「確認ボタン」= [confirm “確認画面へ”]、「戻って編集ボタン」= [back “編集し直す”] がエディタ内に挿入されます。このプラグインを導入すると[submit “送信”]は最初は非表示に勝手になり、確認ステップの際に表示されます。confirmの”確認画面へ”の文字を変更するとボタン内の文字が変更されます。
Contact Form 7 add confirm
表示されている画面で確認ボタンを押すと画像のように同一ページ内で動作ステップに移り入力したデータを編集できない状態になります。

Contact Form 7 add confirm

送信すると、上記のように同一画面上の送信ボタンの下に送信完了の文言が表示されます。

各ステップでのみ表示するクラス

このプラグインには入力ステップ・確認ステップ・送信ステップにおいて、それぞれのステップでのみ表示するCSSクラスが用意されています。
確認ステップの時の注意喚起などに使用できます。

<p class="wpcf7c-elm-step1">
【入力】各設問にお答えください。 
</p>
<p class="wpcf7c-elm-step2">
【確認】下記内容でお間違えないでしょうか？ 
</p>
<p class="wpcf7c-elm-step3">
【終了】お問い合わせありがとうございます。 
</p>

ボタンのスタイル

各ボタンはcssデザインがされていないので独自にデザインしなければなりません。
上記のクラスにお好みのデザインを設定し任意のCSSファイルに記述してください。

/*送信ボタン*/
.wpcf7-submit{
	border: 1px solid #26359F;
	background-color: #3756D2;
	color: #FFF;
	cursor: pointer;
	padding: 10px;
	margin-left: 20px;
	width: 200px;
}
.wpcf7-submit:hover{
	background-color: #26359F;
}
/*確認ボタン*/
.wpcf7-confirm{
	border: 1px solid #237836;
	background-color: #35953F;
	color: #FFF;
	cursor: pointer;
	padding: 10px;
	width: 200px;
}
.wpcf7-confirm:hover{
	background-color: #237836;
}
/*編集し直すボタン*/
.wpcf7-back{
	border: 1px solid #A42832;
	background-color: #BE383C;
	color: #FFF;
	cursor: pointer;
	padding: 10px;
	width: 200px;
}
.wpcf7-back:hover{
	background-color: #A42832;
}

送信終了を別画面

先ほど画像で表示しましたが、送信終了すると同一画面内にメッセージが表示されるだけです。
下記記述を
コンタクトフォームの編集 > その他の設定
に記述して保存すると送信終了するとURL先に遷移しますので送信終了の固定ページを制作して指定するといいと思います。

on_sent_ok: "location = 'URLを記述';"

まとめ

簡単に導入できる「Contact Form7」に簡単に導入できるので、最初から合わせてインストールしておいてよいかもしれません。ボタンのCSSや送信終了を別画面など制作時に躓きやすいことがほかにもありましたらコメント等でお知えてください。

Related articles