「SWELLでホームページを作ったけれど、お問い合わせフォームはどうやって設置すればいいの？」
「Contact Form 7って聞いたことはあるけど、設定方法がよく分からない…」
このようなお悩みはありませんか？
お問い合わせフォームは、企業サイトや店舗サイト、ポートフォリオサイトなどに欠かせない機能です。フォームが設置されていないと、お客様が気軽に連絡できず、せっかくの問い合わせの機会を逃してしまう可能性があります。
結論からお伝えすると、**SWELLにはお問い合わせフォームを作成する機能はありません。**そのため、多くのWordPressユーザーが利用している無料プラグイン「Contact Form 7」を使ってフォームを作成し、SWELLに設置する方法がおすすめです。
この記事では、WordPress初心者の方でも迷わないように、Contact Form 7のインストールからフォームの作成方法、SWELLへの設置方法まで、画像がなくても分かるように丁寧に解説します。また、デザインを整える方法や、フォームが送信できない場合の対処法についてもご紹介します。
この記事を最後まで読めば、SWELLを使ったホームページにお問い合わせフォームを設置し、すぐに運用を始められるようになります。
この記事で分かること
- SWELLでお問い合わせフォームを設置する方法
- Contact Form 7のインストール手順
- フォームの作成方法
- 固定ページへの設置方法
- デザインを見やすく整える方法
- よくあるエラーと解決方法
ホームページからのお問い合わせを増やすためにも、ぜひ最後までご覧ください。
Contact Form 7のインストール手順
お問い合わせフォームを作成するために、まずはWordPressへ「Contact Form 7」をインストールします。
Contact Form 7は無料で利用できる人気のプラグインで、多くの企業サイトやブログでも利用されています。
手順1：プラグインを開く
WordPressの管理画面にログインし、左側メニューの
「プラグイン」→「プラグインを追加」
をクリックします。
手順2：Contact Form 7を検索する
画面右上の検索ボックスに
Contact Form 7
と入力します。
作者が「Takayuki Miyoshi（佐藤孝幸氏）」となっているプラグインが表示されるので、間違いないか確認しましょう。
手順3：「今すぐインストール」をクリック
「Contact Form 7」が表示されたら、「今すぐインストール」をクリックします。
数秒でインストールが完了します。
手順4：「有効化」をクリック
インストールが終わると、「有効化」というボタンが表示されます。
このボタンをクリックすると、Contact Form 7が利用できるようになります。
インストール完了を確認する
有効化が完了すると、WordPress管理画面の左側メニューに
「お問い合わせ」
という項目が追加されます。
この表示があれば、Contact Form 7のインストールは完了です。
インストール後にやること
Contact Form 7を有効化しただけでは、お問い合わせフォームはホームページに表示されません。
次のステップでは、お問い合わせフォームを作成し、SWELLの固定ページへ設置する方法を解説します。
Contact Form 7でお問い合わせフォームを作成する方法
Contact Form 7のインストールが完了したら、次は実際にお問い合わせフォームを作成しましょう。
Contact Form 7には、最初から基本的なお問い合わせフォームが用意されています。そのまま使うこともできますが、必要に応じて項目を追加・削除することも可能です。
手順1：「お問い合わせ」→「コンタクトフォーム」を開く
WordPress管理画面の左メニューから
「お問い合わせ」→「コンタクトフォーム」
をクリックします。
初めてインストールした場合は、「コンタクトフォーム 1」というフォームが自動で作成されています。
「編集」をクリックして設定画面を開きましょう。
手順2：フォーム内容を確認する
初期状態では、以下のような入力項目が設定されています。
- お名前
- メールアドレス
- 件名
- メッセージ本文
- 送信ボタン
一般的なホームページであれば、この内容だけでも十分お問い合わせフォームとして利用できます。
手順3：入力項目を追加する（任意）
会社名や電話番号など、必要な項目があれば追加しましょう。
画面上部には各種タグが用意されています。
例えば、
- テキスト
- メールアドレス
- 電話番号
- チェックボックス
- ラジオボタン
- ドロップダウンメニュー
- 日付
- ファイル添付
などを簡単に追加できます。
必要なタグをクリックすると、自動でコードが作成されるため、専門知識がなくても設定できます。
手順4：「保存」をクリック
フォームの編集が終わったら、画面右上の**「保存」**ボタンをクリックします。
保存しないまま画面を閉じると、編集内容が反映されないので注意しましょう。
手順5：ショートコードをコピーする
保存すると、画面上部に以下のようなショートコードが表示されます。
[contact-form-7 id="123" title="コンタクトフォーム 1"]このショートコードをコピーしておきます。
次の章では、このショートコードをSWELLの固定ページに貼り付け、お問い合わせフォームを表示する方法を解説します。
手順1：ショートコードをコピーする
まずは、Contact Form 7で作成したフォームのショートコードをコピーします。
WordPress管理画面の左側メニューから
「お問い合わせ」→「コンタクトフォーム」
を開きます。
フォーム一覧に、次のようなショートコードが表示されています。
[contact-form-7 id="123" title="お問い合わせ"]このショートコードをコピーしておきましょう。
ポイント
ショートコードは、お問い合わせフォームを表示するためのコードです。内容を変更せず、そのままコピーしてください。
手順2：固定ページを作成する
次に、お問い合わせフォームを表示するページを作ります。
WordPress管理画面から
「固定ページ」→「新規追加」
をクリックします。
タイトルには
お問い合わせ
と入力しましょう。
手順3：ショートコードを貼り付ける
本文の入力欄に、先ほどコピーしたショートコードを貼り付けます。
SWELLのブロックエディターを使っている場合は、
「ショートコード」ブロック
を追加して、その中にショートコードを貼り付けるのがおすすめです。
※段落ブロックに貼り付けても表示できますが、ショートコード専用ブロックを使う方が分かりやすく、管理もしやすくなります。
手順4：「公開」をクリックする
ショートコードを貼り付けたら、画面右上の**「公開」**ボタンをクリックします。
これで、お問い合わせページが作成されました。
手順5：実際に表示を確認する
公開後にページを開き、フォームが正しく表示されているか確認しましょう。
以下のような入力欄が表示されていれば、設置は完了です。
- お名前
- メールアドレス
- 件名
- お問い合わせ内容
- 送信ボタン
もしフォームが表示されない場合は、ショートコードが正しくコピーされているか、またはContact Form 7が有効化されているかを確認してください。
お問い合わせページはメニューにも追加しよう
フォームを設置しただけでは、お客様がページを見つけられないことがあります。
そのため、作成したお問い合わせページは、
- ヘッダーメニュー
- フッターメニュー
- サイドバー（必要に応じて）
などからアクセスできるように設定しておくのがおすすめです。
お問い合わせページを見つけやすくすることで、問い合わせにつながる可能性も高まります。
SWELLでお問い合わせフォームのデザインを見やすく整える方法
お問い合わせフォームは、入力しやすく見やすいデザインにすることで、ユーザーが最後まで入力してくれる可能性が高まります。
Contact Form 7をインストールしただけでもフォームは使えますが、少しデザインを整えるだけで、より見やすく、使いやすいお問い合わせフォームになります。
ここでは、初心者でも簡単にできる改善ポイントをご紹介します。
1. 入力欄の幅を100％にする
入力欄の幅が狭いと、スマートフォンでは入力しづらく感じることがあります。
入力欄は横幅いっぱいに表示すると、見やすく操作もしやすくなります。
SWELLでは基本的に見やすいデザインになっていますが、表示が崩れている場合は追加CSSで調整できます。
2. 入力項目は必要最低限にする
お問い合わせフォームの項目が多すぎると、途中で入力をやめてしまうユーザーもいます。
おすすめの入力項目は以下の4つです。
- お名前
- メールアドレス
- お問い合わせ内容
- 送信ボタン
会社名や電話番号などは、本当に必要な場合のみ追加するようにしましょう。
3. 必須項目が分かるようにする
入力が必須の項目には、「必須」と表示しておくと親切です。
例えば、
お名前（必須）
メールアドレス（必須）
のように表示すると、ユーザーが迷わず入力できます。
4. 送信ボタンを目立たせる
送信ボタンは、お問い合わせフォームの中でも特に重要な要素です。
背景色や文字サイズを調整し、ひと目で「送信ボタン」と分かるデザインにしましょう。
ボタンの文字は、
- 送信する
- お問い合わせを送信する
- 無料相談を申し込む
など、内容が伝わる表現がおすすめです。
5. スマートフォンで表示を確認する
現在はスマートフォンからホームページを見るユーザーが多いため、スマホでの見やすさも確認しましょう。
以下の点をチェックするのがおすすめです。
- 入力欄が小さすぎないか
- ボタンが押しやすい大きさか
- 文字が読みにくくないか
- 横スクロールが発生していないか
パソコンだけでなく、実際にスマートフォンでもフォームを開いて確認してみましょう。
6. 送信テストを忘れずに行う
フォームのデザインを整えたら、最後に必ず送信テストを行いましょう。
実際にフォームへ入力し、
- 正しく送信できるか
- 自動返信メールが届くか
- 管理者宛てのメールが届くか
を確認しておくことで、公開後のトラブルを防ぐことができます。
見やすいフォームはお問い合わせにつながりやすい
お問い合わせフォームは、ただ設置するだけではなく、「入力しやすいデザイン」にすることが大切です。
入力項目を必要最低限にし、スマートフォンでも見やすいデザインを意識することで、ユーザーが安心してお問い合わせできるフォームになります。
よくある質問（FAQ)
- SWELLだけでお問い合わせフォームは作れますか？
-
いいえ。SWELLにはお問い合わせフォームを作成する機能は搭載されていません。
そのため、Contact Form 7やWPFormsなどのフォーム作成プラグインを利用する必要があります。無料で利用したい場合は、Contact Form 7がおすすめです。
- Contact Form 7は無料で使えますか？
-
はい、無料で利用できます。
基本的なお問い合わせフォームであれば、無料版だけで十分です。企業サイトや個人ブログでも多く利用されている定番プラグインです。
- お問い合わせフォームが表示されません。
-
ショートコードが正しく設置されているか確認しましょう。
また、以下の点もチェックしてください。
- Contact Form 7が有効化されているか
- ショートコードをコピーし間違えていないか
- 「ショートコード」ブロックに貼り付けているか
- キャッシュが残っていないか（ブラウザの再読み込みも試してみましょう）
- フォームから送信してもメールが届きません。
-
Contact Form 7の設定だけでは、サーバー環境によってメールが届かない場合があります。
その場合は、
- メールアドレスの入力ミスがないか確認する
- 迷惑メールフォルダを確認する
- SMTPプラグインを導入する
などの対策を試してみてください。
- お問い合わせフォームは固定ページと投稿ページ、どちらに設置すればいいですか？
-
基本的には固定ページに設置するのがおすすめです。
お問い合わせページは更新頻度が低く、サイトの共通ページとして利用するため、固定ページとの相性が良いです。ります。
- お問い合わせページはどこに設置するのがおすすめですか？
-
ユーザーが見つけやすい場所に設置しましょう。
おすすめの設置場所は以下のとおりです。
- ヘッダーメニュー
- フッターメニュー
- サイドバー（必要に応じて）
- CTA（お問い合わせボタン）からのリンク
アクセスしやすい場所に設置することで、お問い合わせにつながりやすくなります。
- Contact Form 7以外におすすめのフォームプラグインはありますか？
-
はい、あります。
代表的なプラグインには以下があります。
- WPForms：初心者でも直感的に操作しやすい
- Fluent Forms：高機能で動作が軽い
- Snow Monkey Forms：シンプルなフォームを作成したい方におすすめ
ただし、無料で利用でき、情報量も多いことから、初心者にはContact Form 7がおすすめです
コメント