SWELLお問い合わせフォームの作り方！コピペで完成【完全版】

SWELLでサイトを作ったあと、多くの人が次につまずくのがお問い合わせフォームの設置です。

プラグインの選び方、細かな設定、デザイン調整、スパム対策、メール到達の問題まで、確認すべき項目は意外と多いもの。特にスマホ対応やデザインまでこだわろうとすると、情報を探すだけで半日が溶けてしまうことも珍しくありません。

この記事を読めば、初心者でも30分以内にSWELLへ実用的なお問い合わせフォームを実装できます。

コピペで使えるショートコード、自動返信メールの定型文、おしゃれにするCSSコード、スパム対策のreCAPTCHA導入手順まで、必要な情報をまるごと用意しました。

SWELLのお問い合わせフォーム設置に必要な情報をひとつの記事にまとめているので、手順を進めてみてください。

SWELLのお問い合わせフォームは「Contact Form 7」が最適

結論からお伝えします。SWELLでお問い合わせフォームを設置するなら「Contact Form 7」を選ぶのが最適解です。

用途別の推奨を整理すると、次のとおり。

SWELL公式は「Contact Form by WPForms」を推奨しています。ただし無料版では「個人情報の取り扱いに同意する」のチェックボックスが実装できません。

ビジネス用途ではこの機能が欠かせないため、実務ではContact Form 7の方が使い勝手で勝ります。

Contact Form 7は完全無料、WordPress公式ディレクトリでのダウンロード数も世界トップクラスの定番プラグイン。SWELLとの相性にも問題はなく、カスタマイズの自由度が高いのが強みです。

個人ブログで問い合わせがほぼ想定されないなら、プラグインを増やさず『Googleフォーム』で済ませるのも有力な選択肢。プラグインは増えるほどサイトが重くなり、アップデート時の不具合リスクも上がるからです。

次の章から、実際のインストールと設定手順を見ていきましょう。

SWELLお問い合わせフォーム作成に必要なプラグイン2つ

SWELLでお問い合わせフォームを設置するために使うプラグインは、主に2つです。

Contact Form 7(必須)

フォーム本体を作成するプラグイン。次の機能を標準で備えています。

個人ブログから企業サイトまで、ほぼすべてのニーズをこれ1つでカバーできます。

Contact Form 7 Multi-Step Forms(任意)

確認画面とサンクスページを追加するためのプラグイン「Contact Form 7 Multi-Step Forms」。

コーポレートサイトでは「入力画面から確認画面を経てサンクスページへ」の3ステップ構成が一般的で、このプラグインがあると再現できます。個人ブログレベルなら必須ではありません。

プラグインのインストール手順

以下の流れで両方をまとめて導入しましょう。

これで準備は完了。次の章から、実際にフォームを作っていきます。

SWELLお問い合わせフォームの作り方5ステップ

Contact Form 7を使ったSWELLお問い合わせフォームの作成手順を、5つのステップに分けて紹介します。どのステップもコピペで完結するので、慣れていない人でも30分あれば完成します。

ステップ1 新規フォームを作成する

WordPress管理画面で次の順にクリックしてください。

タイトルは管理画面内でのみ使われる名称です。「お問い合わせ」や「メインフォーム」など、わかりやすい名前をつけておきましょう。

ステップ2 フォームの入力項目を設定する

「フォーム」タブを開き、デフォルトで入っているコードを次のショートコードに置き換えてください。

<label> お名前 <span class="required">必須</span>
[text* your-name autocomplete:name placeholder "例:山田 太郎"] </label>

<label> メールアドレス <span class="required">必須</span>
[email* your-email autocomplete:email placeholder "例:xxx@example.com"] </label>

<label> お問い合わせ種別 <span class="required">必須</span>
[radio category use_label_element "ご質問" "お仕事のご依頼" "取材・掲載のご依頼" "その他"] </label>

<label> 件名
[text your-subject placeholder "お問い合わせの件名をご記入ください"] </label>

<label> お問い合わせ内容 <span class="required">必須</span>
[textarea* your-message placeholder "お問い合わせ内容を具体的にご記入ください"] </label>

<a href="/privacy-policy/" target="_blank" rel="nofollow noopener">プライバシーポリシー</a>をご覧いただき、個人情報の取り扱いについてご承諾いただいた上で送信ください。

