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. 絶対できる!アイキャッチ画像付きfacebookのいいねボタンを…

    上の画像のようなバイラルメディア風facebookいいねボタンを記事の下に設置したい方は必見…

  2. スライダー表示可!wordpressでサイドバーを固定するQ2W…

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

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

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

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

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

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

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

  6. たったそれだけで?PVを増加させたSNSボタンのカスタマイズ方法…

    ブロガーなら、誰でも悩むと思うのですが、バズを狙ったり、自分のfacebookやtwitterに投稿…

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

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

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

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

PAGE TOP