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. スライダー表示可!wordpressでサイドバーを固定するQ2W…

    スクロールする際に、サイドバーのウィジェットを常に表示させたい時ってありますよね。いろいろ探した…

  2. TCDテーマの標準搭載SNSボタンのシェア数を表示させる方法

    最近、TCDのVIEWというテーマに変更しまして、TCDテーマのSNSボタンはデザインが良くて使いた…

  3. 【動画解説】wordpressをさくらからエックスサーバーへ引っ…

    当ブログはさくらインターネットのスタンダードプランに契約していたのですが、80記事を超えてきてから、…

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

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

  5. サムネイルを活したセンスが良いTCDのテーマVIEW!使用感をレ…

    私がブログを始めて1年経ち、研究のために他のブログを参考にすることがあるんですが、余計な文字が多いと…

  6. wordpressのドメインを変更しGoogleに通知する方法

    wordpressを始めてから、ドメインを変更したいなと思ったことありますよね。だけど、変更…

  7. WordPressを始める初心者におすすめ!テーマ選びの5つのポ…

    これから、Wordpressを始める人にとって、Wordpressテーマを決めるのは、重要ですよね。…

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

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

スポンサーリンク

さくらとXサーバーの速度比較

4/28まで初期設定費用半額

最近の記事

PAGE TOP