[acceptance acceptance-001] 個人情報の取扱いについて同意する [/acceptance]

[submit "送信する"]

このコードには、ビジネス利用で必要な要素をひととおり盛り込みました。

ショートコードの用語解説

項目を増やしたり減らしたりしたいときは、上のショートコードを参考にアレンジしてください。

ステップ3 管理者宛ての通知メールを設定する

「メール」タブを開くと、サイト管理者宛てに届く通知メールを設定できます。

送信先

初期設定の[_site_admin_email]のままでOK。これはWordPressの「設定→一般」にある管理者メールアドレスを呼び出すコードです。別のアドレスに届けたい場合は、直接メールアドレスを入力しましょう。

題名(コピペ推奨)

【お問い合わせ】[your-subject] / [your-name]様より

メッセージ本文(コピペ推奨)

サイトからお問い合わせがありました。

━━━━━━━━━━━━━━━━━━━━
■ お名前:[your-name]
■ メールアドレス:[your-email]
■ お問い合わせ種別:[category]
■ 件名:[your-subject]
■ お問い合わせ内容:
[your-message]
━━━━━━━━━━━━━━━━━━━━

送信日時:[_date] [_time]
送信元URL:[_url]

このテンプレートなら送信日時と送信元URLも記録されるので、どのページから問い合わせが来たかを把握できます。

ステップ4 ユーザー宛ての自動返信メールを設定する

「メール(2)を使用」のチェックボックスにチェックを入れると、ユーザーへの自動返信メールを設定できる画面が現れます。

送信先

[your-email]のままにしてください。これでユーザーが入力したメールアドレス宛てに自動返信が届きます。

題名(コピペ推奨)

[_site_title] お問い合わせありがとうございます

メッセージ本文(コピペ推奨)

[your-name] 様

このたびは[_site_title]へお問い合わせいただき、誠にありがとうございます。
下記の内容でお問い合わせを受け付けいたしました。

━━━━━━━━━━━━━━━━━━━━
■ お名前:[your-name]
■ メールアドレス:[your-email]
■ お問い合わせ種別:[category]
■ 件名:[your-subject]
■ お問い合わせ内容:
[your-message]
━━━━━━━━━━━━━━━━━━━━

内容を確認のうえ、3営業日以内に折り返しご連絡いたします。
万が一3営業日以上経っても返信がない場合は、メールが届いていない可能性がございます。
お手数ですが、再度お問い合わせいただけますと幸いです。

※本メールは自動送信されております。
※このメールに覚えがない場合は、破棄していただきますようお願いいたします。

-- 
[_site_title]
[_site_url]

自動返信メールがあれば、ユーザーは「ちゃんと送信できた」と安心します。送信後のユーザー体験を高める設定なので、必ず入れておきましょう。

画面下の「保存」をクリックすれば、フォーム作成は完了です。

ステップ5 固定ページに埋め込む

作成したフォームを表示させる固定ページを用意します。

これで固定ページ上にお問い合わせフォームが表示されます。

SWELLお問い合わせフォーム固定ページの必須4設定

お問い合わせフォーム用の固定ページには、SEOとユーザビリティを高めるために押さえておきたい設定が4つあります。見落としがちなポイントなので、公開前にまとめて確認しておきましょう。

設定1 パーマリンクを英字に変更する

日本語のパーマリンクはURLが文字化けし、SNSでシェアされた際に長い英数字の羅列になってしまいます。

推奨するパーマリンク例

• contact
• inquiry
• contact-form

編集画面右側の設定パネルから「URL」欄を開き、英字で入力してください。

設定2 サイドバーを非表示にする

お問い合わせページでは、ユーザーに入力フォームへ集中してもらう必要があります。サイドバーがあると注意が散漫になり、入力の途中で離脱する原因に。

SWELLでは編集画面右の「SWELL設定」から、サイドバーを「非表示」に変更できます。

設定3 広告を非表示にする

お問い合わせページで商品を売る必要はありません。広告が表示されているとユーザーの警戒心を高めてしまい、コンバージョン率を下げる要因になります。

「表示の上書き設定」で以下2項目にチェックを入れてください。

• 目次広告を隠す
• 自動広告を停止する

設定4 アイキャッチ画像を設定する

