Contact-Form-7

ワードプレスにお問い合わせフォーム(Contact Form 7)を追加しよう!

投稿日: カテゴリー: プラグイン

企業のHPを作成する時に、お問い合わせフォームは必須でもあります。

現在、無料でお問い合わせフォームは色々出ていますので、知られている方も多いかと思いますが、スマホでズレてしまったり見た目がよくなかったりします。

見た目は兎も角としても、スマホで見ると横にズレるのは問題です。

 

今回はお問い合わせフォームを使いスマホに対応するまでをお勉強いたしましょう♪

 

Contact Form 7でワードプレスにお問い合わせを追加するまで

まずは【 Contact Form 7 】をプラグイン窓口で、検索をして頂きまして有効にしましょう。

この辺りは簡単ですよね?(^^)

お問い合わせフォーム

有効にすると、画面左手に【お問い合わせ】と言う項目がでますので、それがContact Form 7 です。

お問い合わせに、マウスを持っていき

コンタクトフォームをクリック

初めから一つのコンタクトフォームがありますので、其方を編集していきます。

コンタクトフォーム 1 と書かれている場所にマウスを持っていくと、編集を押します。

Contact Form 7にお問い合わせを追加して、お客様に自動返信できる様になるまで

コンタクトフォーム7

テキストや電話番号やメール等ほしい項目は上から選びましょう。

これでOKしても、まともに動きませんので【メール】と書かれたタブを選びます。

すると、メールアドレス等書かれた項目が出てきますが、ここを少し変更していきます。

 

 

メッセージ
そのままでは、メッセージ部分しか反映されてない

このままでは、相手のメールアドレスや電話番号等の相手の情報がメールとして送られてこないので、必要な項目を追加していきます

 

 

メッセージを入れておく

上にショートコードが出ていますので、それをそのままコピーして、画像の様に張り付けて【お名前】【メール】【タイトル】【メッセージ】と分かりやすく記入しておきます。

こうする事で、メールで自分に届くときに分かりやすくなりますが、あくまでもコチラは自分に届くメールフォームになりますので、お客様に届くメールではありません。

 

 

お客様に返信用

今度はその下にあります、メール2の方にチェックをしてます。

コチラは、先ほどと違いまして【お客様に返信用のメールフォーム】になりますので、失礼の無いように書き込んでいきましょう♫

これでOKですので、登録をしておきます。

 

 

コンタクトフォーム

最後に、お問い合わせのTOPページあります、コチラをコピーしてコンタクトフォームを作るページに張り付ければ、OKです。

しかし、これだけではスマホ対応できていませんので、次の項目に行きましょう

Contact Form 7をスマホ対応にして、見やすいお問い合わせにする

今度はスマホに対応する為に、CSSに下をコピーして下さい。

 


.form-width { max-width: 100%;}

 

更にコチラをメールフォームに追加していきます。


class:form-width

コンタクトフォームをスマホに対応する

画像にあります様に、コピーした物を半角スペースを入れてペーストします。

これでスマホの対応は終わりになります。とても簡単ですね♪