![](https://coin-blog.net/wp-content/uploads/2022/03/img13-150x150.png)
SWELLのお問い合わせフォームはどうやって設定するの?
このような悩みを解決します。
SWELLのお問い合わせフォーム設定はとてもかんたん。
プラグイン「Contact Form by WPForms」をインストールし編集、設置するだけです。
まず「Contact Form by WPForms」概要を解説し、次に編集、設定方法を紹介。
この記事を読めば、SWELLにお問い合わせフォームを設定できますよ。
SWELLのプラグインについてはこちら
![プロフィールカード](https://coin-blog.net/wp-content/uploads/2023/01/img4324.png)
![プロフィールカード](https://coin-blog.net/wp-content/uploads/2023/01/img4324.png)
Contact Form by WPFormsとは
![Contact Form by WPForms – WordPress 用のドラッグ & ドロップフォームビルダー](https://coin-blog.net/wp-content/uploads/2024/02/img7447.png)
![Contact Form by WPForms – WordPress 用のドラッグ & ドロップフォームビルダー](https://coin-blog.net/wp-content/uploads/2024/02/img7447.png)
Contact Form by WPFormsとは、WordPress用のドラッグ & ドロップフォームビルダー。
プログラミングの知識のない人でもドラッグ & ドロップするだけで、かんたんにお問い合わせフォームが作れます。
日本語対応しているので操作に迷うこともありません。
お問い合わせフォームといえば「Contact Form 7」が有名ですが、SWELL公式サイトではContact Form by WPFormsが推奨されています。
シンプルなお問い合わせフォームが超簡単に設置できるプラグイン。
コンタクトフォーム系は「Contact Form 7」が世界的に人気ですが、私はいつもこっちを使ってます。
推奨プラグインと非推奨・不要・注意すべきプラグインについて
![](https://coin-blog.net/wp-content/uploads/2022/03/img11-150x150.png)
![](https://coin-blog.net/wp-content/uploads/2022/03/img11-150x150.png)
![](https://coin-blog.net/wp-content/uploads/2022/03/img11-150x150.png)
プレビューを見ながらフォーム作成できるよ
Contact Form by WPFormsのインストール
Contact Form by WPFormsのインストール方法です。
![WordPressダッシュボード「新規プラグイン追加」](https://coin-blog.net/wp-content/uploads/2024/02/img7448.png)
![WordPressダッシュボード「新規プラグイン追加」](https://coin-blog.net/wp-content/uploads/2024/02/img7448.png)
「ダッシュボード」>「プラグイン」>「新規プラグインを追加」
![Contact Form by WPForms – WordPress 用のドラッグ & ドロップフォームビルダー追加画面](https://coin-blog.net/wp-content/uploads/2024/02/img7449.png)
![Contact Form by WPForms – WordPress 用のドラッグ & ドロップフォームビルダー追加画面](https://coin-blog.net/wp-content/uploads/2024/02/img7449.png)
検索窓に「Contact Form by WPForms」と入力。
見つけたら「今すぐインストール」をクリック。
![Contact Form by WPForms – WordPress 用のドラッグ & ドロップフォームビルダー「有効化」](https://coin-blog.net/wp-content/uploads/2024/02/img7450.png)
![Contact Form by WPForms – WordPress 用のドラッグ & ドロップフォームビルダー「有効化」](https://coin-blog.net/wp-content/uploads/2024/02/img7450.png)
「有効化」をクリックすればOK
SWELLに「Contact Form by WPForms」を設定
Contact Form by WPFormsの設定方法です。
今回は当サイトと同じデザインのお問い合わせフォームを作成します。
![お問合せフォーム](https://coin-blog.net/wp-content/uploads/2024/02/img7474.png)
![お問合せフォーム](https://coin-blog.net/wp-content/uploads/2024/02/img7474.png)
お好みでアレンジしてくださいね。
![Contact Form by WPFormsの作成](https://coin-blog.net/wp-content/uploads/2024/02/img7451.png)
![Contact Form by WPFormsの作成](https://coin-blog.net/wp-content/uploads/2024/02/img7451.png)
Contact Form by WPFormsを有効化すると上記が表示されるので、「最初のフォームを作成」をクリック。
![Contact Form by WPFormsの作成2](https://coin-blog.net/wp-content/uploads/2024/02/img7452.png)
![Contact Form by WPFormsの作成2](https://coin-blog.net/wp-content/uploads/2024/02/img7452.png)
もしくは、左メニューより「WPForms」>「新規追加」
![Contact Form by WPFormsの作成3](https://coin-blog.net/wp-content/uploads/2024/02/img7454.png)
![Contact Form by WPFormsの作成3](https://coin-blog.net/wp-content/uploads/2024/02/img7454.png)
フォームには「お問い合わせ」などわかりやすい名前を付けましょう。
簡単なお問い合わせフォームの【テンプレートを使用】をクリック。
![Contact Form by WPFormsの作成4](https://coin-blog.net/wp-content/uploads/2024/02/img7455.png)
![Contact Form by WPFormsの作成4](https://coin-blog.net/wp-content/uploads/2024/02/img7455.png)
名前欄をシンプルにします。
名前にカーソルをあわせ「クリックして編集」
![Contact Form by WPFormsの作成5](https://coin-blog.net/wp-content/uploads/2024/02/img7456.png)
![Contact Form by WPFormsの作成5](https://coin-blog.net/wp-content/uploads/2024/02/img7456.png)
- フォーマット
-
「シンプル」に変更。
- 必須
-
必須がオンになっているのを確認。
必須オンにすると、送信者がフィードで項目を入力しないと送信できない仕様になります。
最後に「保存」をクリック。
![Contact Form by WPFormsの作成6](https://coin-blog.net/wp-content/uploads/2024/02/img7457.png)
![Contact Form by WPFormsの作成6](https://coin-blog.net/wp-content/uploads/2024/02/img7457.png)
画面左【標準フィールド】より「単一行テキスト」を追加。
ドラッグして「コメントまたはメッセージ」の上に配置。
![Contact Form by WPFormsの作成7](https://coin-blog.net/wp-content/uploads/2024/02/img7458.png)
![Contact Form by WPFormsの作成7](https://coin-blog.net/wp-content/uploads/2024/02/img7458.png)
「クリックして編集」
![Contact Form by WPFormsの作成8](https://coin-blog.net/wp-content/uploads/2024/02/img7459.png)
![Contact Form by WPFormsの作成8](https://coin-blog.net/wp-content/uploads/2024/02/img7459.png)
ラベルを【件名】に変更し「保存」をクリックすれば完了。
お問い合わせフォームをサイトに表示
お問い合せフォームが完成したらサイトに表示させましょう。
今回はフッターに設置します。
固定ページ作成
![Contact Form by WPFormsの作成9](https://coin-blog.net/wp-content/uploads/2024/02/img7460.png)
![Contact Form by WPFormsの作成9](https://coin-blog.net/wp-content/uploads/2024/02/img7460.png)
![Contact Form by WPFormsの作成10](https://coin-blog.net/wp-content/uploads/2024/02/img7461.png)
![Contact Form by WPFormsの作成10](https://coin-blog.net/wp-content/uploads/2024/02/img7461.png)
![Contact Form by WPFormsの作成11](https://coin-blog.net/wp-content/uploads/2024/02/img7462.png)
![Contact Form by WPFormsの作成11](https://coin-blog.net/wp-content/uploads/2024/02/img7462.png)
お問い合わせページのタイトルを入力。(あとから変更可能)
「行きましょう」をクリックすると、固定ページに遷移します。
![Contact Form by WPFormsの作成12](https://coin-blog.net/wp-content/uploads/2024/02/img7463.png)
![Contact Form by WPFormsの作成12](https://coin-blog.net/wp-content/uploads/2024/02/img7463.png)
新規固定ページが作成されました。
右サイドバーのURL(スラッグ)を編集しましょう。
![Contact Form by WPFormsの作成13](https://coin-blog.net/wp-content/uploads/2024/02/img7464.png)
![Contact Form by WPFormsの作成13](https://coin-blog.net/wp-content/uploads/2024/02/img7464.png)
デフォルトの「お問い合わせ」から「contact」など英単語に変更。
日本語のままだと文字化けしてしまい、見栄えもよくありません。
変更したら「公開」をクリックすれば完了。
お問い合わせフォームをサイト内に設置
お問い合わせフォームをフッターに設置します。
![Contact Form by WPFormsの作成14](https://coin-blog.net/wp-content/uploads/2024/02/img7465.png)
![Contact Form by WPFormsの作成14](https://coin-blog.net/wp-content/uploads/2024/02/img7465.png)
「ダッシュボード」>「外観」>「メニュー」
![Contact Form by WPFormsの作成15](https://coin-blog.net/wp-content/uploads/2024/02/img7466.png)
![Contact Form by WPFormsの作成15](https://coin-blog.net/wp-content/uploads/2024/02/img7466.png)
フッターを設置していない場合は、「新しいメニューを作成しましょう」からフッターを作成できます。
![Contact Form by WPFormsの作成16](https://coin-blog.net/wp-content/uploads/2024/02/img7467.png)
![Contact Form by WPFormsの作成16](https://coin-blog.net/wp-content/uploads/2024/02/img7467.png)
【お問い合わせ】にチェックし「メニューに追加」をクリック。
![Contact Form by WPFormsの作成17](https://coin-blog.net/wp-content/uploads/2024/02/img7468.png)
![Contact Form by WPFormsの作成17](https://coin-blog.net/wp-content/uploads/2024/02/img7468.png)
メニューにお問い合わせフォームが追加されました。
【メニュー設定】のフッターにチェック。
最後に「メニューを保存」をクリックすれば完成です。
![Contact Form by WPFormsの作成18](https://coin-blog.net/wp-content/uploads/2024/02/img7470.png)
![Contact Form by WPFormsの作成18](https://coin-blog.net/wp-content/uploads/2024/02/img7470.png)
補足:ショートコードで貼り付け
ショートコードを使えば、記事やサイドバーにお問い合わせページを設置できます。
![WPFormsのショートコード](https://coin-blog.net/wp-content/uploads/2024/02/img7471.png)
![WPFormsのショートコード](https://coin-blog.net/wp-content/uploads/2024/02/img7471.png)
投稿記事へ設置するときは、そのまま貼り付ければOK
万が一、設置できない場合は「ショートコード」というブロックパーツを呼び出し、貼り付けてください。
サイドバーに設置するときは、ウィジェットメニューの「テキスト」に貼り付ければOK
![WPFormsのショートコードをウィジェットに設置](https://coin-blog.net/wp-content/uploads/2024/02/img7472.png)
![WPFormsのショートコードをウィジェットに設置](https://coin-blog.net/wp-content/uploads/2024/02/img7472.png)
以下のように設置できます。
![WPFormsのお問合せフォーム設置例](https://coin-blog.net/wp-content/uploads/2024/02/img7473.png)
![WPFormsのお問合せフォーム設置例](https://coin-blog.net/wp-content/uploads/2024/02/img7473.png)
スパム対策
お問い合せフォームを設置すると、英語のスパムメールが頻繁に送られてくるように。
これはBotによる攻撃で、サイト内への侵入を目的としています。(個人情報・金銭の盗難目的)
reCAPTCHA(リキャプチャ)は、そんなスパムや不正ログインからサイトを守ってくれるんです。
Googleが提供しており誰でも無料で利用できます。
reCAPTCHAの設定
Googleにログインし、手順に進んでください。
![reCAPTCHA追加画面1](https://coin-blog.net/wp-content/uploads/2024/02/img7477.png)
![reCAPTCHA追加画面1](https://coin-blog.net/wp-content/uploads/2024/02/img7477.png)
画面右上の「+」をクリック。
![reCAPTCHA追加画面2](https://coin-blog.net/wp-content/uploads/2024/02/img7478.png)
![reCAPTCHA追加画面2](https://coin-blog.net/wp-content/uploads/2024/02/img7478.png)
- ラベル
-
サイト名(わかりやすい)
- reCAPTCHAタイプ
-
スコアベース(v3)
- ドメイン
-
例:https://coin-blog.net/(マーカー部分を追加)
最後に「送信」をクリック。
![reCAPTCHA追加画面3](https://coin-blog.net/wp-content/uploads/2024/02/img7479.png)
![reCAPTCHA追加画面3](https://coin-blog.net/wp-content/uploads/2024/02/img7479.png)
「サイトキー」「シークレットキー」をコピー。
あとで使うので、メモなどに貼り付けておいてください。
![](https://coin-blog.net/wp-content/uploads/2022/03/kaji-150x150.png)
![](https://coin-blog.net/wp-content/uploads/2022/03/kaji-150x150.png)
![](https://coin-blog.net/wp-content/uploads/2022/03/kaji-150x150.png)
reCAPTCHAの設定は以上
WPFormsとreCAPTCHAを接続
WPFormsとreCAPTCHAを接続させます。
![WPForms「設定」](https://coin-blog.net/wp-content/uploads/2024/02/img7480.png)
![WPForms「設定」](https://coin-blog.net/wp-content/uploads/2024/02/img7480.png)
「ダッシュボード」>「WPForms」>「設定」
![WPForms「設定」reCAPTCHA追加](https://coin-blog.net/wp-content/uploads/2024/02/img7481.png)
![WPForms「設定」reCAPTCHA追加](https://coin-blog.net/wp-content/uploads/2024/02/img7481.png)
「CAPTCHA」>「reCAPTCHA」
![WPForms「設定」reCAPTCHA追加2](https://coin-blog.net/wp-content/uploads/2024/02/img7482.png)
![WPForms「設定」reCAPTCHA追加2](https://coin-blog.net/wp-content/uploads/2024/02/img7482.png)
タイプで【reCAPTCHA v3】を選択。
サイトキー、シークレットキーを貼り付け。
最後に「設定を保存」をクリックすれば完了。
reCAPTCHAの有効化
お問い合せフォームでreCAPTCHAを有効化させます。
![WPForms「設定」reCAPTCHA追加3](https://coin-blog.net/wp-content/uploads/2024/02/img7483.png)
![WPForms「設定」reCAPTCHA追加3](https://coin-blog.net/wp-content/uploads/2024/02/img7483.png)
「ダッシュボード」>「WPForms」>「すべてのフォーム」
![WPForms「設定」reCAPTCHA追加4](https://coin-blog.net/wp-content/uploads/2024/02/img7484.png)
![WPForms「設定」reCAPTCHA追加4](https://coin-blog.net/wp-content/uploads/2024/02/img7484.png)
![WPForms「設定」reCAPTCHA追加5](https://coin-blog.net/wp-content/uploads/2024/02/img7485.png)
![WPForms「設定」reCAPTCHA追加5](https://coin-blog.net/wp-content/uploads/2024/02/img7485.png)
【フィールドを追加に】ある「reCAPTCHA」をクリック。
![WPForms「設定」reCAPTCHA追加6](https://coin-blog.net/wp-content/uploads/2024/02/img7486.png)
![WPForms「設定」reCAPTCHA追加6](https://coin-blog.net/wp-content/uploads/2024/02/img7486.png)
「OK」をクリック。
![WPForms「設定」reCAPTCHA追加7](https://coin-blog.net/wp-content/uploads/2024/02/img7487.png)
![WPForms「設定」reCAPTCHA追加7](https://coin-blog.net/wp-content/uploads/2024/02/img7487.png)
【reCAPTCHA有効】と表示されれば成功。
最後に「保存」をクリックすれば完了です。
![](https://coin-blog.net/wp-content/uploads/2022/03/img11-150x150.png)
![](https://coin-blog.net/wp-content/uploads/2022/03/img11-150x150.png)
![](https://coin-blog.net/wp-content/uploads/2022/03/img11-150x150.png)
設置したらテスト送信してみよう
メールがうまく届かないときは以下の記事を参考にしてください。
まとめ|【WPForms版】SWELLのお問い合わせフォーム設定方法
今回は「WPForms」を用いた、SWELLのお問い合わせフォーム設定方法をまとめました。
お問い合わせフォームがあると読者にも安心感を与えられます。
まだ設置してない人は手順を参考に導入してくださいね!
あわせて読みたい