SWELLお問い合わせフォームの作り方｜Contact Form 7で簡単

この記事で解決できる悩み

こんな悩みを解決する記事を用意しました！

ボクの初めてのブログも「30万PV」を超えるメディアに成長しました！

本記事の信頼性

ブログにもコーポレートサイトにも「お問い合わせフォーム」は必須です。

とはいえ、『SWELL』には「お問い合わせフォーム」がないんですよね（WordPressテーマには基本ない）。

そこで、記事の前半で「おすすめのお問い合わせフォームと作り方」を。

後半では「お問い合わせフォームを作ったのに、メールが届かない原因と対処法」について解説します。

本記事を最後まで読むことで、初めてでもお問い合わせフォームを実装できますよ！

ホームページ制作を依頼したい方へ

SWELLのお問い合わせフォームは『Googleフォーム』で充分

さっそく結論です。

ヘボの結論

個人ブログなら『Googleフォーム』で充分。

わざわざプラグインを入れる必要ありません。なぜなら・・・

プラグインを入れなくていい理由

なるべくプラグインを減らすべき。

とはいえ、コーポレートサイト（企業サイト）などプラグインが必要なケースもありますよね？

プラグインなら『Contact Form 7』一択です！

『Googleフォーム』の作り方は別記事をどうぞ👇

関連記事【たった５分】ブログのお問い合わせフォームの作り方【必要です】

SWELL公式のおすすめプラグイン『Contact Form by WPForms』

Contact Form by WPForms

シンプルなお問い合わせフォームが超簡単に設置できるプラグイン。

コンタクトフォーム系は「Contact Form 7」が世界的に人気ですが、私はいつもこっちを使ってます。
推奨プラグインと非推奨・不要・注意すべきプラグインについて

公式サイトでは『Contact Form by WPForms』がオススメされてるので、実際に試してみましたが『Contact Form 7』のほうが優秀でした！

コーポレートサイトでは、入力フォームと送信ボタンのあいだに、ラジオボタン「個人情報の取扱いについて同意する」を実装しますよね？

『Contact Form by WPForms』の無料版では、これができないんです。

とはいえ、デフォルトでは「デザインがあまりにも簡素」。

そこで、コピペだけでオシャレかつシンプルにカスタマイズできる「CSS」も用意していますよ。

これが「デモサイト」のお問い合わせフォームになります。

お問い合わせフォームの機能

コーポレートサイトでは特に「確認画面・サンクスページ・確認メール」の３つは必須です。

ユーザーが「ちゃんと送れているのか」不安になってしまいますからね。

お問い合わせフォームの機能２

デモサイトのフォームは実際に機能するので、挙動を確かめたい方は「送信」してみてくださいね。

※メールアドレスを取得してしまうので、捨てアドレスでどうぞ。

では、実際に作ってみましょう！

関連記事SWELL初心者におすすめのプラグイン10選と設定方法

お問い合わせフォームはEFO（入力フォーム最適化）しよう

EFO（Entry Form Optimization）とは、「入力フォーム最適化」のこと。

SEO（Search Engine Optimization）のお問い合わせフォームVersionですね。

入力フォームを最適化すると

要するに、ジャンジャン問い合わせてもらうための施策のことです。

Contact Form 7の入力フォーム

『Contact Form 7』には「送信ボタン」以外に13個の入力フォームがあります。

とはいえ、入力フォームは最小限に抑えましょう。

メルマガの登録なんかは「メールアドレスだけ」が多いですよね。

お問い合わせフォームを用意すれば、みんな入力してくれるわけじゃないですからね。

入力フォーム最適化９選

他にももっとありますが、厳選しました。

デモサイトのお問い合わせフォームはすべて最適化されています。

では、『Contact Form 7』でお問い合わせフォームを作っていきましょう！

【SWELL】お問い合わせフォームの作り方【Contact Form 7編】

「お問い合わせフォームの作り方」が、次のとおり。

この章のもくじ

「確認画面」と「サンクスページ」の実装には、プラグイン『Contact Form 7 Multi-Step Forms』も必要です。

合わせて「インストール・有効化」しておいてくださいね。

ステップ①「お問い合わせフォーム」を作る

または、Contact Form 7の「設定」をクリック。

