プロフィール

スキル・人脈・お金ゼロの元サラリーマン / WordPressでWEB制作 / ライバルが少ない田舎で生活 / 複数のスキルを組み合わせる / ゼロからスタートして月30万円稼ぐ / サラリーマンや駆け出しのフリーランスを応援 / ブログ100日連続更新 / 継続のコツについては無料noteで→https://bit.ly/3gzPqvE

Web制作 プラグイン

【お問い合わせフォーム】Contact Form 7の設定と使い方を解説

2021年8月15日

悩んでいる人
WordPressでサイトを作ったけど、お問い合わせフォームの設置方法がわからないよ

 

こんな方におすすめ

  • サイトにお問い合わせフォームをつくりたい
  • ユーザーからの反応が知りたい
  • お問い合わせフォームを設置して信頼を得たい

 

 

本記事を読んでいただければ、プログラミングなど難しい知識は必要なく、プラグインでカンタンにWordPressのお問い合わせフォームを設置できます。

 

本記事の信頼性

すぎにい
ぼくはWordPressでWeb制作しているエンジニアです。今までに30社以上のサイトを制作しており、お問い合わせフォームはすべてContact Form 7を設置しています。

 

Contact Form 7とは?

Contact Form 7とは?

Contact Form 7とは、サイトにお問い合わせフォームを設置できるプラグインです。

従来のWebサイトであれば、お問い合わせフォームの設置にHTMLやCSSといった専門的なプログラミング知識が必要となります。

 

しかし、WordPressであれば、プラグインでお問い合わせフォームが設置できます。

↓ 実際にぼくが作成したお問い合わせフォームはこんな感じです。

お問い合わせフォーム

 

 

すぎにい
ぼくが手がけたWebサイトは、すべてContact Form 7を設置しているのでオススメですよ。

 

また、Contact Form 7はチェックボックスやラジオボタンなど、自分好みにカスタマイズも可能です

Contact Form 7は初心者から玄人まで使用しているプラグインなので、インストールしておいて損はありませんよ。

 

Contact Form 7をインストールする

【必見】レンタルスペースにオススメのWordPressテーマとは?

WordPressでプラグインを使用するためにはインストールが必要です。

プラグインのインストールはWordPressの管理画面で行います。

 

まず、WordPressの管理画面で『プラグイン』『新規追加』ボタンを押して、右上の検索バーに『Contact Form 7』と入力して、プラグインが表示されたら『今すぐインストール』ボタンをクリックします。

『今すぐインストール』

 

インストールしたXML Sitemapsを『有効化』すれば完了です。

有効化

 

Contact Form 7の設定方法

Contact Form 7の設定方法

 

それでは、Contact Form 7の設定方法について説明しますね。

Contact Form 7をインストールしたら、『お問い合わせ』から『コンタクトフォーム』をクリックします。

コンタクトフォームを新規追加

 

デフォルトでは、『コンタクトフォーム1』と記載されていますが、自分のわかりやすい名前に変更してください。

フォームを追加

 

あとで貼りつける必要があるため、お問い合わせフォーム用のタグをコピーしておきましょう。

タグをコピーする

 

つぎに『固定ページ』から、『新規追加』で新しいページを作成します。

固定ページを作成

 

タイトルは分かりやすく『お問い合わせ』と入力して、先ほどコピーしたお問い合わせフォームのタグを本文に貼りつけます。

すると、『コンタクトフォームを選択』という項目が表示されるため、複数作成している場合は貼りつけたいフォームを選択しましょう。

タグを貼り付ける

 

Contact Form 7でカスタマイズしたい場合は?

先ほどはデフォルトのお問い合わせフォームを使用しましたが、今度は自分好みにカスタマイズしてみましょう。

今回はユーザーに選択してもらう『ラジオボタン』と迷惑メールを削減するために『承諾確認』のチェック項目を追加します。

『フォーム』タブから追加する箇所に改行を入れて、『ラジオボタン』をクリックしましょう!

ラジオボタンを追加する

 

つぎに『ラジオボタン』のオプション項目を入力します。

すぎにい
入力する際の注意点は、一行ごとに改行をいれましょう!

あとは『タグを挿入』をクリックします。

ラジオボタンの選択項目

 

入力ができたら、このような感じで記載されます。

ラジオボタンの確認

 

つづいて、『承諾確認』のチェックボックスを追加します。

今回は送信ボタンの上に設置しましょう。

 

ラジオボタンと同じ様に改行を入力してから、『承諾確認』ボタンをクリック。

画面が切り替わり、『同意条件』の部分に表示させたい文章を入力します。

同意条件の文章

 

すぎにい
ぼくの場合は、こんな感じの文章を入力してます。

上記の内容で送信します。よろしければチェックを入れて送信ボタンを押してください。

 

『同意条件』の入力ができたら、『保存』ボタンをクリックしましょう。

