こんにちは。新潟ホームページ制作【マザーシップ】です。

ワードプレスにメールフォームを実装できるプラグインといえば、「Contact Form 7」が有名だと思いますが、

こちらに確認画面をものすごく簡単に追加できるプラグインが公開されていたので感謝を兼ねてご紹介させていただきます。  

 

メールフォームに確認画面を実装できる「Contact Form 7 add confirm」

20140620

プラグインのページ -> https://wordpress.org/plugins/contact-form-7-add-confirm/
プラグイン作者様のページ
-> Contact Form 7に確認画面をものすごく簡単に付けられるプラグイン by アイティーエー株式会社様

これまでの確認画面の実装は
(1)株式会社オルタ様のライブラリをダウンロード→(2)カスタマイズ→(3)アップロード→(4)読み込み設定→(5)CSS調整
という流れで行っていましたが、

こちらのプラグインがあれば、
(1)プラグインを有効化→(2)Contact form 7の設定画面にタグ追加→(2)CSS調整

で完了できます。
Contact Form 7のタグ追加も簡単です。正直、感動しました!

エラーメッセージをどうこうするなど細かいカスタマイズになると難しい場合があるのかもしれませんが、
一般的なメールフォームであれば、問題なく使えると思います。

詳しくは作者さまのホームページを御覧いただければと思います。
Contact Form 7に確認画面をものすごく簡単に付けられるプラグイン by アイティーエー株式会社さま

 

CSSの設定

よかったら参考にしてください。

CSSの場合


.wpcf7 .wpcf7c-elm-step1, .wpcf7 .wpcf7c-elm-step2 { /* ボタン */ padding: 3px 10px 3px 20px; letter-spacing: 10px; cursor: pointer; }
.wpcf7 .wpcf7-confirm, .wpcf7 .wpcf7-submit { /* ボタン確認、ボタン送信 */ background-color: navy; color: #fff; }
.wpcf7 .wpcf7-back { /* ボタン修正 */ background-color: silver; border-color: silver; color: #fff; margin-right: 3px; }
.wpcf7 .wpcf7-not-valid-tip, .wpcf7 .wpcf7-validation-errors { /* エラー */ color: red !important; font-weight: bold; }
.wpcf7 .wpcf7-mail-sent-ok { /* 送信完了 */ font-weight: bold; }
.wpcf7 .wpcf7c-conf { /* 確認画面の背景色 */ border: solid 1px #eee; background-color: #fff; }

 

SCSSの場合


/* ボタンの基本色*/
$default: navy;
/* ボタンの薄め色*/
$light: silver;
/* エラー色 */
$arart: red;

.wpcf7{
.wpcf7c-elm-step1, .wpcf7c-elm-step2{/* ボタン */
padding: 3px 10px 3px 20px;
letter-spacing: 10px;
cursor: pointer;
}

.wpcf7-confirm, .wpcf7-submit{/* ボタン確認、ボタン送信 */
background-color: $default;
color:#fff;
}

.wpcf7-back{/* ボタン修正 */
background-color: $light;
border-color: $light;
color: #fff;
margin-right: 3px;
}

.wpcf7-not-valid-tip, .wpcf7-validation-errors{/* エラー */
color:$arart !important;
font-weight: bold;
}

.wpcf7-mail-sent-ok{/* 送信完了 */
font-weight: bold;
}

.wpcf7c-conf{/* 確認画面の背景色 */
border:solid 1px #eee;
background-color: #fff;
}
}

この記事をシェア