初心者必見contact form ７基本操作からカスタマイズ方法をご紹介します。
contact form 7でお問い合わせページ作成したけど、レイアウトだけでも変更したいと考えている方はいらっしゃらないでしょうか？そのようなお悩みをお持ちの方にレイアウトのカスタマイズ方法についてご紹介したいと思います。コピペで利用し、少し修正してご自分の使いやすいレイアウトにできますので、ぜひ、今回お問い合わせページのレイアウトのカスタマイズにチャレンジしてみてはどうでしょうか？
到達目標
上がデフォルトの問い合わせページです。下がレイアウトを変更した問い合わせページです。背景をつけて入力項目の枠を広げ、位置を中央に寄せ、スパム防止用のボタンを設置しました。ボタンもカスタムしています。スマホでも見やすいレイアウトも意識して作りました。今回、このようなレイアウトのカスタマイズについてご紹介していきたいと思います。
contact form 7の導入
wordpress管理画面⇨「プラグイン」⇨「新規追加」⇨「contact form 7」と検索する。⇨インストールし有効化する。
以上でcontact form 7の導入が完了です。
contact form 7の基本操作
※スマートフォンで閲覧されている方は、NAKA KENをクリックして入ってもらえれば、見やすいです。
reCAPTCHA設定方法
reCAPTCHAはスパムや悪意のあるユーザー登録、コンピューターが人間を偽って行われる攻撃などからサイトを守るものです。設定してセキュリティ強化を図りましょう。 reCAPTCHAの設定方法について様々な記事がありますが、こちらが一番わかりやすく説明してありましたので参考にしていただけたらと思います。reCAPTCHAの設定ができれば、次はレイアウトを変更していきます。
子テーマを作成する。
実際にcontact form 7のレイアウトの変更をCSSを使って行っていきたいと思いますが、その前に現在使用しているテーマのstyle.cssに直接入力すると、テーマのアップデートがあった場合や、必要な部分を誤って削除した場合、カスタムしても無駄になったり、テーマのレイアウト自体が崩れたりします。子テーマを作成しておくことで親テーマのCSSを直接変更せずにレイアウトを変更することができます。子テーマの作成方法はこちらを参考にしてください。 WordPress初心者でも安心してCSSを編集できる子テーマ作成法 | SHARE LIFE
Contact form 7レイアウト編集
Contact form 7レイアウト編集について子テーマを使用して説明しています。 Contact form 7レイアウト編集※background-sizeについて詳しく知りたい方はこちらを参照 以上でcontact form 7のレイアウトをカスタマイズについての説明を終わりますが、参考になりましたでしょうか？下に使用したコードを添付しています。カスタマイズに役立てていただけたらと思います。
使用したコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
.wpcf7 input[name="your-name"], .wpcf7 input[name="your-email"], .wpcf7 input[name="your-subject"] { width: 80%; height: 45px !important; } .wpcf7 textarea[name="your-message"] { width: 80%; height: 350px !important; } .wpcf7 input[type="submit"] { font-size: 100%; padding: 0.2em 0.4em; background: #eee; color: #333; border-radius: 4px; cursor: pointer; box-shadow: 0 0 1px rgba(0,0,0,.2); border: 1px solid #ccc; text-shadow: -1px 1px 0 rgba(255,255,255,1); } .wpcf7 input[type="submit"]:hover { box-shadow: 0 0 1px rgba(0,0,0,.2) inset; background: #BC8F8F; } .C1 { text-align: center; } #C9 { margin-right:auto; margin-left:auto; width: 160px; } .C8 { margin-right:auto; margin-left:auto; width: 43px; } #C2,#C3,#C4,#C5{ padding-bottom: 0px; margin-bottom: 0px; text-align: left; margin-left: auto; margin-right: auto; width: 80%; } .C6 { background-image: url("表示したい画像のURL"); background-size:contain; border-radius: 10px; padding-top: 50px; padding-bottom: 50px; width: 100%; } #C2,#C3,#C4,#C5,#C7 { color: #ffffff; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div class="C6"><div class="C1"><p id="C2">お名前 (必須)</p> [text* your-name] </div> <div class="C1"><p id="C3">メールアドレス (必須)</p> [email* your-email] </div> <div class="C1"><p id="C4">題名</p> [text your-subject] </div> <div class="C1"><p id="C5">メッセージ</p> [textarea your-message] </div> <div class="C1"><p id="C7">スパム防止のために設定しています<br /> チェックして送信を押して下さい</p> [recaptcha id:C9 size:compact]</div> <div class="C8">[submit "送信"]</div></div> |
.
contact form 7にボタン画像を設定する方法
この記事が気に入ったら
いいね！しよう
最新情報をお届けします
Twitterでshare lifeをフォローしよう！
Follow share life