Contact From 7を使った問い合わせフォームの作成 – browser-land

Contact From 7を使った問い合わせフォームの作成

 フォーム

コンタクトフォームの編集画面「フォーム」に記述するhtmlとなります。
「メール」「メッセージ」「その他の設定」については変更を行いません。
スパム対策としてプラグインのAkismet によるフィルタリングを行っています。

・フォーム

[text* your-name akismet:author class:cssFormTxt placeholder ‘Name *’]
[email* your-email akismet:author_email class:cssFormTxt placeholder ‘Email *’]
[textarea* your-message class:cssFormTxtA placeholder ‘Write your message…’]
[submit “Send Email”][response]</td>

 メッセージカスタマイズ

Ajax のフォーム送信が完了した場合に、以下のDOM イベントが発生します。

* wpcf7mailsent : メールの送信が行われた場合に発生する。
* wpcf7invalid : 正しくない入力があった場合に発生する。
* wpcf7spam : スパム行為の疑いがあった場合に発生する。
* wpcf7mailfailed : メールの送信には失敗した場合に発生する。
* wpcf7submit : フォーム送信が完了した場合に発生する。

イベントに対応するメッセージを出力する事でメッセージをカスタマイズします。

・functions.php

<?php
function fContactForm7_wp_footer() {
?>
<script type=”text/javascript”>
 document.addEventListener(‘wpcf7mailsent‘,function(event) {}, false );
 document.addEventListener(‘wpcf7invalid‘,function(event) {}, false );
 document.addEventListener(‘wpcf7spam‘,function(event) {}, false );
 document.addEventListener(‘wpcf7mailfailed‘,function(event) {}, false );
</script>
<?php
}
add_action( ‘wp_footer’, ‘fContactForm7_wp_footer’ );
?>

 CSSのカスタマイズ

Ajax のフォーム送信完了時のデフォルトメッセージを非表示にします。

・○○.css

.wpcf7-mail-sent-ok ,
.wpcf7-mail-sent-ng ,
.wpcf7-spam-blocked ,
.wpcf7-validation-errors {
 display: none !important;
}
Browser-Land

: DATA

: BLOG

All
CSS
HTML5
JavaScript
WordPress

: MAIL


 

 

 

: PRAVACY POLICY

タイトルへ

サウンド設定

スクリーン設定

プレイ
データ
設定
停止
次へ
戻る
戻る
戻る
削除
再配置
戻る
戻る
メール
ブログ
Twitter
ポリシー
ユニット
武器
サークル
ボックス
コード
キング
ソルジャー
アーチャー
ウィザード
スペーサー
ギア
ホイール
クランク
フレームA
フレームB
レール
ウォール
ワイヤー
ゴム紐
カップ
大砲
弾倉
ウッド材
アイアン材
透過材
+5 deg.
-5 deg.
+45 deg.
-45 deg.
右回転
左回転
動力無し
Turn Right
Turn Left
Neutral
ロード
セーブ
バトル
ロード