保存する

 

つぎにお問い合わせフォームから届く、メールの設定を行います。

デフォルト状態のままでは、せっかく設定したラジオボタンの回答が表示されないため、必ずメールの追加設定を行いましょう。

 

デフォルトではメッセージ本文の下に[your-message]というタグが記載されています。

メールが届いたとき、この位置に本文内容が表示されるという意味です。

 

 

『メール』タブを選択して、『メッセージ本文』の箇所を確認します。

それぞれの項目ごとのタグが用意されています。

 

まだ、メッセージ本文に反映されていない場合は、太字でタグが表示されているので、[radio-〇〇○]をコピーしておきましょう。

今回は、タグを挿入する箇所を[your-message]の下に貼りつけます。

『送信先』については、WordPress管理者に登録したメールアドレスで良いなら、デフォルトタグのままでオッケーです。

タグを挿入する

 

 

また、WordPressのテーマによって、お問い合わせフォームの入力枠や送信ボタンが、下記画像の様に小さくなる場合があります。

お問い合わせフォームの枠が小さい

 

そんなときはCSSを記載して、お問い合わせフォームをカスタマイズしましょう。

CSSとは、コーディングと呼ばれるプログラミングの一種です。

やり方はWordPressの管理画面で、『外観』から『カスタマイズ』を選択します。

CSSを入力する

 

つぎに『追加CSS』をクリックしましょう。

『追加CSS』をクリック

 

追加CSSにコードを貼りつけるのですが、ぼくの場合は下記のコードを使用しています。

/* デフォルトの幅は、スマホ。モバイルファーストでデザイン */
div.wpcf7 input[name="your-name"],
div.wpcf7 input[name="your-email"],
div.wpcf7 input[name="tel-422"],
div.wpcf7 input[name="your-subject"] {
width: 280px;
}
div.wpcf7 textarea[name="your-message"] {
width: 280px;
}
div.wpcf7 {
width:280px;
}

@media screen and (min-width:480px) {
/* 幅、480pxからは、この設定。 */
div.wpcf7 input[name="your-name"],
div.wpcf7 input[name="your-email"],
div.wpcf7 input[name="tel-422"],
div.wpcf7 input[name="your-subject"] {
width: 280px;
}
div.wpcf7 textarea[name="your-message"] {
width: 280px;
}
div.wpcf7 {
width:280px;
}
}

@media screen and (min-width:768px) and ( max-width:1024px) {
/* 幅が、768px から、1024pxまでは、この設定 */
div.wpcf7 input[name="your-name"],
div.wpcf7 input[name="your-email"],
div.wpcf7 input[name="tel-422"],
div.wpcf7 input[name="your-subject"] {
width: 560px;
}
div.wpcf7 textarea[name="your-message"] {
width: 560px;
}
div.wpcf7 {
width:560px;
}
}

@media screen and (min-width:1024px) {
/* 横幅が、1024pxからは、この設定 */
div.wpcf7 input[name="your-name"],
div.wpcf7 input[name="your-email"],
div.wpcf7 input[name="tel-422"],
div.wpcf7 input[name="your-subject"] {
width: 850px;
}
div.wpcf7 textarea[name="your-message"] {
width: 850px;
}
div.wpcf7 {
width:850px;
}
}

/* 送信ボタンを見やすくする */
input.wpcf7-submit {
width: 100%;
height: 80px;
background: #F08200;
color: #ffffff;
font-size: 30px;
font-weight: 600;
display: inline-block;
}

 

上記のコードをコピーして、CSSに貼りつけましょう。

このとき、すでに他のCSSを入力している場合は間違って削除しないように気をつけてください。

CSSを貼りつける

 

CSSを記載したら、『公開』ボタンを押してサイト全体に反映させましょう。

そして、お問い合わせフォームをプレビューしてみると、こんな感じに変更されます。

最初に比べて、かなりデザインがよくなってスッキリしましたね。

お問い合わせフォームをカスタマイズ

 

まとめ

お問い合わせフォーム用のプラグインContact Form 7の使い方について解説しました。

WordPressでサイトを作成した場合は、カンタンにお問い合わせフォームを設置できます。

 

レンタルスペースのサイト制作でオススメのプラグインについては、こちらの記事で紹介しています。

関連記事
レンタルスペースにおすすめなWordPressのプラグイン10選
レンタルスペースにおすすめなWordPressのプラグイン10選

続きを見る

 

 

それでは、また!

  • この記事を書いた人

すぎにい

Webエンジニア / 2017年にド素人でWeb業界へ / 元工場勤務の作業員 / 貯金ゼロで嫁から借金 / WordPressでWeb制作 / 30社以上のサイトを制作した実績 / 最高月収100万円 / 2021年6月からレンタルスペースの経営開始 / 初心者でもわかるレンタルスペースサイトの作り方を発信しています

-Web制作, プラグイン
-,