Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPress でお問い合わせフォーム 7 のスタイルを設定する方法

編集メモ: WPBeginner のパートナーリンクから手数料を得ています。手数料は編集者の意見や評価に影響を与えません。編集プロセスについて詳しく知る。

Contact Form 7 のフォームをカスタマイズしてスタイルを変更したいですか?

お問い合わせフォーム 7 は WordPress で最も人気のあるお問い合わせフォームプラグインのひとつです。しかし最大の欠点は、すぐに追加できるフォームがとても地味だということです。

この投稿では、WordPress のお問い合わせフォーム 7 のスタイル設定方法を紹介します。

How to style Contact Form 7 in WordPress

なぜ Contact Form 7 のフォームをスタイルするのですか?

お問い合わせフォーム 7 はWordPress で最も人気のあるお問い合わせフォームプラグインのひとつです。無料で使えて、ショートコードを使ってWordPress のフォームを追加できます。

しかし、お問い合わせフォーム 7 は機能がとても限られています。Contact Form 7 の問題のひとつは、フォームのスタイルが素っ気ないことです。さらに、このプラグインにはフォームのスタイルを変更するためのビルトインオプションがありません。

そのため、お問い合わせフォームのデザインをサイトのテーマに一致させたり、フォームを目立たせるためにフォントや背景色を編集したりすることが難しくなります。

より高度な機能でカスタマイズ可能なフォームをお望みであれば、最も初心者に優しいお問い合わせフォームプラグインであるWPForms をお勧めします。ドラッグ&ドロップのフォームビルダー、1,800以上のビルトインフォームテンプレート、多数のカスタマイザー設定があります。

WPFormsには60以上のテンプレート、条件ロジック、Stripeペイメントなどを含む無料版もあります。

ということで、WordPress でお問い合わせフォーム 7 のスタイルを作る方法を見てみましょう。

お問い合わせフォーム 7 を始める

まず、あなたのサイトにContact Form 7プラグインをインストールして有効化する必要があります。もし助けが必要でしたら、WordPress プラグインのインストール方法をご覧ください。

有効化した後、WordPressダッシュボードからContact ” Add Newにアクセスしてください。

Edit Contact Form 7 settings

サイトのフォームを編集し、フォームのタイトルを入力します。

プラグインはフォームの初期設定である名前、メール、件名、メッセージフィールドを自動的に追加します。しかし、ドラッグ&ドロップでフィールドを追加することもできます。

完了したら、「保存」ボタンをクリックし、ショートコードをコピーするのを忘れずに。

Copy the shortcode

次の作業は、ブログの投稿やページに追加することです。

そのためには、投稿を編集するか、新規投稿を追加するだけです。WordPressエディターに入ったら、上部の「+」記号をクリックし、ショートコード・ブロックを追加する。

Add a shortcode block

その後、ショートコードブロックに Contact Form 7 フォームのショートコードを入力するだけです。このようになります:

[contact-form-7 id="117" title="Contact Form"]

さあ、WordPress ブログ投稿を公開してお問い合わせフォームの動きを見てみましょう。この投稿では初期設定のお問い合わせフォームを使い、WordPress のページに追加しました。これがテストサイトでのお問い合わせフォームの表示です。

Contact form 7 preview

さて、WordPress でお問い合わせフォーム 7 をカスタマイズする準備はできましたか?

カスタム CSS を使って WordPress のお問い合わせフォーム 7 をスタイリングする

Contact Form 7 にはビルトインのスタイルオプションがないので、CSS を使ってフォームのスタイルを設定する必要があります。

お問い合わせフォーム 7 は標準に準拠したフォームのコードを生成します。フォームの各要素には適切な ID と CSS クラスが関連づけられているので、CSS の知識があれば簡単にカスタマイズできます。

Contact Form 7 の各フォームは CSS クラス.wpcf7を使ってフォームのスタイルを設定することができます。

この例では、入力フィールドにLoraというカスタマイザーフォントを使用し、フォームの背景色を変更します。

div.wpcf7 { 
background-color: #fbefde;
border: 1px solid #f28f27;
padding:20px;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
background:#725f4c;
color:#FFF;
font-family:lora, sans-serif; 
font-style:italic;    
}
.wpcf7 input[type="submit"],
.wpcf7 input[type="button"] { 
background-color:#725f4c;
width:100%;
text-align:center;
text-transform:uppercase;
}

カスタムCSSの追加にお困りの場合は、WordPressサイトにカスタムCSSを簡単に追加する方法をご覧ください。

このCSSを適用した後のお問い合わせフォームはこのようになりました。

