Contact Form by WPFormsの使い方【SWELL】

こういった悩みにお答えします。

是非、最後までご覧ください。

【SWELL開発者も使用】お問い合わせフォームプラグイン「Contact Form by WPForms」を使えるようにしてきます。

その前に、まずは各々の完成形を紹介します。

お問い合わせフォーム

自動返信メール

例①：サンクスページ

例②：サンクスページ

reCAPTCHA

※赤枠が「reCAPTCHA」になります。

お問い合わせフォームの設置

※赤枠部分に「お問い合わせ」を設置しました。

では、ここから先は、下記の順番で解説していきます。

まずは、お問い合わせフォームプラグイン「Contact Form by WPForms」を導入していきます。

管理画面メニューから、「プラグイン」＞「新規追加」を選択します。

「プラグインの検索…」に「プラグイン名」を入力します。

下記をコピペ用として置いておきますので必要な方はお使い下さい。

Contact Form by WPForms

プラグインが検索にヒットしたら「今すぐインストール」＞「有効化」します。

「有効化」されると下記の画面が表示されます。

これで「Contact Form by WPForms」の導入が完了しました。

それでは、お問い合わせフォームの作成に移ります。

【SWELL開発者も使用】Contact Form by WPFormsの「空白のフォーム」で「お問い合わせフォーム」を作成します。

管理画面メニューから、「WPForms」＞「新規追加」を選択します。

※「最初のフォームを作成」からでもOKです。

下記の画面が表示されるので「行きましょう！」をクリックします。

「フォームビルダーへようこそ」が消えてテンプレートが使用できるようになりました。

「テンプレートを選択」からテンプレートを選んでお問い合わせフォームを作成していきます。

「フォームに名前を付ける」に名前を入力した後、「空白のフォームを作成する」を選択します。

すると、下記の画面が表示されます。

「標準フィールド」から「フィールドを追加」してお問い合わせフォームの大枠を作成します。

以下の順にフィールドを選択します。

大枠は作成できたので、ここからはフィールドをカスタマイズしていきます。

まずは「名前」をカスタマイズします。

「ラベル」と「フォーマット」を変更します。

名前の大枠を選択すると「フィールド設定」＞「一般」へと自動的に移動します。

次に「高度な設定」を行います。

続いては「メール」をカスタマイズします。

「ラベル」と「メールでの確認を有効化」を変更します。

メールの大枠を選択すると「フィールド設定」＞「一般」へと自動的に移動します。

次に「高度な設定」を行います。

続いては「単一行テキスト」をカスタマイズします。

「ラベル」を変更します。

単一行テキストの大枠を選択すると「フィールド設定」＞「一般」へと自動的に移動します。

「件名」は、個人的にあってもなくても良いくらいの感覚なので、あえて「必須」にはしていません。

次に「高度な設定」を行います。

「段落テキスト」をカスタマイズします。

「ラベル」と「必須」を変更します。

段落テキストの大枠を選択すると「フィールド設定」＞「一般」へと自動的に移動します。

「必須」はデフォルトではオフになっているのですが、「お問い合わせ内容」を書いて頂かなければ回答のしようがないので「必須」にしました。

次に「高度な設定」を行います。

今度は「送信ボタン」のカスタマイズを行います。

編集中画面メニューから、「設定」＞「一般」を選択します。

これで、「お問い合わせフォーム」が完成しました。

今回は、まっさらな状態から「お問い合わせフォーム」を作成してきましたが、予め用意された雛形をカスタマイズしたり、フィールドを追加したりして「お問い合わせフォーム」を作成していく方法も紹介します。

【SWELL開発者も使用】Contact Form by WPFormsの「簡単なお問い合わせフォーム」を触ります。

「テンプレートを選択」から「テンプレート」を選択します。

「フォームに名前を付ける」に名前を入力した後、「簡単なお問い合わせフォーム」の「テンプレートを使用」を選択します。

すると、すでに作成された状態の「お問い合わせフォーム」が表示されます。

この状態からカスタマイズしたり、フィールドを追加したりして、お問い合わせフォームを作成していくこともできます。

簡単ではありますが、「簡単なお問い合わせフォーム」の解説は以上になります。

次は「自動返信メール」と「サンクスページ」の設定になります。

【SWELL開発者も使用】お問い合わせフォーム「Contact Form by WPForms」で「自動返信メール」と「サンクスページ」を設定します。

「自動返信メール」を設定します。

編集中画面メニューから、「設定」＞「通知」を選択します。

まずは、「送信先メールアドレス」の設定をします。

※自動返信メールの「送り先」になります。

{admin_email}とは、管理画面メニューの「設定」＞「一般」の「管理者メールアドレス」になります。

デフォルトでは、{admin_email}しか入力されておらず、これだとサイト管理者へしか自動返信メールが届きません。

