☞ 初心者にオススメの便利ツール12選

SWELLでお問い合わせフォームを設置する方法【WPForms】

当ページのリンクには広告が含まれています。
記事タイトルとイラスト画像
  • URLをコピーしました!

今回は、

「Contact Form by WPForms」で、お問い合わせフォームを設置したいなぁ…

そんな要望にお応えします。

自己紹介
この記事を読んで欲しい人
  • WordPressテーマ「SWELL」を使用中の人
  • プラグイン「Contact Form by WPForms」を使いたい人
  • ブログ初心者でお問い合わせフォームの作成に悩んでいる人

いきなりですが、最初に結論からお伝えしておきますね。

SWELL開発者の了さんがオススメする

プラグイン「Contact Form by WPForms」を利用すれば、初心者でも簡単に「お問い合わせフォーム」を設置可能です。

お問い合わせフォームを設置することで、ユーザーからのフィードバックを気軽に受けられるようになります。

初心者ブロガーさんにとっては難易度高めに感じるかもしれませんが、画像多めで詳しく解説していくので、ぜひチャレンジしてみてください。

それでは、早速参りましょう。

目次

SWELLのお問い合わせフォームについて

ブログを開設したら、個人のブログ運営であってもお問い合わせフォームは設置しておきましょう。

ユーザーさんからの質問や感想が届いたり、企業さんからお仕事の依頼を頂いたりするなど、可能性が広がります。

最終的に設置する1番の理由は、

トム

サイトを訪れたユーザーさんに対する安心感に繋がるためです。

サイト運営者への連絡先の有無で、サイトの信頼感は間違いなくアップします。

本記事では、SWELL開発者の了さんがおすすめしている「Contact Form by WPForms」でお問い合わせフォームを設置していきます。

SWELL公式サイトより↓

Contact Form by WPForms

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

コンタクトフォーム系は「Contact Form 7」が世界的に人気ですが、私はいつもこっちを使ってます。

https://swell-theme.com/basic-setting/4688/

すごく簡単なので、ぜひ一緒に作業していきましょう。

工程1:「Contact Form by WPForms」をインストール

まずは、最初に

トム

プラグイン「Contact Form by WPForms」をインストールしていきます。

STEP
Word Press管理画面から「プラグイン」>「新規追加」をクリック
STEP
右上の検索窓に「WPForms」と入力
STEP
Contact Form by WPForms枠内の「今すぐインストール」→「有効化」をクリック

以上で、

トム

インストール完了です。

次は「お問い合わせフォーム」を作成していきます。

工程2:お問い合わせフォームを作成する

設置までの流れを図解(工程2)

《工程2

  • テンプレートを使用して作成
  • 標準フィールドの追加・編集

テンプレートを使用して作成

STEP
「WPFormsにようこそ」の画面から「最初のフォームを作成」をクリック

上記の画面を消してしまった場合は、Word Press管理画面の「WPForms」>「新規追加」から入れます。

STEP
右下に「WPFormsチャレンジ」が表示された場合は「停止」をクリック
トム

時間に焦らされるので停止しておきましょう。

STEP
テンプレートの選択画面から「簡単なお問い合わせフォーム」を選んで「テンプレートを使用」をクリック
STEP
表示されたテンプレートでOKなら、右上の「保存」をクリックして先へ

標準フィールドの追加・編集

ここからは、先ほど表示された「簡単なお問い合わせフォーム」に、新たなフィールドを追加して編集していきます。

トム

今回は「題名(または件名)」を追加・編集しますね。

STEP
画面左側の「フィールド」>「フィールドを追加」>「単一行テキスト」をクリック
STEP
右画面の「単一行テキスト」の枠をドラッグして移動

今回は、コメントまたはメッセージの上に持っていきますが、好きな位置へ配置してください。

STEP
単一行テキストの枠をクリック

クリックすると、画面左側にフィールド設定が表示されます。

STEP
フィールド設定のラベル欄に「題名(件名)」と入力
STEP
画面右側「保存」をクリック
トム

お問合せフォームの完成です。

工程3:お問い合わせフォームをサイトに表示

《工程3

  • 固定ページを作成
  • 固定ページをサイトに表示
  • テスト送信

固定ページを作成

STEP
簡単なお問い合わせフォームの右上部分にある「埋め込む」をクリック
STEP
Word Pressの固定ページに移動

画面右のURLが日本語表記になっている場合は、英数字に編集していきます。

STEP
URLをクリックしてパーマリンクに「contact」と入力
STEP
右上の「公開」をクリック
トム

固定ページの完成です。

このままの状態ではユーザーさんの目に留まらないので、サイトに表示させていきましょう

固定ページをサイトに表示

今回は、作成した「お問い合わせフォーム(固定ページ)」をサイト下のフッター部分に表示させます。

こんな感じで表示しますね↓

トム

順番にやっていきましょう。

