広告 WORDPRESS

Contact Form by WPFormsの設定方法&使い方を40枚超の画像付きで徹底解説。自動返信の設定まで【WordPressお問い合わせフォームプラグイン】

Contact Form by WPFormsの設定方法&使い方を40枚超の画像付きで徹底解説。自動返信の設定まで【WordPressお問い合わせフォームプラグイン】

専業ブロガー7年目のあかね猫です

WordPressの人気テーマ「SWELL」でも公式推奨されているプラグイン…

Contact Form by WPForms(WPForms Lite)

の導入手順からおすすめな設定方法&使い方まで、「実際の画像(40枚超)付き」でブログ初心者さん向けに徹底解説していきます

 

「Contact Form by WPForms」は、WordPressブログにおける…

お問い合わせフォーム作成

のための代表的なプラグインです

今回紹介するのは、もちろん「無料版」だよ!
 

Contact Form by WPFormsの設定方法&使い方を1から解説。重要な注意点から自動返信の設定まで【WordPressお問い合わせフォームプラグイン/SWELL向け】 プラグインカード

 

補足

 

今回ご紹介するプラグイン「Contact Form by WPForms」は、インストールしたあとの「インストール済みプラグイン」上では…

 

Contact Form by WPFormsの設定方法&使い方を1から解説。重要な注意点から自動返信の設定まで【WordPressお問い合わせフォームプラグイン/SWELL向け】 top-01

 

↑【WPForms Lite】という別の名称で表記されますが、これは「Contact Form by WPFormsの無料版」という位置づけになります(有料版は【WPForms Pro】です)

 
 

「Contact Form by WPForms」は、設定自体は「いたって簡単」ですが、実際に自分で使ってみて感じた…

重要な注意点

もいくつかありますので、そちらもあわせて徹底解説していきます

 