ですので、「お問い合わせした人」へも届くようにしていきたいと思います。

「スマートタグを表示」を押して、「メールアドレス（必須）」を選択します。

※「メールアドレス（必須）」はメールのカスタマイズ時に付けた「ラベル名」が表示されます。

すると、新たな「送信先」が追加されます。

この追加された{field_id="2"}が「お問い合わせした人」であり、これで双方へ自動返信メールが届くようになりました。

【補足】
{admin_email}と{field_id="2"}の間には、カンマ（ , ）を入力する必要があります。
また、「2」という数字は、お問い合わせフォーム作成時に標準フィールドから「メール」を2番目に挿入したからであって、挿入した順番で変わってきます。

続いては「メール件名」を設定します。

まずは「メール件名」がどこに反映されるのか確認しておきます。

※赤枠の部分になります。

それでは「メール件名」を変更します。

見切れていますが、「【サイト名】お問い合わせありがとうございます（自動返信メール）」と書いています。

下記をコピペ用として置いておきますので必要な方はお使い下さい。

ここにサイト名を入力】お問い合わせありがとうございます（自動返信メール）

続いては「フォーム名」の設定をします。

フォーム名は「サイト名」で良いと思います。

「フォーム名」がどこに反映されたのか確認します。

※赤枠の部分になります。

続いては「送信元メールアドレス」の設定をします。

まずは、赤枠の内容に目を通します。

読んで頂くと分かるのですが「WP Mail SMTPプラグイン」のインストール、または「no-reply@サイトドメイン」を使用する方法が紹介されています。

ただ、この状態でもお問い合わせフォームは機能します。

ですが、「なりすましメール」とみなされます。

自動返信メールが「なりすましメール」とみなされて「迷惑メールフォルダ」に入る可能性も。

ですので「なりすましメール」とみなされない設定にしていきます。

僕の調べた限りでは対応策としては以下の3つがあります。

【注意】僕がGmailを使用している関係で全てGmailの場合の対応策になります🙇

第一選択：「WP Mail SMTPプラグイン」を使用する。

【謝罪🙇】
赤枠の中を見て頂ければ分かるのですが「インストールすることを強くお勧めします！」と書かれていたので、インストールして設定したのですが、上手くいきませんでした。
ですので、解説はできませんが、僕の設定の何かが悪かっただけの可能性は十分に考えられますので「wp mail smtp gmail」や「gmail api」 と検索すると記事がヒットすると思いますので試してみて下さい。

第二選択：「no-reply@サイトドメイン」を使用する。

僕の場合だと赤枠に書かれている「no-reply@hrdyuic.com」になります。

「no-reply@サイトドメイン」を入力することで「注意書き」が消えます。

「no-reply@サイトドメイン」を入力しただけでは消えません。
一旦「保存」して「×」で閉じた後、再度この画面に戻ってくると消えています。

第三選択：レンタルサーバー側でGmail設定する。　※Xserverを使っている人向け

僕は下記の記事を参考に設定をしました。

あわせて読みたい

Gmail?????? | ??󥿥륵???С??ʤ饨?å????????С? ??󥿥륵???С??֥??å????????С??פΤ????ѥޥ˥奢??å????С??ѥͥ?Ǻ????????᡼?륢?ɥ쥹???Gmail?פǻ??Ѥ??뤿?????????ˤĤ??Ƶ??ܤ??Ƥ??ޤ???

ここで設定した「xxx@hrdyuic.com」を赤枠に入力します。

これでも「注意書き」は消えました。

結局のところ、どの設定が良いのか

この後に解説する「返信先メールアドレス」の設定で分かると思いますのでこのまま読み進めてみて下さい。

続いては「返信先メールアドレス」の設定をします。

赤枠に入力したアドレス宛に返信ができるようになります。

まずは「返信先メールアドレス」が反映される場所を確認しておきます。

「返信先メールアドレス」に入力するメールアドレスが返信先になります。

※先ほどの「送信先メールアドレス」の解説の「結局のところ、どの設定が良いのか」の「答え」をここで知ることができます。

以上の内容から自分にあった設定を行って頂ければと思います。

または、返信用として別のメールアドレス（docomo、au、SoftBank、Rakutenなど）を入力することもできます。

ただし、返信元メールアドレスに「no-reply@サイトドメイン」を入力している場合は、管理者宛のメールアドレスへは返信はできません。

最後に「メールメッセージ」の設定をします。

※赤枠の部分になります。

{all_fields}については、後で分かりますので、今は気にしなくて大丈夫です。

「メールメッセージ」を入力しました。

「メールメッセージ」の全文は以下の通りです。

下記をコピペ用として置いておきますので必要な方はお使い下さい。

本メールは、お問い合わせを受け付けた時点で送信される自動返信メールです。

