サイトに『問い合わせ欄』を設置する方法。スパム対策のやり方。

 

サイトを運営するなら必ず設置したい『問い合わせ欄』。

読者からのメッセージをはじめ、企業やASPから提携・依頼のお話がきたりします。

この記事では問い合わせ欄の設置方法と、スパムによる迷惑メッセージ対策をお伝えします(*^^*)

記載してある3つのことを行っても、10分あればできますよ！

問い合わせ欄のつくりかた

プラグインで、あっという間に設置可能！

流れはざっと以下のとおりです。

ここまで設定できれば、問い合わせ欄の設置は完了！

次の項目は時間によゆうがある時におこなっても大丈夫です(*^^*)

送信ボタンを目立たせるカスタマイズ

通常のままだと、問い合わせ欄は画像のように『送信ボタン』が小さめ。

 

この送信ボタンをほかの項目と同じ幅にします。

 

カスタマイズは「子テーマ」で行ってくださいね。

 

子テーマを有効化したら、ダッシュボード＞外観＞テーマの編集の順にひらいて下記のコードを『style.css』に貼りつけます。

/*--------------------------------------
  contact7送信ボタン
--------------------------------------*/
.wpcf7-submit {
width:100%;
padding:15px;
border-radius:10px;
-webkit-border-radius: 10px;  
-moz-border-radius: 10px;
border: none;
box-shadow: 0 3px 0 #ddd;
background: #eee;
transition: 0.3s;
}
.wpcf7-submit:hover {
background: #ddd;
transform: translate3d(0px, 3px, 1px);
-webkit-transform: translate3d(0px, 3px, 1px);
-moz-transform: translate3d(0px, 3px, 1px);
}
/*　ここまで　*/

 

『ファイルを更新』して完了です。

キャッシュの削除と再読み込み

ファイルの更新をしてもカスタマイズが反映されない場合は、キャッシュの削除をおこないましょう。

キャッシュ系プラグインを有効化している方は、そちらも確認してくださいね。

問い合わせの誤送信・スパム対策

問い合わせ欄の【送信ボタン】の前に、同意チェック欄をいれるカスタマイズです。

といっても、cssはさわりません。

1分もかからずできますよ(*^^*)

 

ダッシュボード＞お問い合わせ＞コンタクトフォーム＞編集＞フォームの順にひらいて、下記のコードを貼りつけます。

<center>[acceptance acceptance-0]&nbsp;内容を確認して送信する</center>

 

[submit “送信”] の1行前に貼りつけると、当サイトと同じ表示になります。

貼りつけたら【保存】をクリック。

確認すると送信ボタンの前にチェック欄が表示されているはずです(*^^*)

このチェック欄があることによって

• ロボットによるスパム
• 問い合わせする際の誤送信

この2つを防げるようになります。

まとめ

この記事では、サイトを運営するにあたって重要な『問い合わせ欄』についてまとめました。

10分程度でできるので、サイトを開設したら早めにやってみてくださいね(*^^*)