Custom CSS preview

複数のお問い合わせフォーム 7 をスタイリングする

複数のお問い合わせフォームを使っていて、それぞれ異なるスタイルにしたい場合は、それぞれのフォームに Contact Form 7 が生成した ID を使う必要があります。上で使った CSS の問題点は、あなたのサイトのすべてのお問い合わせフォームに適用されてしまうことです。

まず、修正したいフォームがコンテナで入っているページを開きます。次に、フォームの最初のフィールドにマウスを持っていき、右クリックして「Inspect」オプションを選択します。

ブラウザー画面が分割され、ページのソースコードが表示されます。ソースコードの中で、フォームコードの開始行を見つける必要があります。

Inspect form and get form id

上のスクリーンショットにあるように、お問い合わせフォームのコードは次の行から始まります:

<div role="form" class="wpcf7" id="wpcf7-f113-p114-o1" lang="en-US" dir="ltr">

id 属性はお問い合わせフォーム 7 がこのフォームのために生成する一意な識別子です。これはフォーム ID とこのフォームが追加された投稿 ID の組み合わせです。

この ID を CSS で使用してお問い合わせフォームのスタイルを設定し、最初の CSS スニペットで .wpcf7 を#wpcf7-f113-p114-o1 に置き換えます。

div#wpcf7-f113-p114-o1{
background-color: #fbefde;
border: 1px solid #f28f27;
padding:20px;
}
#wpcf7-f113-p114-o1 input[type="text"],
#wpcf7-f113-p114-o1 input[type="email"],
#wpcf7-f113-p114-o1 textarea {
background:#725f4c;
color:#FFF;
font-family:lora, "Open Sans", sans-serif;
font-style:italic;
}
#wpcf7-f113-p114-o1 input[type="submit"],
#wpcf7-f113-p114-o1 input[type="button"] {
background-color:#725f4c;
width:100%;
text-align:center;
text-transform:uppercase;
}

これですべてのフォームに対してこの手順を繰り返すことができ、カスタマイズしたい Contact Form 7 のフォームごとにフォーム ID を置き換えることができます。

CSS Hero でお問い合わせフォーム 7 をスタイリングする

Contact Form 7 のフォームのスタイルをより簡単に変更する方法はCSS Hero を使うことです。CSS Hero を使えば CSS を書かなくてもフォームを編集することができます。

あなたのサイトにCSS Heroプラグインをインストールして有効化するだけです。WordPressプラグインのインストール方法はこちらをご覧ください。

次に、フォームを含むページに行き、上部のツールバーにある’CSS Heroでカスタマイズ’オプションをクリックします。

Customize with CSS hero

CSS Heroは、コードを書かずにCSSを編集できる簡単なユーザーインターフェースを提供します。

プラグインを使用すると、フォーム上のフィールド、見出し、その他の要素をクリックして、背景色、フォント、枠線、スペーシングなどを編集することができます。

CSS hero interface

フォームのカスタマイザーが完了したら、一番下にある「保存して公開する」ボタンをクリックするだけです。

この投稿が WordPress でお問い合わせフォーム 7 のスタイルを作る方法を学ぶ助けになったなら幸いです。メールマガジンの作り方や、WordPress のエキスパートが選ぶ最高の電卓プラグインもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

