SWELLお問い合わせフォームの作り方｜Contact Form 7を利用したカスタマイズ方法も紹介

「お問い合わせを受ける窓口を作りたい…」

「Contact Form 7の設定方法は？」

「お問い合わせフォームを設置するには？」

この記事ではそんな方に向けて、SWELLでお問い合わせフォームの作り方を解説します。

かめコンパス

こんにちは、かめコンパスです！

この記事を読めば、あなたも簡単に

• Contact Form 7を使ったお問い合わせフォームの作成から設置までできる

ようになります。

私もあなたと同じことに悩んでたのですが、本記事の方法でサクッと解決でき、ユーザーから感謝の言葉や仕事の依頼を頂けるようになりました。

どこよりも分かりやすく書いている自信がありますので、あなたもパパッと解決してみてください！

＼SWELL購入を検討中の人はこちらもご覧ください！／

あわせて読みたい

【口コミ多数！】SWELLの評判レビュー｜メリット・デメリットや使ってみた感想まとめ 「SWELLを購入しようか迷っている…」 「SWELLのメリット・デメリットは？」 「SWELLを導入すれば何が変わるのか知りたい」 この記事ではそんな方に向けて、SWELLの評判…

SWELLお問い合わせフォームの作り方③ステップ

SWELLのお問い合わせフォームを作成するには、以下3つのステップを踏む必要があります。

上記3つをステップごとに詳しく解説していきます。

かめコンパス

少し説明が長く感じると思うけど、分かりやすく解説するよう努めます！

本記事の後半では、Contact Form 7で作成したお問い合わせフォームのカスタマイズ方法も紹介します。

ステップ①：SWELLお問い合わせフォームの作成にContact Form 7を利用しよう

まず始めに、SWELLでお問い合わせフォームを作成するために、

Contact Form 7を導入する

プラグイン「Contact Form 7」を導入する方法は、下記のとおりです。

STEP

WordPress管理画面で、プラグイン⇒新規プラグインを追加の順にクリックする

検索窓に「Contact Form 7」と入力し、今すぐインストールをクリックする

STEP

有効化をクリックする

これでプラグイン「Contact Form 7」を導入できます。

フォームを作成する

つぎにフォームを作成していきます。

STEP

お問い合わせ⇒新規追加の順にクリックする

タイトルを入力し、保存をクリックする

かめコンパス

タイトルは「お問い合わせ」でOK

STEP

自動返信メールを有効にするための設定を行います。

メールタブをクリックする

STEP

「メール(2)を使用」にチェックを入れ、保存をクリックする

これでフォームを作成できます。

つぎのステップでは、Contact Form 7で作成したお問い合わせフォームをページに挿入していきます。

ステップ②：SWELLお問い合わせフォームをページに挿入する

SWELLでお問い合わせフォームをページに挿入するために、

固定ページにContact Form 7ブロックを挿入する

STEP

WordPress管理画面で、固定ページ⇒新規固定ページを追加の順にクリックする

STEP

最上部の段落ブロックを選択し、ページ左上にある+⇒Contact Form 7の順にクリックする

STEP

ページに挿入されたContact Form 7ブロックの「コンタクトフォームを選択:」から先ほど作成したフォームのタイトルを選ぶ

これで固定ページにContact Form 7ブロックを挿入できます。

STEP

ページタイトルも入力しておきましょう。

かめコンパス

タイトルは「お問い合わせ」でOK

細かな設定を行う

SWELLのお問い合わせフォームでは、以下4つの項目を設定します。

• URLの入力【必須】
• アイキャッチ画像の設置【必須】
• 広告の非表示【必須】
• サイドバーの非表示【任意】

上記それぞれの設定方法は、ページ編集画面の右上にある設定⇒固定ページタブ内で行います。

URLを入力する

リンクの右部分をクリックして、パーマリンクを「Contact–form」に変えます。

これでURLの設定完了です。

かめコンパス

URLが日本語だと文字化けするので、英語に直そうね

アイキャッチ画像を設置する

アイキャッチ画像を設定をクリックして、アイキャッチ画像を挿入します。

かめコンパス

画像はCanvaでの作成がおすすめ！

広告を非表示にする