アイキャッチ画像はSNSでシェアされた際のサムネイルとして使われます。SEO評価でも「ページの完成度が高い」とGoogleに判断される要素のひとつ。

Canvaなどの無料ツールで「お問い合わせ」と書かれた画像を1枚作り、設定しておきましょう。画像サイズは1200×630ピクセルが推奨です。

4つの設定を終えたら、固定ページを公開します。

SWELLお問い合わせフォームを設置すべき3つの場所

固定ページを作っただけでは、ユーザーはお問い合わせページにたどり着けません。サイト内のわかりやすい場所へ導線を用意する必要があります。

設置推奨度の高い順に、3つの場所を紹介します。

設置場所1 フッターメニュー(最優先)

フッターへの設置は、コーポレートサイト・ブログを問わずすべてのサイトで必須です。

フッターに設置する手順

フッターは全ページに表示されるため、どのページを見ているユーザーでも問い合わせ導線にアクセスできます。

設置場所2 グローバルナビゲーション

BtoBサイトや、仕事の依頼を受けたいクリエイターのブログでは、ヘッダーのグローバルナビゲーションに設置すると問い合わせハードルが下がります。

設置方法はフッターメニューと同じ。「メニューの位置」で「グローバルナビ」を選ぶだけです。

個人ブログで問い合わせ優先度が低いなら、ヘッダー設置は不要です。

設置場所3 記事末尾のウィジェット

ブログ記事を最後まで読んでくれた読者は、サイトへの関心度が高いユーザーです。記事末尾に問い合わせへの導線があると、仕事の依頼や取材依頼につながりやすくなります。

[ここに筆者の体験談を追加。実際に記事末尾のフォームから、どのような問い合わせや仕事の依頼が来たかのエピソード]

最低でもフッターメニューと記事末尾の2箇所には必ず設置してください。

次の章では、デフォルトのシンプルなデザインをおしゃれに変えるCSSを紹介します。

SWELLお問い合わせフォームをCSSでおしゃれにカスタマイズ

Contact Form 7のデフォルトデザインは、正直なところシンプルすぎて素っ気ない印象を与えます。コーポレートサイトや収益化ブログでは、フォームの見た目が信頼性やコンバージョン率に直結するため、CSSで軽く装飾しておきたいところ。

以下のCSSを「外観」から「カスタマイズ」の「追加CSS」に貼り付けてください。

/* Contact Form 7 カスタマイズ */

/* ラベルを太字に */
.wpcf7-form label {
  font-weight: bold;
  display: block;
  margin-bottom: 5px;
}

/* フォーム下の余白 */
.wpcf7-form p {
  margin-bottom: 28px;
}

/* 入力フィールド */
.wpcf7-text,
.wpcf7-email,
.wpcf7-tel,
.wpcf7-textarea {
  width: 100%;
  padding: 12px 14px;
  background-color: #fff;
  border: 1px solid #dcdcdc;
  border-radius: 6px;
  margin-top: 6px;
  font-size: 16px;
  transition: border 0.2s;
}

/* フォーカス時のハイライト */
.wpcf7-text:focus,
.wpcf7-email:focus,
.wpcf7-tel:focus,
.wpcf7-textarea:focus {
  border-color: #1e88e5;
  outline: none;
}

/* ラジオボタン周りの余白調整 */
.wpcf7-radio span {
  margin-left: 0;
  margin-right: 18px;
}

/* 送信ボタン */
.wpcf7-submit {
  display: block;
  width: 280px;
  max-width: 100%;
  margin: 20px auto 0;
  padding: 16px 20px;
  border: none;
  border-radius: 50px;
  background: #1e88e5;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #fff !important;
  cursor: pointer;
  transition: opacity 0.2s;
}

.wpcf7-submit:hover {
  opacity: 0.85;
}

/* 必須マーク */
.required {
  display: inline-block;
  padding: 2px 8px;
  margin-left: 6px;
  background: #e53935;
  color: #fff;
  font-size: 0.75em;
  font-weight: bold;
  border-radius: 4px;
  vertical-align: middle;
}

/* エラーメッセージ */
.wpcf7-not-valid-tip {
  color: #e53935;
  font-size: 0.9em;
  margin-top: 4px;
}

ボタンや必須マークの色は#1e88e5や#e53935の部分を変更するだけで、自サイトのメインカラーに合わせられます。

