お問い合わせフォームの横幅を変更する方法

ブログの中で非常に重要な役割をする「お問い合わせフォーム」。そのお問い合わせフォームの見映えが悪くて入力しづらかったら、いただける問い合わせもいただけなくなります。この記事では、ContactForm7を使ったお問い合わせフォームのサイズを広げて、入力しやすくする方法をご紹介します。

お問い合わせフォームって、
すごく大事ですよね。
 

お問い合わせをいただけることが
ブログを認めていただけた証明になったり、
自分自身もすごく励みになったりします。
 

そんな大事なお問い合わせフォームですが、
小さすぎたり、大きすぎたり、
大きさが今ひとつで悩んでいませんか?


 

ららのブログは、
Contact Form 7というプラグインを利用しているのですが、
 

お問い合わせフォームが
こんなふうに小さくて、困っていました。

 

グレーの部分がブログの横幅なので、
ちょっと小さくて不恰好ですし、第一、入力がしづらいです。
 

この入力スペースを広くする方法をご紹介します。

 

お問い合わせフォームの入力スペースを広げる方法

管理画面左下の「お問い合わせ」をクリックすると、
Contact Form 7 の設定画面が出ます。

 

先ほどの小さいお問い合わせフォームの設定は、
このようになっています。

 
ここに、お問い合わせフォームの
各項目のサイズを記入することができるんです。

こんなふうに。

 

赤字の部分が、付け足した部分です。
 

「お名前」と「メールアドレス」は、1行だけの入力項目ですので、
70/100 のような形でサイズを表現します。

全体の幅を100としたときのサイズを指定するわけですね。
様子を見ながら、70を増減してください。
 

「メッセージ本文」は、ヨコxタテ の形で表現します。
私の場合は100×20 ですが、
100と20は、様子を見ながら増減してください。
 

サイズ調整をした結果、
お問い合わせフォームは、こんな形になりました。

 

このサイズなら、
気持よく入力していただけますね。

 

このような、Contact Form 7 ついての詳細は、
こちらのページに詳しく載っています。
http://contactform7.com/text-fields/?lang=ja
 

ぜひ参考になさってください。


この記事が役に立ったと思ったらクリックしてね。ららが喜びます。

 

 

 

こんな記事もありますよ☆ぜひ見ていってね!

 


最後まで読んでいただき、ありがとうございました。


ららのブログでは、あなたからの疑問・質問・お問い合わせを大歓迎しています。 こちらからいつでもメールを送ってくださいね。

>>ららにメールを送る

 

 

12 Responses to “お問い合わせフォームの横幅を変更する方法”

  1. キースです!いつも応援感謝しております^^

    お問い合わせフォームの横幅の大きさを
    変える方法の記事、勉強になりました^^

    今後も為になる記事
    楽しみにしております。

    応援完了です^^

    • らら より:

      キースさん
      ご訪問&コメントありがとうございます。
      はい、
      これからも、ためになる記事が書けるように
      がんばりたいと思ってます。
      応援ありがとうございました。

  2. 週末農夫@安月給だからアフィリエイトで稼ぐ より:

    ららさんこんばんは。
    週末農夫です。

    遅くなりましたがあけましておめでとうございます。
    今年もよろしくお願いします。

    確かに問い合わせフォームって大切ですよね。
    書き込もうと思ったけど、狭くて改行だらけに
    なっちゃったとか、自分で書いている文章が
    スクロールいっぱいしなきゃ読み返せないとか
    いやになってきちゃいますね。

    コメントや、問い合わせがほしかったら、この辺も
    意識してあげることが必要ですよね。

    良い記事でした。
    さっそく直してみます。

    それでは応援ポチッ!

    • らら より:

      週末農夫さん
      ご訪問&コメントありがとうございます。
      そうですね~。
      メールをしようと思っても、
      あまりにフォームが小さいと、
      面倒になってやめちゃうかもしれないですよね。
      少なくとも、たくさん書こうとは思わないですね~。
      応援ありがとうございました。

  3. はやぞう より:

    こんばんわ。

    いつもいつも参考になる記事ばかりですね。

    しかも常に読者目線を忘れていない姿勢は
    本当に参考になります。

    Contact Form 7については
    同じことを思っておりましたので
    早速取り組ませていただきます。

    応援ぽちです^^

    • らら より:

      はやぞうさん
      ご訪問&コメントありがとうございます。
      お~、同じことを思ってらっしゃったんですか。
      良かったです~お役に立てて^^
      どうも、同じContact Form7 でも、
      フォームの大きさが違うようで、
      どうしてなのか、謎に思っています。
      応援ありがとうございました。

  4. かんな より:

    ららさん、こんばんは。

    かんなです。

    コメント&応援ありがとうございました。

    お問合せフォームの横幅を大きくする技術的なこと、

    さらに読者さま目線の考え方。

    今回の記事もとても勉強になりました。

    応援☆

    • らら より:

      かんなさん
      ご訪問&コメントありがとうございます。
      いやいや、
      そんな大それたことじゃないです~^^;
      「技術的なこと」は、自分じゃどうしてもわからず、
      つかささんにおしえていただきました^^
      応援ありがとうございました。

  5. ららさん

    こんにちは。きよパパです。

    お問い合わせフォームは、正直なところは今まで意識をしてませんでした(~_~;)

    ですが、記事を読んで取り込まないといけないって気になりました。

    有益な情報ありがとうございます。

    これからも、よろしくお願いします。

    応援です\(^o^)/ポチッ

    • らら より:

      きよパパさん
      ご訪問&コメントありがとうございます。
      私も最初は、お問い合せフォームの存在は
      忘れているくらい、意識していませんでした。
      日々少~しずつ進化ですね^^
      応援ありがとうございました。

  6. ウメコ より:

    ららさん、こんにちは。
    ウメコです。

    私も最初は、プラグラインのコメントフォーム使ってました^^
    でもカスタマイズ方法がわからず断念 w

    思ったより簡単に操作できるものなんですね^^
    参考になりました。

    応援です!

    • らら より:

      ウメコさん
      ご訪問&コメントありがとうございます。
      けっこうワードプレスのプラグインは、
      わかりづらいものが多いですよね。
      まったく、ワードプレスは、日々勉強です^^;
      応援ありがとうございました。

コメントを残す

サブコンテンツ

このページの先頭へ