ということで、今回のステップは4つです🐥

  1. 「Contact Form by WPForms」の導入手順(インストールと有効化)
  2. 「Contact Form by WPForms」の設定に入る前に、固定ページの作成を済ませておこう(※あえてこの作業を先に行います
  3. 「Contact Form by WPForms」のおすすめな設定方法&使い方(お問い合わせフォームのカスタマイズ&自動返信の設定方法)
  4. 「Contact Form by WPForms」のお問い合わせフォームを、固定ページに埋め込む手順
ということで、さっそく見ていこー!
 

関連

 

今回のプラグイン「Contact Form by WPForms」を導入したら、あわせて入れておきたい代表的なセキュリティツール…

Google reCAPTCHA

の登録・設定方法については、別途こちらの記事で徹底解説しています ↓

Google reCAPTCHAの登録&WPFormsへの設定方法を20枚超の画像付きで徹底解説【WordPressお問い合わせフォームのスパム対策】
Google reCAPTCHAの登録&WPFormsへの設定方法を20枚超の画像付きで徹底解説【WordPressお問い合わせフォームのスパム対策】

続きを見る

 

Contact Form by WPFormsの設定方法&使い方を40枚超の画像付きで徹底解説。自動返信の設定まで【WordPressお問い合わせフォームプラグイン】

 

はじめに

 

冒頭でもお伝えした通り、「Contact Form by WPForms」はWordPressの人気テーマ「SWELL」で公式推奨されているプラグインの1つですが…

当該テーマのWordPress環境であれば、100%正常に機能するとは限らない

という点をあらかじめ理解しておく必要があります

 

なぜならプラグインというのは単純に「テーマとの相性」だけの問題ではなく、併用されているそのほかのプラグインやそれらの設定状況、またWordPress本体やテーマ、各種プラグインのバージョンなどによって不具合のリスクというのは変動しうるためです

 

そのため当該プラグインのご使用に際しては、WordPressのデータやファイルなどを必ず事前にバックアップされたうえで、すべてご自身の責任で行ってください

BackWPupのおすすめな設定方法&使い方を約30枚の画像付きで徹底解説【WordPressの自動バックアッププラグイン】
BackWPupのおすすめな設定方法&使い方を約30枚の画像付きで徹底解説【WordPressの自動バックアッププラグイン】

続きを見る

 

ステップ1:WordPressプラグイン「Contact Form by WPForms(WPForms Lite)」の導入手順【インストールと有効化】

WordPress ヘッダー c-02

まず1つ目のステップは、プラグイン「Contact Form by WPForms」の…

導入手順(インストールと有効化)

について

 

WordPress管理画面の左側一覧から…

WordPressプラグインの導入手順(インストールと有効化) 1-01

↑【プラグイン】という項目にカーソルを合わせ、その右側に表示される【新規追加】をクリックしましょう

 

つづいて、画面の右上にある…

WordPressプラグインの導入手順(インストールと有効化) 1-02

↑ こちらの検索フォームに…

Contact Form by WPForms

という文字列をそのまま貼りつけて、その下の検索結果から…

Contact Form by WPFormsの設定方法&使い方を1から解説。重要な注意点から自動返信の設定まで【WordPressお問い合わせフォームプラグイン/SWELL向け】 プラグインカード

↑ このアイコンが目印のプラグイン「Contact Form by WPForms」を探し、右上の…

今すぐインストール

というボタンをクリックします

上の画像例はすでに【有効化】されている状態だから、【今すぐインストール】ボタンは表示されてないよ!
 

【今すぐインストール】ボタンが【有効化】という表示に切り替わったら、つづいて…

有効化

というボタンもクリックしましょう

 

WordPressプラグインの導入手順(インストールと有効化) 1-03

↑ このように「プラグインを有効化しました」というメッセージが表示されたら、プラグインの「インストール&有効化」はもう完了です

今度は肝心の「設定方法」について見ていこう!
 



 

ステップ2:「Contact Form by WPForms(WPForms Lite)」の設定に入る前に、「固定ページの作成」を済ませておこう

WordPress ヘッダー c-03

つづいて2つ目のステップは、「Contact Form by WPForms」の各種設定に入るその前に、お問い合わせフォームに欠かせない…

固定ページ

の作成を、先に済ませておきましょう

一瞬だよ!
 

※なぜ固定ページの作成を「先に済ませておくのか?」については、最後の【ステップ4】のなかで解説しています

 

関連

 

「そもそも固定ページってなに…?」「普通の記事ページとなにが違うの…?」という場合は、こちらでわかりやすく解説しています ↓

WordPress「投稿・固定ページ」の違いとは?使い分けのポイントまとめ【ワードプレスブログ「完全初心者」ガイド/第7章/No.1】
WordPress「投稿・固定ページ」の違いとは?使い分けのポイントまとめ【ワードプレスブログ完全初心者ガイド】

続きを見る

 

WordPress管理画面の左側一覧から…

Contact Form by WPFormsの設定方法&使い方を1から解説。重要な注意点から自動返信の設定まで【WordPressお問い合わせフォームプラグイン/SWELL向け】 1-2-01

↑【固定ページ】にカーソルを合わせて、その右側の【新規追加】をクリックします

 

ここでは、現在のWordPress標準エディタである【グーテンベルグ=ブロックエディタ】の前提で解説していきます(SWELLユーザーの方はこちらでOKです)

もしも【クラシックエディタ】に変更されている場合は、少し下側に専用の解説がありますのでそちらをご覧ください

 

関連

 

「グーテンベルグとクラシックエディタってなに…?」という場合は、こちらをどうぞ ↓

WordPressクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで初心者向けに徹底ガイド【2023年】
WordPressクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで初心者向けに徹底ガイド

続きを見る

 

固定ページの作成画面が開いたら、まずは一番上に表示されている…

Contact Form by WPFormsの設定方法&使い方を1から解説。重要な注意点から自動返信の設定まで【WordPressお問い合わせフォームプラグイン/SWELL向け】 1-2-02

↑ こちらの記事タイトル欄に、今回作成するお問い合わせフォームの「ページタイトル」となる任意の名称を入力しましょう

 

このページタイトルについては、特にこだわりがなければ見本画像のように…

お問い合わせフォーム

という名称が無難でおすすめです

 

つづいて、画面の右側に表示されている…

Contact Form by WPFormsの設定方法&使い方を1から解説。重要な注意点から自動返信の設定まで【WordPressお問い合わせフォームプラグイン/SWELL向け】 1-2-03

↑【URL】という欄をクリックし、すぐ下に表示される【パーマリンク】という入力欄で、お問い合わせフォームの「ページURL」となる…

https://●●●●●.com/~~~~~

このなかの、 ~~~~~ にあたる部分を、任意の文字列に設定します

 

このパーマリンクも、特にこだわりがなければ見本画像のように…

contact

という文字列が無難でおすすめです

 

注意

 

Webページの「パーマリンク」というのは、初期状態の日本語(例:お問い合わせフォーム)のままページを【公開】してしまうと、そのURLがコピペやシェアされた際に…

文字化け

してしまうので、【公開】する前に英数字(例:contact)に直すのが基本です

 

ということで、パーマリンクを変更できたら、右上に表示されている…

Contact Form by WPFormsの設定方法&使い方を1から解説。重要な注意点から自動返信の設定まで【WordPressお問い合わせフォームプラグイン/SWELL向け】 1-2-04

↑ こちらの【公開】ボタンをクリックしてから、最後に…

Contact Form by WPFormsの設定方法&使い方を1から解説。重要な注意点から自動返信の設定まで【WordPressお問い合わせフォームプラグイン/SWELL向け】 1-2-05

↑ 左上の【WordPressアイコン】をクリックして、WordPress管理画面のTOPへと戻ります

 

注意

 

【公開】ボタンをクリックせずに、【下書き保存】状態のまま作業を進めてしまうと、最後の【ステップ4】で行う…

  • 固定ページへの埋め込み

の際に、この固定ページが埋め込み先として選択できない(検証済みです)ため、ここで忘れずに【公開】しておきましょう

 

補足

 

「クラシックエディタ」をご利用の場合は、同じくWordPress管理画面の左側一覧から…

【固定ページ】→【新規追加】

をまずはクリックしたうえで…

 

Contact Form by WPFormsの設定方法&使い方を1から解説。重要な注意点から自動返信の設定まで【WordPressお問い合わせフォームプラグイン/SWELL向け】 1-2-06

 

↑ このように、左上の入力欄で…

  • ページタイトル(例:お問い合わせフォーム
  • パーマリンク(例:contact

をそれぞれ入力してから、右上の【公開】をクリックすればOKです

 

なお、パーマリンクの入力欄はページタイトルを入力すると出現しますが、もしも表示されない場合は、右上の【下書き保存】を一旦クリックすると確実に表示させられます

 

これで、「Contact Form by WPForms」の設定前に行う下準備については完了です🐥

つづいて本題の【ステップ3】へ!
 

ステップ3:「Contact Form by WPForms(WPForms Lite)」のおすすめな設定方法&使い方【お問い合わせフォームのカスタマイズ&自動返信の設定】

WordPress ヘッダー b-03

3つ目のステップは、プラグイン「Contact Form by WPForms」の…

おすすめな設定方法&使い方

について

 

具体的には、「Contact Form by WPForms」を使った…

  • お問い合わせフォームの基本的なカスタマイズ設定方法
  • いざお問い合わせが来た際の、「自動返信」の設定方法

という2点についてです

本当に難しくないのでご安心を!
 

WordPress管理画面の左側一覧から…

Contact Form by WPFormsの設定方法&使い方を1から解説。重要な注意点から自動返信の設定まで【WordPressお問い合わせフォームプラグイン/SWELL向け】 1-3-a-01

↑【WPForms】にカーソルを合わせて、その右側の【新規追加】をクリックし…

Contact Form by WPFormsの設定方法&使い方を1から解説。重要な注意点から自動返信の設定まで【WordPressお問い合わせフォームプラグイン/SWELL向け】 1-3-a-02

↑ 次の画面で【行きましょう!】というボタンをクリックします

 

つづいて…

Contact Form by WPFormsの設定方法&使い方を1から解説。重要な注意点から自動返信の設定まで【WordPressお問い合わせフォームプラグイン/SWELL向け】 1-3-b-01

↑【フォームに名前を付ける】という項目で…

お問い合わせフォーム

と入力し…

Contact Form by WPFormsの設定方法&使い方を1から解説。重要な注意点から自動返信の設定まで【WordPressお問い合わせフォームプラグイン/SWELL向け】 1-3-b-02

↑ 右上の【完了】ボタンをクリックします

 

次に…

Contact Form by WPFormsの設定方法&使い方を1から解説。重要な注意点から自動返信の設定まで【WordPressお問い合わせフォームプラグイン/SWELL向け】 1-3-c-01

↑【テンプレートを選択】という項目で…

簡単なお問い合わせフォーム

というテンプレートを選択してから…

Contact Form by WPFormsの設定方法&使い方を1から解説。重要な注意点から自動返信の設定まで【WordPressお問い合わせフォームプラグイン/SWELL向け】 1-3-c-02

↑【テンプレートを使用】というボタンをクリックしましょう

 

すると…

Contact Form by WPFormsの設定方法&使い方を1から解説。重要な注意点から自動返信の設定まで【WordPressお問い合わせフォームプラグイン/SWELL向け】 1-3-d-01

↑ このような設定画面に切り替わるので、こちらでお問い合わせフォームの各種項目を任意の内容にカスタマイズしていきます

 

まずは一番上の…

Contact Form by WPFormsの設定方法&使い方を1から解説。重要な注意点から自動返信の設定まで【WordPressお問い合わせフォームプラグイン/SWELL向け】 1-3-d-02

↑【名前】という項目をクリックしましょう

クリックすると、編集画面が開くよ!
 

参考までに、自分がよく使っているおすすめなカスタマイズ設定は…

Contact Form by WPFormsの設定方法&使い方を1から解説。重要な注意点から自動返信の設定まで【WordPressお問い合わせフォームプラグイン/SWELL向け】 1-3-d-03

↑ こちらの通りで、具体的には…

  • 【ラベル】 → お名前
  • 【必須】 → ON
  • その他の項目 → そのまま

という形です

【必須】という項目を有効にすることで、(お問い合わせを送信してもらうときに)名前の入力が必須になるよ!
 

つづいて…

Contact Form by WPFormsの設定方法&使い方を1から解説。重要な注意点から自動返信の設定まで【WordPressお問い合わせフォームプラグイン/SWELL向け】 1-3-d-04

↑【メール】という項目をクリックして、同じように編集画面を開きましょう

 

【メール】のおすすめなカスタマイズ設定は…

Contact Form by WPFormsの設定方法&使い方を1から解説。重要な注意点から自動返信の設定まで【WordPressお問い合わせフォームプラグイン/SWELL向け】 1-3-d-05

↑ こちらの通りで、具体的には…

  • 【ラベル】 → メールアドレス
  • 【必須】 → ON
  • その他の項目 → そのまま

という形です

 

最後に…

Contact Form by WPFormsの設定方法&使い方を1から解説。重要な注意点から自動返信の設定まで【WordPressお問い合わせフォームプラグイン/SWELL向け】 1-3-d-06

↑【コメントまたはメッセージ】という項目をクリックして、同様に編集画面を開きましょう

 

【コメントまたはメッセージ】のおすすめなカスタマイズ設定は…

Contact Form by WPFormsの設定方法&使い方を1から解説。重要な注意点から自動返信の設定まで【WordPressお問い合わせフォームプラグイン/SWELL向け】 1-3-d-07

↑ こちらの通りで、具体的には…

  • 【ラベル】 → 本文メッセージ
  • 【必須】 → ON
  • その他の項目 → そのまま

という形です

 

最終的に…

Contact Form by WPFormsの設定方法&使い方を1から解説。重要な注意点から自動返信の設定まで【WordPressお問い合わせフォームプラグイン/SWELL向け】 1-3-d-08

↑ このようなお問い合わせフォームになりました

もちろんあとから変更することも可能だよ!
 

ここまでできたら、左上に表示されている…

Contact Form by WPFormsの設定方法&使い方を1から解説。重要な注意点から自動返信の設定まで【WordPressお問い合わせフォームプラグイン/SWELL向け】 1-3-d-09

↑【完了】ボタンをクリックします

 

補足

 

作業を中断された場合や、画面を一度閉じてしまった場合は、WordPress管理画面の左側一覧から…

【WPForms】→【すべてのフォーム】

をクリックしてから…

お問い合わせフォーム

という項目をクリックし、そのなかから…

 

Contact Form by WPFormsの設定方法&使い方を1から解説。重要な注意点から自動返信の設定まで【WordPressお問い合わせフォームプラグイン/SWELL向け】 1-3-d-10

 

↑ 左側一覧の【フィールド】タブを開き、上部の【フィールド設定】→【一般】タブを開くことで、設定を再開することができます

 
 

すると、今度は…

Contact Form by WPFormsの設定方法&使い方を1から解説。重要な注意点から自動返信の設定まで【WordPressお問い合わせフォームプラグイン/SWELL向け】 1-3-e-01

↑ こちらの【通知】という設定画面に切り替わり、ここでは実際にお問い合わせが送信されたときの…

通知メールの形式

をカスタマイズすることができます

 

またこの【通知】という設定エリアでは、WordPress管理者である「自分自身への通知」はもちろんのこと、それに加えて…

お問い合わせを送信してくれたユーザー(ブログ読者さん)

に対しても、「メッセージは無事送信されました」という旨の確認メールが…

自動返信

されるように設定することも可能なので、あわせて解説していきますね(簡単です!)

お問い合わせフォームに「自動返信」を設定しておくのは、わりと定石だよ!
 

まず、前半(上側)部分のおすすめな設定については…

Contact Form by WPFormsの設定方法&使い方を1から解説。重要な注意点から自動返信の設定まで【WordPressお問い合わせフォームプラグイン/SWELL向け】 1-3-e-02

↑ こちらの通りで、はじめに左上の【通知を有効化】を「ON」にされたうえで…

  • 【送信メールアドレス】 → 別途このあと解説します
  • 【メール件名】 → お問い合わせを受け付けいたしました
  • 【送信メールアドレス】 → 別途このあと解説します
  • その他の項目 → そのまま

という形です

 

まず【送信メールアドレス】については、デフォルトの状態だと…

{admin_email}

というタグだけが入っていますが、このままだと…

WordPress管理者メールアドレス

として設定されているメールアドレス宛に、「お問い合わせの通知メール」が来ることになります

つまりWordPressを開設(インストール)したときに、自分で設定したメールアドレスのこと!
 

補足

 

「WordPress管理者メールアドレス」の設定状況については、WordPress管理画面の左側一覧から…

【ユーザー】→【プロフィール】

の設定画面にて、いつでも確認することができます

 

ですが、この「WordPress管理者メールアドレス」というのは、本来…

  • WordPressからの、さまざまなお知らせ(例:WordPressのバージョン更新通知)を受け取る
  • WordPress管理画面へのログインの際に、ユーザー名の代わりに「ログインID」にもなる

といった役割のものであって、つまり多くのWordPressユーザーさんは、この管理者メールアドレスを第三者には知られたくないはずですよね

 

なので、ここでは…

Contact Form by WPFormsの設定方法&使い方を1から解説。重要な注意点から自動返信の設定まで【WordPressお問い合わせフォームプラグイン/SWELL向け】 1-3-e-03

↑ こちらの赤線部分のように、「WordPress管理者メールアドレス」とは異なる

お問い合わせ専用のメールアドレス

を貼りつけておくのがおすすめです

つまり、「第三者に知られてもOK」なメアドということ!
 

さらに、その右側には…

Contact Form by WPFormsの設定方法&使い方を1から解説。重要な注意点から自動返信の設定まで【WordPressお問い合わせフォームプラグイン/SWELL向け】 1-3-e-04

↑ このように…

{field_id="1"}

というタグを貼りつけておくことで、お問い合わせの送信時に入力してもらった相手方のメールアドレス宛にも、送信完了の確認メールが…

自動返信

されるように設定できます

 

なお、この {field_id="1"} というタグを貼りつける際には…

Contact Form by WPFormsの設定方法&使い方を1から解説。重要な注意点から自動返信の設定まで【WordPressお問い合わせフォームプラグイン/SWELL向け】 1-3-e-05

↑ このように ,(半角カンマ) の記号を、「メールアドレス」と「タグ」の間に必ず入れましょう

 
実際に検証してみたけど、この「カンマ」を間に入れないと、さっきの「自動返信」が機能しなかったよ!
 

※自分は画像例のように、「半角カンマ」のあとに「半角スペース」も一応入れています

 

また【送信メールアドレス】の項目についても、初期状態では…

{admin_email}

というタグが入っていますが、このままだと大切な「WordPress管理者メールアドレス」が相手方に漏洩しかねないので…

Contact Form by WPFormsの設定方法&使い方を1から解説。重要な注意点から自動返信の設定まで【WordPressお問い合わせフォームプラグイン/SWELL向け】 1-3-e-06

↑ このように、第三者に知られても大丈夫な…

お問い合わせ専用のメールアドレス

に差し替えておくのがおすすめです

【送信メールアドレス】に設定したメールアドレスと同じで、基本はOKだよ!
 

つづいて、後半(下側)部分のおすすめな設定については…

Contact Form by WPFormsの設定方法&使い方を1から解説。重要な注意点から自動返信の設定まで【WordPressお問い合わせフォームプラグイン/SWELL向け】 1-3-e-07

↑ こちらの通りで、具体的には【メールメッセージ】の項目を…

お問い合わせありがとうございます。

※すべてのお問い合わせに返信できるとは限りませんのでご了承ください。

上記のようなメッセージに変更しています

 

これにより、お問い合わせが送信された際の「通知メール」が…

Contact Form by WPFormsの設定方法&使い方を1から解説。重要な注意点から自動返信の設定まで【WordPressお問い合わせフォームプラグイン/SWELL向け】 1-3-e-08

↑ このように表示されます

 

ということで、ここまでできたら右上の…

Contact Form by WPFormsの設定方法&使い方を1から解説。重要な注意点から自動返信の設定まで【WordPressお問い合わせフォームプラグイン/SWELL向け】 1-3-e-09

↑【保存】ボタンをクリックしましょう

左上の【完了】ボタンは、まだ押さないようにしよう!
 

今度は、「Contact Form by WPForms」設定画面の左側一覧から…

Contact Form by WPFormsの設定方法&使い方を1から解説。重要な注意点から自動返信の設定まで【WordPressお問い合わせフォームプラグイン/SWELL向け】 1-3-f-01

↑【設定】→【確認】タブをクリックします

 

すると…

Contact Form by WPFormsの設定方法&使い方を1から解説。重要な注意点から自動返信の設定まで【WordPressお問い合わせフォームプラグイン/SWELL向け】 1-3-f-02

↑ このような【確認】という設定画面が開きますが、こちらではお問い合わせを送信された際に(メールではなく)ブログ画面上に表示されるメッセージ内容を設定できます

 

で、おすすめな設定方法としては…

Contact Form by WPFormsの設定方法&使い方を1から解説。重要な注意点から自動返信の設定まで【WordPressお問い合わせフォームプラグイン/SWELL向け】 1-3-f-03

↑ こちらの通りで、まず【確認メッセージ】という項目に…

お問い合わせありがとうございます。

※すべてのお問い合わせに返信できるとは限りませんのでご了承ください。

上記のようなメッセージを設定し、そのほかの項目については…

  • 【確認メッセージまで自動的にスクロールする】 → OFF
  • そのほかの項目 → そのまま

という形に設定しています

 

これにより、実際にお問い合わせが送信された際に、ブログ画面上には…

Contact Form by WPFormsの設定方法&使い方を1から解説。重要な注意点から自動返信の設定まで【WordPressお問い合わせフォームプラグイン/SWELL向け】 1-3-f-04

↑ このような形でメッセージが表示されます

 

ここまでできたら、また右上の…

Contact Form by WPFormsの設定方法&使い方を1から解説。重要な注意点から自動返信の設定まで【WordPressお問い合わせフォームプラグイン/SWELL向け】 1-3-f-05

↑【保存】ボタンをクリックしてから…

Contact Form by WPFormsの設定方法&使い方を1から解説。重要な注意点から自動返信の設定まで【WordPressお問い合わせフォームプラグイン/SWELL向け】 1-3-g-01

↑ 左側の【設定】→【通知】を開き…

Contact Form by WPFormsの設定方法&使い方を1から解説。重要な注意点から自動返信の設定まで【WordPressお問い合わせフォームプラグイン/SWELL向け】 1-3-g-02

↑ 左上の【完了】ボタンをクリックしましょう

 

これでお問い合わせフォームの各種設定は完了となり、あとは最初に作成した「固定ページ」内に埋め込んでいくだけです🐥

あともうひと頑張り!
 

ステップ4:「Contact Form by WPForms(WPForms Lite)」のお問い合わせフォームを、固定ページに埋め込む手順

WordPress ヘッダー b-04

さきほどまでの設定が完了すると…

Contact Form by WPFormsの設定方法&使い方を1から解説。重要な注意点から自動返信の設定まで【WordPressお問い合わせフォームプラグイン/SWELL向け】 1-4-01

↑【ページに埋め込む】というポップアップ画面が表示されるので、今回の【ステップ2】で「固定ページの作成」を済ませている場合は…

既存のページを選択

をクリックしましょう

 

補足

 

作業を中断された場合や、画面を一度閉じてしまった場合は、WordPress管理画面の左側一覧から…

【WPForms】→【すべてのフォーム】

を開き、そのなかの…

お問い合わせフォーム

という項目をクリックしてから、右上に表示されている…

 

Contact Form by WPFormsの設定方法&使い方を1から解説。重要な注意点から自動返信の設定まで【WordPressお問い合わせフォームプラグイン/SWELL向け】 1-4-02

 

↑【埋め込む】というボタンをクリックすればOKです

 
 

注意

 

この「埋め込み」というステップで、【既存のページを選択】ではなく…

新規ページを作成

を選択された場合、固定ページを「自動で作成」することができます

 

ただしこの方法を試してみたところ、作成された固定ページが【下書き保存】ではなく勝手に…

【公開】

の状態になってしまったので、この【新規ページを作成】という方法はおすすめしません

 

なお、ページが勝手に【公開】になることのデメリットは下記の通りです ↓

  • パーマリンク(そのページのURL)を設定しないまま、ページが【公開】されてしまう
  • 具体的には、パーマリンク末尾の日本語(例:お問い合わせフォーム)のところを、英語(例:contact)に直さないまま【公開】することになってしまう
  • この「日本語を含んだパーマリンク」というのは、そのページURLがコピペやシェアされた際に文字化けしてしまうので、「英語に直す」のが基本
  • 一度【公開】したページのURL(パーマリンク)を「あとから変更」してしまうと、リダイレクトという面倒な処理が生じたりするので「あとから変更はしない」のが定石

パーマリンクについては、こちらの記事で1からわかりやすく解説しています ↓

WordPress「パーマリンク(スラッグ)設定方法&文字化け対策」記事ごと編【ワードプレスブログ「完全初心者」ガイド/第7章/No.3】
WordPress「パーマリンク(スラッグ)設定方法&文字化け対策」記事ごと編【ワードプレスブログ完全初心者ガイド】

続きを見る

 

ということで、【既存のページを選択】ボタンをクリックしたら…

Contact Form by WPFormsの設定方法&使い方を1から解説。重要な注意点から自動返信の設定まで【WordPressお問い合わせフォームプラグイン/SWELL向け】 1-4-03-a

↑ このように【フォームを埋め込むページを選択します】という画面になるので、事前に作成しておいた…

お問い合わせフォーム

を選択して、【行きましょう】ボタンをクリックします

 

補足

 

「作成したはずの固定ページ(お問い合わせフォーム)が、なぜか選択欄に表示されない…」という場合は、その固定ページが…

公開

せずに…

下書き保存

のままになってしまっていないか確認してみてください。公開済みのページでないと、こちらの選択欄には反映されません(検証済み)

 

ちなみに、ここまでの作業に一定の時間以上かかっていた場合…

Contact Form by WPFormsの設定方法&使い方を1から解説。重要な注意点から自動返信の設定まで【WordPressお問い合わせフォームプラグイン/SWELL向け】 1-4-03-b

↑ このようなアンケート画面が表示されますが、急ぎの場合は右上の【×】をクリックすればOKです

 

つづいて…

Contact Form by WPFormsの設定方法&使い方を1から解説。重要な注意点から自動返信の設定まで【WordPressお問い合わせフォームプラグイン/SWELL向け】 1-4-04-a

↑ 左上に表示されている【+】ボタンをクリックし…

Contact Form by WPFormsの設定方法&使い方を1から解説。重要な注意点から自動返信の設定まで【WordPressお問い合わせフォームプラグイン/SWELL向け】 1-4-04-b

↑ 左側に表示されているメニュー一覧から、こちらの【WPForms】を選択して…

Contact Form by WPFormsの設定方法&使い方を1から解説。重要な注意点から自動返信の設定まで【WordPressお問い合わせフォームプラグイン/SWELL向け】 1-4-04-c

↑ 画面中央の【フォーム選択】から、【お問い合わせフォーム】を選択しましょう

 

これで、今回作成した「お問い合わせフォーム」が…

Contact Form by WPFormsの設定方法&使い方を1から解説。重要な注意点から自動返信の設定まで【WordPressお問い合わせフォームプラグイン/SWELL向け】 1-4-05-a
 

↑ このように表示されるので、最後に…

Contact Form by WPFormsの設定方法&使い方を1から解説。重要な注意点から自動返信の設定まで【WordPressお問い合わせフォームプラグイン/SWELL向け】 1-4-05-b

↑ 右上の【更新】ボタンをクリックして、作業は完了となります🐥(画像例は【グーテンベルグ】の場合です)

ここまでお疲れさま!
 

補足

 

作成した「お問い合わせフォーム」固定ページのリンクを…

ブログ上の任意のエリアに設置するやり方

については、使用されている「WordPressテーマ」によって若干異なります

 

「SWELL」であれば、なにもしなくてもヘッダー(=サイトの上部)エリアに設置されますが、参考までに「AFFINGER6」における設置方法はこちらをどうぞ ↓

AFFINGER6「ヘッダー・フッターメニュー」の作り方。スマホ用も【ワードプレスブログ完全初心者ガイド/第6章/No.4】
【2023年】AFFINGER6「ヘッダー・フッターメニュー」の作り方。スマホ用も【ワードプレスブログ完全初心者ガイド/第6章/No.4】

続きを見る

 

関連

 

今回のプラグイン「Contact Form by WPForms」を導入したら、あわせて入れておきたい代表的なセキュリティツール…

Google reCAPTCHA

の登録・設定方法については、別途こちらの記事で徹底解説しています ↓

Google reCAPTCHAの登録&WPFormsへの設定方法を20枚超の画像付きで徹底解説【WordPressお問い合わせフォームのスパム対策】
Google reCAPTCHAの登録&WPFormsへの設定方法を20枚超の画像付きで徹底解説【WordPressお問い合わせフォームのスパム対策】

続きを見る

 

人気記事

 
 

各章のTOPページを【ブックマーク】などしておくと、迷わずスムーズに進められます

ワードプレスブログ「完全初心者」ガイド!

全8章の「総合TOP」ページです

ワードプレスブログ「完全初心者」ガイド

 
プロフィールカード bg-01
プロフィールカードアイコン main-02

あかね猫

専業ブロガー7年目 / 元アパレル(歴10年)/ 2024年からYouTubeも本格的に始めました!(旅行系チャンネル)

少しでも参考になりましたら、
\ シェアしていただけると励みになります!! /

-WORDPRESS