スマホ対応も自動で効くので、CSSは一度入れるだけでOK。余計なプラグインに頼らず、軽量なままフォームを整えられるのが魅力です。

SWELLお問い合わせフォームにreCAPTCHAでスパム対策する

お問い合わせフォームを公開して放置すると、1日数十件から数百件の海外スパムが届くようになります。これを防ぐのがGoogleのreCAPTCHAです。

reCAPTCHA v2とv3の違い

現在使われているreCAPTCHAはv2とv3の2種類。SWELLでの運用には、間違いなくv3がおすすめです。

v3を選べば、ユーザーはreCAPTCHAが動いていることにすら気づかず、スパムだけ自動でブロックされます。

reCAPTCHA v3の導入手順

導入にはGoogleアカウントが必要です。手元に用意したうえで進めてください。

サイトの右下にreCAPTCHAバッジが表示されれば導入完了です。

reCAPTCHAバッジを非表示にしたいとき

右下のバッジが目障りに感じる場合、CSSで非表示にできます。

.grecaptcha-badge {
  visibility: hidden;
}

ただしGoogleの利用規約で、バッジを非表示にするならプライバシーポリシーに「当サイトはreCAPTCHAで保護されています」と明記する必要があります。忘れずに対応してください。

SWELLでお問い合わせフォームが届かないときの原因と対処法3つ

「テスト送信したのにメールが来ない」というトラブルは、SWELLユーザーの間で非常に多い悩みです。原因は大きく3つに分類できます。

原因1 Contact Form 7の設定・記述ミス

最も多いのが、単純な入力ミスや記述ミス。設定画面を丁寧に見直すだけで解決することも珍しくありません。

以下の項目をひとつずつ確認してみてください。

「絶対合ってるのに」と思っていても、実は1文字違っていたというケースが一番多いパターン。本記事のコードをもう一度コピペし直すのが最短の解決策です。

原因2 迷惑メールフォルダに振り分けられている

メール自体は届いているのに、迷惑メールフォルダに入ってしまうケースです。特にGmailは送信元ドメインの認証が厳しく、WordPressから直接送ったメールは迷惑メール扱いされやすい傾向があります。

対処法は次の3つ。

• サンクスページや自動返信メールに「迷惑メールフォルダもご確認ください」の一文を追加する
• WordPress管理者のメールアドレスをGmail以外にも設定しておく
• 次に紹介するSMTP設定を導入して送信の信頼性を上げる

原因3 SMTP設定をしていない(最重要)

WordPressは標準でPHPのメール送信機能を使っています。しかしこの方式は認証されていないため、スパム扱いされる確率が非常に高いのが現実。到達率を改善する根本対策がSMTP設定です。

解決に使うプラグインは「WP Mail SMTP by WPForms」。無料で使え、設定も難しくありません。

SMTP設定の大まかな流れ

もっとも手軽なのはGmail SMTPです。自分のGmailアカウント経由で送信されるため、到達率が劇的に改善します。メールが届かない問題のほとんどは、ここで解決します。

SWELLお問い合わせフォームに関するよくある質問

SWELLのお問い合わせフォームについて、特に質問が多い項目をまとめました。

作業代行・開発ならおまかせください

この記事で扱った作業について、構築から運用まで対応可能です。

参考情報

想定工数 4〜8時間 費用目安 20,000〜40,000円

SWELL導入済みのサイトが対象です。プライバシーポリシーページが未作成の場合は別途対応可能。確認画面・サンクスページを含む3ステップ構成や、サイト全体の制作からのご依頼はお見積りいたします。

対応内容

• Contact Form 7の導入とフォーム作成
• 入力項目・プレースホルダー・必須設定のカスタマイズ
• 管理者宛て通知メールの構築
• ユーザー宛て自動返信メールの構築
• プライバシーポリシー同意チェックボックスの実装
• reCAPTCHA v3によるスパム対策導入
• CSSによるデザイン調整(レスポンシブ対応込み)
• SMTP設定によるメール到達率の改善
• 固定ページへの埋め込みとフッター・ヘッダー設置
• 送信テストと動作確認

まずは状況をお聞かせください。無料で相談対応しています。

合同会社キューブリックが対応します

WEBエンジニア

相談する