「フォーム」内のショートコードを作っていきます。

とはいえ、デフォルトで入ってる「テキスト」や「ショートコード」を編集すればOK。

デモサイトのコードは次のとおり。

右上のCopyをクリック

<label> お名前 <span class="required">必須</span>
[text* your-name autocomplete:name placeholder "バルトロメオ"] </label>

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

<label> 本文 <span class="required">必須</span>
[textarea* your-message placeholder "仲間だなんて…とんでもねェべ"] </label>

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

[radio radio-957 use_label_element default:0 "個人情報の取扱いについて同意する"]

[submit "確認する"]

[multistep multistep-330 first_step "https://swell-demo.hebochans.com/confilm"]

※個人情報の同意は「ラジオボタン」で作りましたが、普通に「承諾確認」でもいいですね。

１〜２行目と12行目を例に解説しますね（必須マークは後述）。

用語集

「radio-957」「multistep-330」の数字は都度変わるので、フォームの「ラジオボタン」「multistep」から同じように設定してくださいね。

確認画面の設定

くわしくは後述するので、今はなんとなく覚えておいてください。

ステップ②「確認メール」を作る

つづいて、「メール」を設定していきます。

まずは、「サイト管理者（あなた）」宛ての確認メールから。

デモサイトには「題名（件名）」の入力がないので、定型文を入れています。

確認メール設定

[_site_admin_email]は「設定 › 一般 › 管理者メールアドレス」に入力したメールアドレスのことです。

管理者メールアドレス以外に送りたい場合は、変更してください。

右上のCopyをクリック

下記内容にて受け付けました。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

お名前：[your-name]
メールアドレス：[your-email]
本文：[your-message]

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

[your-name]などのショートコード部分に、「ユーザーが入力した値」が入ります。

アレンジして使ってくださいね👇️

つづけて、「ユーザー」宛ての確認メールです。

「メール (2) を使用」に✅️を入れてください。

確認メール設定

[your-email]が「ユーザーが入力したメールアドレス」になります。

こちらもアレンジして使ってくださいね👇️

右上のCopyをクリック

[your-name] 様

このたびは、麦わらの一味へお問合せいただきありがとうございます。
下記内容にて受け付けました。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

お名前：[your-name]
メールアドレス：[your-email]
本文：[your-message]

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

麦わらの一味

さいごに「保存」をクリック。

まずは、完成した「お問い合わせフォーム」を埋め込んでみましょう。

ステップ③トップページ or 固定ページに埋め込む

『Contact Form 7』を有効化すると、ブロックを選択できるようになるので「コンタクトフォーム 1」をクリック。

これだけで「お問い合わせフォーム」が実装されます。

とはいえ、死ぬほど簡素ですよね？

ステップ④CSSでおしゃれにカスタマイズする

そこで、「追加CSS」に以下をコピペしてください。

右上のCopyをクリック

/* Contact Form 7 */

/* テキストを太字 */
.wpcf7-form label {
font-weight: bold;
}
/* フォームの下に余白 */
.wpcf7-form p {
margin-bottom: 30px;
}
/* フォームのカスタマイズ */
.wpcf7-text, .wpcf7-email, .wpcf7-tel, .wpcf7-textarea {
width: 100%;
background-color: #fff;
margin-top: 5px;
}
/* ラジオボタンの左の余白 */
.wpcf7-radio span {
margin-left: 0;
}
/* ボタンのカスタマイズ */
.wpcf7-submit, .wpcf7-previous {
display: inline-block;
width: 240px;
padding: 1.2em 1em;
border-radius: 50px;
background: #D53633;/* ここにメインカラー */
font-size: 16px;
font-weight: 700;
letter-spacing: 0.2em;
line-height: 1;
color: #fff!important;
}
/* 必須マーク */
.required {
color: #fff;
background: #D53633;/* ここにメインカラー */
font-size: 0.8em;
padding: 0.3em;
border-radius: 0.5em;
}

これでデモサイトのように「シンプルでいいかんじ」になりますよ。

テキストの横に書いた「<span class="required">必須</span>」に「.required」のCSSが効いています。

では、「確認画面」と「サンクスページ」を作っていきましょう。

どちらも「固定ページ」で用意します。