表示の上書き設定で「目次広告を隠す」「自動広告を停止する」の2ヶ所にチェックしましょう。

かめコンパス

お問い合わせフォームで商品の紹介はしないはず…

サイドバーを非表示にする

表示の上書き設定でサイドバー「非表示」を選んでください。

固定ページを公開する

ページ編集画面の右上にある公開をクリックして、固定ページを公開します。

これでお問い合わせフォームをページに挿入できます。

ただ、これだけだとサイト内にお問い合わせフォームページは表示されません。

かめコンパス

作った固定ページをサイト内に設置する作業が必要だよ

最後は、自サイトにお問い合わせフォームを設置していきましょう。

ステップ③：SWELLお問い合わせフォームを設置する

SWELLの固定ページで作成したコンタクトフォームは以下の3ヵ所に設置します。

それぞれの設置方法を詳しく解説します。

フッター・ヘッダーに設置する

まずはフッター・ヘッダーにお問い合わせフォームを設置する方法を説明します。

STEP

WordPress管理画面で、外観⇒メニューの順にクリックする

STEP

「新しいメニューを作成しましょう」をクリックする

「メニュー名」を入力し、メニューの位置「フッター」か「グローバルナビ」にチェックする

メニューを作成をクリックする

かめコンパス

メニュー名は分かりやすいようフッター(ヘッダー)メニューがおすすめだよ

STEP

メニュー項目を追加で固定ページをプルダウンする

すべて表示タブで「お問い合わせ」にチェックする

メニューに追加をクリックする

STEP

メニューを保存をクリックする

これでお問い合わせフォームをフッター・ヘッダーに設置できます。

SWELLのフッター・ヘッダーにはお問い合わせフォーム以外のページも設置することができ、詳しくは下の記事を参考にしてください。

ページ最後に設置する

ページ最後にお問い合わせフォームを設置する方法です。

STEP

記事編集ページの最後の段落ブロックを選択し、+⇒Contact Form 7の順にクリックする

STEP

ページに挿入されたContact Form 7ブロックの「コンタクトフォームを選択:」から作成したコンタクトフォームのタイトルを選ぶ

これでお問い合わせフォームをページ最後に設置できます。

Contact Form 7でお問い合わせフォームのカスタマイズ6選

ここからはContact Form 7のおすすめなカスタマイズを6つに絞って紹介します。

以下の画像はお問い合わせフォームをカスタマイズする前と後の違いです。

before

after

それぞれのカスタマイズを詳しく解説します。

入力する項目を任意から必須に変更する

入力する項目が必須の場合は、タグにアスタリンク(*)が表示されています。

もし任意から必須にしたい場合は、「text」や「email」などのタグの末尾に「*」を入力しましょう。

<label> 氏名
    [text* your-name autocomplete:name] </label>

<label> メールアドレス
    [email* your-email autocomplete:email] </label>

各項目に入力例を表示させる

各項目に入力例を表示させたい場合は、タグの最後に「placeholder “〇〇〇”」を追加しましょう。※〇〇〇は表示させたいテキスト

<label> 氏名
    [text* your-name autocomplete:name placeholder "例：山田 太郎"] </label>

<label> メールアドレス
    [email* your-email autocomplete:email placeholder "例：XXX@example.co.jp"] </label>

複数の選択肢から1つだけ選ぶ設定にする

複数の選択肢から1つだけ選ぶ項目を追加したい場合は、ラジオボタンから設定していきます。

選択できる値で表示させたい選択肢を1行ずつ入力し、タグを挿入をクリックしてください。

フォームの編集画面に追加されたタグの上の行にタイトルを入力すれば完成です。

お問い合わせ内容
[radio radio-487 use_label_element "ご質問" "ご要望" "仕事の依頼"]

複数の選択肢から2つ以上選ぶ設定にする

複数の選択肢から2つ以上選ぶ項目を追加したい場合は、チェックボックスから設定していきます。

選択できる値で表示させたい選択肢を1行ずつ入力し、タグを挿入をクリックしてください。

フォームの編集画面に追加されたタグの上の行にタイトルを入力すれば完成です。

当ブログをどこで知りましたか？　※複数選択可
[checkbox checkbox-569 use_label_element "Google検索" "𝕏（旧Twitter）" "他サイトからの紹介"]

