【cocoon】に「Contact Form 7」を設定しよう【シンプルデザイン CSS コピペでOK】

スポンサーリンク

スポンサーリンク

必ず必要になるであろう、お問い合わせページを作成します。

利用するプラグインは「Contact Form 7」です。

このブログでも設定している『お問い合わせ』ページです。

シンプルな内容ですが、こちらと同じデザインでよければ、ページ下部にCSSを記述してますので、コピペで利用していただいても結構です。

まずは「Contact Form 7」インストールして下さい。

プラグインの新規追加から「Contact Form 7」を検索してインストールして下さい。

インストールが完了したら有効化します。
すると、ダッシュボードに[お問い合わせ]の項目が追加されています。

[お問い合わせ]を選択すると、すでに「コンタクトフォーム 1」があります。

「フォーム」タグに以下をコピペして下さい。

<table class=”inquiry”>
<tr>
<th>
<span class=”haveto”>必須</span><span>ご選択ください</span>
</th>
<td>
[checkbox checkbox-1 exclusive use_label_element default:1 class:check1 “お問い合わせ ” “ご意見・ご感想 ” “その他”]
</td>
</tr>
<tr>
<th>
<span class=”haveto”>必須</span><span>お名前</span>
</th>
<td>
[text* your-name class:textsp placeholder”ハンドルネームでも大丈夫です。”]
</td>
</tr>
<tr>
<th>
<span class=”haveto”>必須</span><span>メールアドレス</span>
</th>
<td>[email* your-email class:mailsp placeholder”例:xxxxx@xxx.com”]</td>
</tr>
<tr>
<th>
<span class=”any”>任意</span><span>電話番号</span>
</th>
<td>
[tel your-tel maxlength:13 class:tel placeholder”例:080-1234-5678″]
</td>
</tr>
<tr>
<th>
<span class=”haveto”>必須</span><span>メッセージ</span>
</th>
<td>
[textarea* your-message class:content placeholder “ご記入ください。”]
</td>
</tr>
</table>
[acceptance acceptance-442 class:spam1]← スパムメール防止のため、こちらにチェックを入れてから送信してください。
[submit id:formbtn “上記の内容で送信する”]

その他は変更せずデフォルトのままで利用できます。

あとは、以下の赤色で囲ったショートコードだけ使用します。

お問い合わせ用ページを作成します。

固定ページで新規追加をします。

ページタイトルは「お問い合わせ」でOKかと思います。

そして新規ページの本文に先ほどの赤色で囲ったショートコードをコピペします。

以上で、設置完了です。

プレビューしてみてください。
とてもシンプルなお問い合わせページが完成してますか?

デザインをカスタマイズします。

このままでも全く問題ないですが、必須項目を付けたり、記述例など表示したいと思います。

お問い合わせページの編集画面を下へスクロールすると[カスタムCSS]の欄がありますので以下のCSSをコピペして下さい。

/*Contact Form 7カスタマイズ*/
/*スマホContact Form 7カスタマイズ*/
@media(max-width:500px){
.inquiry th,.inquiry td {
display:block!important;
width:100%!important;
border-top:none!important;
-webkit-box-sizing:border-box!important;
-moz-box-sizing:border-box!important;
box-sizing:border-box!important;
}
.inquiry tr:first-child th{
border-top:1px solid #d7d7d7!important;
}
/* 必須・任意のサイズ調整 */
.inquiry .haveto,.inquiry .any {
font-size:16px;
}}
/*見出し欄*/
.inquiry th{
text-align:left;
font-size:14px;
color:#444;
padding-right:5px;
width:30%;
background:#f7f7f7;
border:solid 1px #d7d7d7;
}
/*通常欄*/
.inquiry td{
font-size:14px;
border:solid 1px #d7d7d7;
}
/*横の行とテーブル全体*/
.entry-content .inquiry tr,.entry-content table{
border:solid 1px #d7d7d7;
}
/*必須の調整*/
.haveto{
font-size:14px;
padding:5px;
background:#ff9393;
color:#fff;
border-radius:2px;
margin-right:5px;
position:relative;
bottom:1px;
}
/*任意の調整*/
.any{
font-size:14px;
padding:5px;
background:#93c9ff;
color:#fff;
border-radius:2px;
margin-right:5px;
position:relative;
bottom:1px;
}
/*ラジオボタンを縦並び指定*/
.verticallist .wpcf7-list-item{
display:block;
}
/*送信ボタンのデザイン変更*/
#formbtn{
display: block;
padding:15px;
width:350px;
background:#ffaa56;
color:#fff;
font-size:18px;
font-weight:bold;
border-radius:2px;
margin:25px auto 0;
}
/*送信ボタンマウスホバー時*/
#formbtn:hover{
background:#fff;
color:#ffaa56;
border:2px solid #ffaa56;
}

これで、少し見た目もよくなりました。

いかがでしょうか?
ちゃんと表示されましたか?

最後に送信テストで確認しましょう。

必須項目に入力後、送信テストして登録メールアドレスに届けば成功です。

WordPressブログ運営
スポンサーリンク
シェアして頂けるとすごく嬉しいです^^
フォロー数が増えるとモチベーション上がります!よろしくお願いいたしますm(_ _ )m
スポンサーリンク
はいたか HAITAKA Blog

コメント

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