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でテキストにアイコン付き背景をワンクリックで挿…

    ブログを書いて、強く訴えたい部分ってありますよね。目立たせたいけどどうすればいいか悩みますよ…

  2. wordpressど素人がWordCamp Kansai 201…

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

  3. お名前.comから独自ドメインを取得してwordpressをイン…

    これからwordpressの運営をやっていこうと思っている方、必見です。wordpressを…

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

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

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

    Wordpressのレイアウトを変更したいんだけど、CSSをそのままにしている方はいらっしゃ…

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

    ブログ記事をfacebookに投稿したけど、アイキャッチ画像が表示されないって時って悩ましい…

  7. 【動画版】wordpress初心者でもデータベースを復元できる方…

    wordpressを使っていたら、思わぬことでウィルス感染してしまい、バックアップしていたデータを復…

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

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

スポンサーリンク

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

3/31までドメイン無料キャンペーン

最近の記事

PAGE TOP