プライバシーポリシーの承諾確認を行うチェックボックスを挿入する

プライバシーポリシーの承諾確認を行うチェックボックスを挿入したい場合は、承諾確認から設定していきます。

「このチェックボックスは任意選択です。」のチェックを外し、「同意条件」で以下のコードを記述してください。

<a href="〇〇〇" target="_blank" rel="noopener noreferrer" class="underline">プライバシーポリシー</a>に同意する

※〇〇〇はプライバシーポリシーページのURL

タグを挿入をクリックします。

これでプライバシーポリシーの承諾確認を行うチェックボックスを挿入できます。

[acceptance acceptance-431] <a href="https://www.kamecompass.com/inquiry/" target="_blank" rel="noopener noreferrer" class="underline">プライバシーポリシー</a>に同意する [/acceptance]

SWELLでプライバシーポリシーを作成する方法は、下の記事を参考にしてください。

自動返信メールの内容を編集する

自動返信メールの内容を編集したい場合は、メールタブ内の「メール (2)」で行います。

私の場合は「題名」と「メッセージ本文」の2ヶ所を編集しました。

[_site_title] "[your-subject]"

メッセージ本文:
[your-message]

-- 
あなたのメールアドレスを使用して、私たちのウェブサイト ([_site_title] [_site_url]) のコンタクトフォームに送信がありましたので、その控えとして本メールを送ります。もしもその送信について心当たりのない場合は、どうぞこのメッセージを無視してください。

[your-name]様、お問い合わせありがとうございます。

[your-name]様

この度はお問い合わせいただき、誠にありがとうございます。
以下の内容でお問い合わせを受け付けました。

==============================
【氏名】[your-name]
【メールアドレス】[your-email]
【件名】[your-subject]
【メッセージ本文】[your-message]
==============================

内容を確認のうえ、折り返しご連絡させていただきます。
数日お時間を頂く場合がございますが、お待ちいただけると幸いです。
何卒ご了承くださいませ。

-- 
あなたのメールアドレスを使用して、私たちのウェブサイト ([_site_title] [_site_url]) のお問い合わせフォームに送信がありましたので、その控えとして本メールを送ります。もしもその送信について心当たりのない場合は、どうぞこのメッセージを無視してください。

[_site_title]…自サイト名、[_site_url]…自サイトURL、[your-subject]…題名、[your-message]…メッセージ本文、[your-name]…ユーザーの氏名、[your-email]…ユーザーのメールアドレス

実際に自動返信メールが届くと以下のようになります。

かめコンパス

自分の好きなように編集してみてね

まとめ：SWELLお問い合わせフォームの作成でユーザーとの接点を持とう

今回は、SWELLでお問い合わせフォームの作り方を紹介しました。

当ブログではSWELLに関する記事をいくつか書いてます。

下のページにまとめていますので、のぞいてみてください。

かめコンパス

ためになったという人は“ Twitterフォロー”や“ ブックマーク”してくれると嬉しいです！

お問い合わせはこちらから…

・　　　・　　　・

＼当ブログ愛用のWordPressテーマはこちら！／

SWELL公式サイトを見る ＞

【口コミ多数！】SWELLの評判レビュー｜メリット・デメリットや使ってみた感想まとめ

SWELLの関連記事まとめ

SWELL専用ブロックの使い方

アコーディオンブロック

バナーリンクブロック

ボックスメニューブロック

SWELLボタンブロック

キャプションボックスブロック

リッチカラムブロック

説明リスト(DL)ブロック

FAQブロック

フルワイドブロック

ステップブロック

タブブロック

ABテストブロック

広告タグブロック

ふきだしブロック

ブログパーツブロック

リンクリストブロック

投稿リストブロック

関連記事ブロック

制限エリアブロック

商品レビューブロック

コアブロックの使い方

段落ブロック

リストブロック

画像ブロック

カバーブロック

テーブルブロック

見出しのデザイン設定

SWELLサイト全体のカスタマイズ

サイト型トップページ

ヘッダー

ヘッダーメニュー(グローバルナビ)

フッター

ピックアップバナー

メニュー機能の説明と使い方まとめ