menu

初心者必見contact form 7基本操作からカスタマイズ方法をご紹介します。

contact form 7でお問い合わせページ作成したけど、レイアウトだけでも変更したいと考えている方はいらっしゃらないでしょうか?そのようなお悩みをお持ちの方にレイアウトのカスタマイズ方法についてご紹介したいと思います。コピペで利用し、少し修正してご自分の使いやすいレイアウトにできますので、ぜひ、今回お問い合わせページのレイアウトのカスタマイズにチャレンジしてみてはどうでしょうか?

 到達目標

上がデフォルトの問い合わせページです。下がレイアウトを変更した問い合わせページです。背景をつけて入力項目の枠を広げ、位置を中央に寄せ、スパム防止用のボタンを設置しました。ボタンもカスタムしています。スマホでも見やすいレイアウトも意識して作りました。今回、このようなレイアウトのカスタマイズについてご紹介していきたいと思います。

 contact form 7の導入

wordpress管理画面⇨「プラグイン」⇨「新規追加」⇨「contact form 7」と検索する。⇨インストールし有効化する。
以上でcontact form 7の導入が完了です。
2015-10-22_23h54_47

 contact form 7の基本操作

※スマートフォンで閲覧されている方は、NAKA KENをクリックして入ってもらえれば、見やすいです。

Contact form 7の基本操作

 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のレイアウトをカスタマイズについての説明を終わりますが、参考になりましたでしょうか?下に使用したコードを添付しています。カスタマイズに役立てていただけたらと思います。

レイアウトのカスタマイズをする際は、バックアップをとって実施することをおすすめします。

 

 使用したコード

.

contact form 7にボタン画像を設定する方法

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitterでshare lifeをフォローしよう!

スポンサーリンク

WordPress初心者でも安心してCSSを編集できる子テーマ作成法

facebook投稿のリンク画面をアイキャッチ画像にする設定方法

関連記事

  1. 誰でもできる!jQueryを使ってwordpressでもスクロー…

    wordpressを使っていてスクロール時に画像に動きをつけたい時ってありますよね。投稿記事内はプラ…

  2. 誰でもできるcontact form 7にボタン画像を設定する方…

    contact form 7の送信ボタンを画像に変えて印象を良くしたいですよね。 以前、…

  3. たった2分でできる!ボタン画像をサイトに設置するボタンマルシェの…

    リンクを設定する時、クオリティーが高いボタン画像を使ってリンクさせたいですよね。私もボタン画…

  4. 【動画版】wordpress初心者でもバックアップし復元する方…

    wordpressを使ってブログを運営していると、カスタマイズして画面が真っ白になったり、ウィルスに…

  5. ul、liのドット部分を画像でリスト化する方法

    ul,olのドットや数字部分に画像を挿入したい時ってありますよね。画像を挿入できれば、自分の…

  6. ul、liのドット部分をアイコンでリスト化する方法

    ulやolで箇条書きにする際に、ドットや数字の代わりにアイコンを使いたい時ってありますよね。…

  7. wordpressど素人がWordCamp Kansai 201…

    平成28年7月9、10日の2日間、WordCamp Kansai 2016のスタッフとして参加しまし…

  8. 簡単すぎる!wordpressで初めてのCSS編集これで画像装飾…

    wordpressを使っていて、画像を装飾をする際にCSSを編集したい時ってありますよね。じ…

PAGE TOP