48件のコメント返信を残す

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

    • WPBeginner Support says

      The pdf embed we’re recommending is for viewing content. For filling out forms we recommend using a form plugin

      管理者

  2. Steve says

    Hello is it possible to ad a message if i dont filled out one ore more “Required fields” to get a Message ? Because i Only get the “red arrows” on the “Required fields” that I don’t filled out. In I want additionally a error Message like

    “One or more Required fields have an error. Please check and try again.”
    But i Only have the red arrows, and the Problem is on mobile Phones the red arrows are not in the window and the Client don’t see it.

    • WPBeginner Support says

      You would need to reach out to contact form 7’s support for what they currently have available.

      管理者

  3. FRED_VERSATILE says

    Hello,
    Thank you for this tutorial.
    I would like to add a custom image at the right of the “send” label, in the button.
    I’ve done it with a :before for the other buttons on my website, but i can’t find the element in the send form to put the CSS…

  4. Mary Lou Hoffman says

    I’m a novice, but determined to figure this out! So, please – give me baby steps if you answer.

    I have a contact7 form on my website. The font is showing up as white on a white background for the labels (Your name, Your email, etc).
    How do I change the color – where do I go to tell it to change color?
    I tried copying and pasting some of the codes ya’all had in your answers above, but they just showed up on my page, but didn’t change the font.

    • Karu Price says

      You can target the lable area like this-

      .wpcf7 form p label {
      color: white;
      background: black;
      font-family: sans-serif;
      }

      • Rita Accarpio says

        Hi there!

        I’m here struggling with modal headings. I changed the form background to a darker color but now I want to change the heading’s color. Doesn’t seem to change at all with all the different options I tried so far.

        Do you know anyway to do this? Help me please!

        Thanks!

  5. Joel Desrosiers says

    My contact form has a dark image background so I need “your name”, “your email” and “your message” to be white. I can’t find a class or id for those elements, I tried with inspect element but I can’t find anything that works. This is the only contact form on this site. I’m using css on the stylesheet of my childtheme and I tried different options but can’t change the color. Can anyone help me?

  6. Merriann Fu says

    I’m pretty new to WordPress and Plugins in general but have this Plugin installed and everything is working correctly but instead of seeing the person’s message, it just shows [your-message] in the body of the email. I have everything set up like above and spelled correctly so i’m not sure what the problem is. Any help would be much appreciated! Thanks!

    • Don Walley says

      I have the same problem. I’m only new to forms on WP but I’m stuck too. I’m trying to build a Registration page with business name, address, etc along with personal contact information and a drop down to make their choice and of course a comment field. After testing this numerous times I get the same as you; the content of the comment field.

      Wish there had been an example or two on the Docs page of Contact 7; something besides only the default Contact Form.

  7. Miguel Ceballos says

    I don’t think Contact Form 7 is the most popular. It comes pre-installed with many themes and wordpress instalations, that’s the reason they have so many users. It is so frustrating to edit anything in this plugin.

  8. Osama Ali Khan says

    Hello if some one want contact form with transparent background or want to add contact form 7 on the big banner image with transparent background then add this code to your custom css.

    .wpcf7 input[type=”text”],
    .wpcf7 input[type=”email”],
    .wpcf7 textarea
    {
    background-color: Transparent;
    color: BLUE;
    width: 100%;

    }

    div.wpcf7 {
    color: white;
    margin: 0;
    padding: 0;
    }

  9. Deborah says

    You are an absolute life saver. I’ve been battling with this for hours.
    One point I’d make that others might find it useful to know, is that I was trying to style the submit button, which was on a contact form 7 I’d put on my sidebar.

    This worked for the first page it was on but then wouldn’t on subsequent pages. However, I then noticed that the f2 code on the second page had a suffix of ‘o2’, and when I added this to my css, the styling on this page worked too.

    Thank you again.

  10. Mikko says

    Thanks for a great post, was very helpful. One thing still bothering me and it’s that i haven’t found a way to customize checkboxes. Have you found a way how it would be possible to change checkbox size for example so that it would work on every browser?

    Seems like the input structure isn’t modified so no extra spans could be added to fake the checkboxes an i right?

    Glad if you have time to help me out, cheers.

  11. Wendy says

    Oh my gosh! You have no idea how grateful I am for this post! THANK YOU!

    I simply wanted to change the font used in the Submit button. I searched and searched for hours and tried various CSS code variations and nothing worked until I came across your code and then added a font element to it. Problem solved!

  12. pranav shinde says

    contact-form-7/includes/css/styles.css (inactive) this appears above my css edit file,,by which none of changes are applied to website help me how to make it active

  13. Monique says

    Hello,

    I am wondering if any one can help me fix the contact form for mobile. I am able to see the form but it is too wide and gets cut off.

    Thank you.

  14. Jiniya says

    I find your website very helpful.just a suggestion it would be great if u could launch an app for your website soon…apps are more convenient than following emails

  15. Anee says

    Top most features in WordPress you can own style easily no need deeply knowledge for manage your site in WordPress. In Contact 7 form, you can your own structure that you have already design in HTML or other one.

  16. Neil Murray says

    If working with CSS is a little beyond your current skill levels you might also consider using https://wordpress.org/plugins/contact-form-7-skins/ .

    Contact Form 7 Skins which works right within the normal Contact Form 7 interface, making it easier for regular WordPress users to create professional looking Contact Form 7 forms using a range of compatible Templates and Styles – even if you don’t have HTML and CSS skills.

    • Andrew Wilkerson says

      Thanks Neil, I think that’s just what I needed. I got excited and installed it then wiped out my existing form, so I had to restore a backup of my site to get it working again, I’ll look into it more when I have time, I guess i’ll have to copy my current form into it or start from scratch with a new one. Off to watch some tutorials. Hopefully this is still the best one to use. I know it’s an old post here but it does say it was recently updated on the plugin page.

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。