ステップ⑤固定ページで「確認画面」と「サンクスページ」を作る

表は横にスクロールできます

タイトルはどちらもユーザーの目に入るので、わかりやすくしましょう。

とはいえ、特定のページのタイトル（h1）を非表示にすることもできます。

ではなく、固定ページの編集画面（エディタ）の下にある「カスタムCSS & JS」の「CSS用コード」に書いたコードはそのページにしか適用されないんです。

右上のCopyをクリック

/* H1タイトルを非表示 */
h1 {
display: none;
}

これで、そのページのタイトル（h1）が非表示になりますよ。

URLは後から被らなければ何でもOKです。

右上のCopyをクリック

メールフォームへご記入いただいたメールアドレスへ
お問い合わせ内容をお送りいたしましたので、ご確認をお願いいたします。
お問い合わせ内容を確認の上、３営業日以内にご連絡いたします。

サンクスページの本文もアレンジして使ってくださいね。

完成したら「公開」をクリック。

さいごに、Contact Form 7側で「確認画面」を作っていきます！

ステップ⑥Contact Form 7で「確認画面」を作る

の「複製」をクリック。タイトルを「確認画面」としましょう。

以下をコピペするか、自身の画面を編集してください。

右上のCopyをクリック

<label> お名前
[multiform your-name]</label>

<label> メールアドレス
[multiform your-email]</label>

<label> 本文
[multiform your-message]</label>

[previous "戻る"]

[submit "送信する"]

[multistep multistep-50 last_step send_email "/thanks"]

確認画面には新たに「戻るボタン」を。

「確認する → 送信する」に変更しています。

「multistep-50」の数字は、あなたのものに変えてくださいね。

サンクスページの設定

サンクスページは「first」ではなく「last_step」。

確認画面は「相対パス（/confilm）」だとエラーで機能しないことが多いんです。

とはいえ、サンクスページは「相対パス（/thanks）」でOK。

あとは、さっき作った固定ページの「確認画面」にコレを埋め込むだけ！

※「メール」タブにエラーが出てると思いますが、無視してOK（ボクも出てます）。

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

「確認画面」をクリック。

これでSWELLに「お問い合わせフォーム」を実装できました！

かならず「テスト送信」して、ちゃんと機能するか確認してくださいね。

確認メールをチェック

メールアドレスを分けて、それぞれの「確認メール」をチェックしましょう。

ステップ⑧reCAPTCHAを導入する

reCAPTCHA（リキャプチャ）とは

「消火栓」や「横断歩道」を選ぶ地味に難しいアレですね。

つまり、「私はロボットではありません。」や「階段」が表示されないのに機能してるってこと。

『Googleフォーム』はもちろん、『Contact Form 7』にも実装可能です。

※Googleアカウントが必要になります。

reCAPTCHAの導入手順

まずは、『reCAPTCHA』にアクセスしてください。

上部の「v3 Admin Console」をクリック。

「入力項目」は次のとおり。

入力項目

利用規約に同意して、「送信」をクリック。

Gmailにメールが届くので、「FINISH SETUP」をクリック（しなくても設定できます）。

あなたの「サイトキー」と「シークレットキー」が生成されました。

それぞれコピー

「設定に移動」をクリック。

「アラートをオーナーに送信する」に✅を入れて、「保存」をクリック。

『Contact Form 7』に戻ります。

reCAPTCHAの「インテグレーションのセットアップ」をクリック。

コピーした「サイトキー」と「シークレットキー」をペーストしましょう。

それぞれペースト

「変更を保存」をクリック。

これでお問い合わせフォームにreCAPTCHAを導入できました！

サイトの右下に「reCAPTCHAのロゴ（バッジ）」が表示されていればOK。

reCAPTCHA公式サイト

テスト送信すると、Google reCAPTCHAの公式サイトでデータがとれますよ。

こんなニーズもありますよね。

に以下をコピペしてください。

右上のCopyをクリック

.grecaptcha-badge {
 visibility: hidden;
}

これでreCAPTCHAの「ロゴ（バッジ）」が非表示になりますよ。

※デモサイトは「ちゃんと実装できてるアピール」のために、あえて残しています。

【SWELL】お問い合わせフォームが届かない原因と対処法３選