STEP
Word Press管理画面「外観」>「メニュー」をクリック
STEP
メニュー構造のメニュー名に「フッター」と入力してエンターを押す
STEP
画面左側の「お問い合せ」にチェックを入れて、「メニューに追加」をクリック
STEP
画面右側のメニュー設定の「フッター」にチェックを入れて、右下の「メニューを保存」をクリック

以上で、

トム

お問い合わせフォーム」の設置作業は終了になります。

もし、プラグインが上手く表示されない場合は、下記の記事を参考して下さい。

最後に、テスト送信をして終わりましょう。

「お問い合わせ」からテスト送信

自分のサイトに設置した「お問い合わせ」をクリックして、必要な項目を入力したら送信してみます。

送信後に下記のメッセージが表示されれば問題ありません。

それでは、

トム

最後に「スパム対策」をやって終わりますね。

スパム対策(reCAPTCHAの設定)

お問い合わせフォームからスパムメールが届かないように、しっかりと対策をしていきましょう。

スパムメールとは⇩

受信者が望んでいなくても、一方的に送信されてくるメールのことをスパムメールと言います。簡単に言うと「迷惑メール」と同様の意味です。

以前アメリカで缶詰の商品名である「SPAM」を連呼するCMがありました。何度も送られる宣伝メールを「スパムメール」と呼ぶようになったことが、名前の由来です。

スパムメールが送られる原因は、悪意を持った送信者にメールアドレスを知られることです。送信者が何らかの経路でメールアドレスを入手したり、ランダムで自動生成したりしていると考えられます。

送信される目的は、主に「商品の宣伝」で、ドラッグやマルチ商法サービスの紹介などがあります。出会い系サイト・アダルト系サイトの勧誘なども、よくある事例です。

その他には、以下のような目的で送られます。

  • 架空請求
  • フィッシング詐欺
  • 個人情報の窃取
  • ウイルスの配布

金融機関を装った架空請求では、クレジットカードの情報を抜き取られたり、金銭をだまし取られたりするので注意が必要です。

引用元:NTT東日本

スパム対策は、Googleが無料で提供している認証ツール「reCAPTCHA」を使います。

トム

あと少しなので頑張ってください(笑)

「reCAPTCHA」への登録

reCAPTCHA」へアクセスして、一緒に作業していきましょう

STEP
サイトへアクセスしたら「v3管理コンソール」をクリック
STEP
右上の「+」ボタンをクリック
STEP
ラベル名を入力

ラベル名は自由に決めてもらって大丈夫です。

STEP
「チャレンジ(v2)」「非表示 reCAPTCHA バッジ」をチェック
トム

V2、V3の使い分けは⇩

v2 → 会員登録フォームやお問い合わせフォームなど、1人のユーザーの送信頻度が低く、万が一にも誤検出で弾かれてほしくない部分

v3 → チャットや掲示板、ブログなどのコメント欄など、高い頻度で何度も書き込むような部分

引用元:https://axel-media.com/topics/6203/
STEP
連携したいサイトのドメインを入力

ドメインはサイトURLの「https://www.」より後ろの部分を指します。

(例)https://www.tomublog.site

STEP
「送信」をクリック
STEP
サイトキー、シークレットキーの取得

ここまでで、「reCAPTCHA」への登録は完了です。

サイトキーとシークレットキーは後で使うので、画面はそのままにしておきましょう。

トム

心配な方はメモ帳にコピペしておいてくださいね。

お問い合わせフォームに「reCAPTCHA」を設定

別タブで「Word Pressの管理画面」を開いて作業していきます。

STEP
Word Pressの管理画面の「WPForms」>「設定」をクリック
STEP
「reCAPTCHA 」をクリック
STEP
作成した「お問い合わせフォーム」をクリック
STEP
タイプ:「Invisible reCAPTCHA v2」を選択
STEP
先程取得した「サイトキー」と「シークレットキー」を貼り付け
STEP
「設定を保存」をクリック
STEP
Word Press管理画面「WPForms」>「すべてのフォーム」をクリック
STEP
「reCAPTCHA」をクリック
STEP
「OK」をクリック
STEP
「保存」をクリック
STEP
サイトのお問い合わせフォームからテスト送信を行い問題がないか確認。

以上で、全作業終了です。

トム

本当にお疲れ様でした。

まとめ:SWELLでお問い合わせフォームを設置!

本記事は、SWELLでお問い合わせフォームを設置する方法を解説してきました。

「SWELL」開発者の了さんがおすすめするプラグイン「Contact Form by WPForms」を使っての設置作業になります。

《お問い合わせフォーム作成の簡単な流れ》

  1. プラグイン「Contact Form by WPForms」をインストール
  2. お問い合わせフォームの作成
  3. お問い合わせフォームをサイトに表示

以上の3ステップで簡単に設置できます。

トム

早めに済ませておきましょう。

また、SWELLでのサイドバー設定について詳しく知りたい方は、下記の記事をご覧ください。

以上、最後までお付き合いありがとうございました。

記事タイトルとイラスト画像

この記事が気に入ったら
いいねしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次