※このメールにはご返信いただけません。

{field_id=”1″} 様

この度は、お問い合わせいただき、ありがとうございます。
内容を確認の上、2〜3日以内に返信させて頂きます。
今しばらくお待ちください。

【お問い合わせ内容】
============================================
{all_fields}
============================================

「メールメッセージ」が反映される場所を確認します。

外側の赤枠が「メールメッセージ」、内側の赤枠が{all_fields}になります。

「通知」の設定は以上になります。

続いては、「確認」の設定を行っていきます。

サンクスページを設定します。

編集中画面メニューから、「設定」＞「確認」を選択します。

下記画像は編集中画面メニューから、「設定」＞「確認」を選択した直後に表示された場面になります。

これでサンクスページを表示させてみます。

下記がその「サンクスページ」になります。

個人的にはダサいなと。

ということで、オリジナルの「サンクスページ」を表示させていきます。

【注意】前もって固定ページでオリジナルのサンクスページを作成しておく必要があります。

では、表示させていきます。

下記がオリジナルの「サンクスページ」になります。

このように自分なりのサンクスページを表示させることもできます。

【SWELL開発者も使用】お問い合わせフォーム「Contact Form by WPForms」で「reCAPTCHA」を設定します。

下記の記事を参考に「reCAPTCHA」の導入に必要な「サイトキー」と「シークレットキー」を取得します。

あわせて読みたい

「reCAPTCHA」の導入方法を詳しく解説【最新のv3に対応】 「reCAPTCHA」に関する情報を知りたいですか？本記事では、最新の「reCAPTCHA v3」や「reCAPTCHA v2」の導入方法および設定から「reCAPTCHAの発動場面の紹介」や「reCAPTCHAとは？」まで解説しています。「reCAPTCHA」の導入方法を知りたい方は非是ご覧ください。

取得が完了したら「Contact Form by WPForms」に紐づけていきます。

管理画面メニューから、「WPForms」＞「設定」を選択します。

設定メニューから、「CAPTCHA」＞「reCAPTCHA」を選択します。

「reCAPTCHA」画面へ移動後、下へスクロールし必要項目を入力していきます。

「お問い合わせフォーム」作成画面へ戻り「reCAPTCHA」を選択します。

下記の画面が表示されるので「OK」をクリックします。

これで「reCAPTCHA」が「有効」になりました。

赤枠が「reCAPTCHA」が有効になっている証拠です。

「保存」を忘れると反映されないので忘れないように「保存」をしときましょう。

最後に「お問い合わせフォーム」設置の一例を紹介して終わります。

【SWELL開発者も使用】お問い合わせフォーム「Contact Form by WPForms」をサイトに設置します。【一例を紹介】

まずは、固定ページで「お問い合わせフォーム」を作成します。

管理画面メニューから、「固定ページ」＞「新規追加」を選択します。

「タイトル」とお問い合わせフォームの「ショートコード」を入力します。

「ショートコード」の場所を確認します。

管理画面メニューから、「WPForms」＞「すべてのフォーム」を選択します。

赤枠が「ショートコード」になります。

【お問い合わせフォームの表示を確認】「プレビュー」＞「新しいタブでプレビュー」を選択します。

「お問い合わせフォーム」が表示されました。

問題なければ「公開」を押して「お問い合わせフォーム」を投稿します。

公開する前に「パーマリンク」の設定を忘れずに。

「固定ページ」＞「概要」を開きます。

僕は「https://hrdyuic.com/contact/」にしています。

では、「お問い合わせフォーム」をサイト内に設置させていきます。

管理画面メニューから、「外観」＞「メニュー」を選択します。

「ライブプレビューで管理」を選択します。

「メニューを作成」からでも設置はできるのですが、リアルタイムでの確認ができないので、僕は「ライブプレビューで管理」推しです。

「メニューを新規作成」をクリックします。

新規メニューが開きます。

「メニュー名」を決めて「グローバルナビ」にチェックを入れて「次」をクリックします。

「項目を追加」をクリックします。

固定ページから「お問い合わせ」を選択します。

選択後に赤線より左側をクリックします（下記画像）。

グローバルナビ（赤枠）が「お問い合わせ」のみになりました。

タブレットやスマホ画面に切り替えて確認することもできます。

スマホアイコンを押しスマホ画面へと切り替えます。

スマホ画面へ切り替えた後「≡」をクリックします。

ドロワーメニューが出現して「お問い合わせフォーム」の設置場所を確認できます。

これで良ければ「公開」をクリックして「公開済み」にします。

実際に反映されているか確認します。

管理画面の「サイト名」をクリックします。

サイトが表示されました。

グローバルナビ（赤枠）が「お問い合わせ」だけなので反映が確認できました。

今回は以上です。