SWELLでお問い合わせフォームを作ったのに、届かないときの「原因と対処法」は、次のとおり。

この章のもくじ

順番に見ていきましょう！

原因と対処法①Contact Form 7の設定・記述ミス

まずは、単純に『Contact Form 7』の設定・記述ミスです。

と思っても、間違ってるのはいつだって人間のほう（プログラミングあるある）。

届かない原因

いわゆる「ケアレスミス」ですね。

原因①の対処法

確認する箇所は意外と少ないので、もう一度チェックしてみましょう。

原因と対処法②迷惑メールに入っている

メールは届いてるけど、迷惑メールフォルダに入っているケースです。

届かない原因

とはいえ、テスト送信ではうまく行っても、実際は確認できませんよね？

原因②の対処法

【迷惑メールフォルダのご確認をお願いします】

ご入力いただいたメールアドレス宛にメッセージを送信しましたが、迷惑メールフォルダに振り分けられている可能性があります。お手数ですが、迷惑メールフォルダを確認していただき、もし当社からのメールが入っている場合は、「迷惑メールではない」設定に変更していただけますようお願い申し上げます。

【確実にメールを受け取るための設定方法】

今後、当社からのメールを確実に受け取るために、お手数ですが「example@gmail.com」を連絡先や受信許可リストに追加してください。これにより、迷惑メールフォルダに振り分けられることを防ぐことができます。

こういった文言を「サンクスページ」に追記するといいでしょう。

それでも「メールが届かない or 迷惑メールに入ってしまう」なら👇

原因と対処法③SMTP設定の不備

「SMTP（Simple Mail Transfer Protocol）」とは、メールを送信するための通信プロトコルのこと。

届かない原因

そこで「SMTP設定」です。

原因③の対処法

レンタルサーバーやGmail専用のサーバーを経由するので、メール送信が安定するんですね。

SMTP設定のやり方

「メール送信ログ機能」もあるので、「メールが届いたか・送信エラーがあったか」も確認できますよ。

SWELLでお問い合わせフォーム込みのサイト制作承ります！

初心者でも「お問い合わせフォーム」が作れるように解説しました。

とはいえ

SWELLで「コーポレートサイト・ブログサイト」作ります🙌

まるっと込み込み

おしゃれなカスタマイズはもちろんのこと・・・

まずは、当サイトの「お問い合わせフォーム」へどうぞ👇

＼最高33万PVブロガー／

実質SWELLがもらえる！

【Q&A】SWELLのお問い合わせフォームに関するよくある質問

SWELLのお問い合わせフォームに関する「よくある質問（Q&A）」は次のとおり。

この章のもくじ

順番に見ていきましょう！

Q1：SWELL公式のお問い合わせフォームは？

Aこちらが「SWELL公式のお問い合わせフォーム」になります。

とはいえ、「新規会員登録で認証が失敗する場合」のフォームです。

お問い合わせ全般はフォーラム『SWELLERS'』を利用しましょう。

Q2：お問い合わせフォーム以外におすすめのプラグインは？

A次の「８つ」です。

表は横にスクロールできます

ボクは上から「５個目まで」入れています。

くわしくは、別記事にまとめました👇️

関連記事SWELL初心者におすすめのプラグイン10選と設定方法

Q3：SWELL以外におすすめのWordPressテーマは？

A『AFFINGER6』ですね。

とくに「SWELLとAFFINGER6」はよく比較されます。

両刀使いのボクが、13項目で徹底的にくらべてみました（ぶっちゃけてます）👇️

関連記事【比較表あり】AFFINGER6とSWELLどっち？二刀流が解説

関連記事ブログにおすすめのWordPressテーマ５選【無料・有料】

【まとめ】SWELLのお問い合わせフォームは『Contact Form 7』一択！

「SWELLのお問い合わせフォーム」について解説しました。

まとめ

本記事を読めば、初心者でもちょっぴり面倒な「お問い合わせフォーム」を実装できるはず。

どうしてもできなかったら、ヘボまでご連絡くださいね！

『SWELL』を使った「コーポレートサイトの作り方」は別記事をどうぞ👇

関連記事【プロが実演】SWELLを使ったコーポレートサイトの作り方

SWELLを導入したい方へ