【SWELL】初心者でもできたContact Form by WPFormsでお問い合わせフォームを作成!

こんにちはKamekoです。

初心者の私でもできた「SWELL でお問い合わせフォームを作成する方法」について紹介します。

「Contact Form by WPForm」プラグインを使用して作成しています。

とても簡単にできたので、ぜひ参考にしてみてください。

目次

Contact Form by WPForms」をインストールする

まず、お問い合わせフォームを設置するために「Contact Form by WPForm」のプラグインをインストールします。

STEP
プラグインを追加する画面を開く

管理画面】→【プラグイン】→【新規追加】を選択する。

ワードプレスの管理画面を開き、新規追加を行います。

STEP
「WPForms 」をインストールする

Contact Form by WPForms」をインストールします。

  1. 右上にある検索ボックスに「WPForms」と入力する
  2. Contact Form by WPForms」を選択する
  3. 今すぐインストール】クリック→【有効化】にする
(Contact Form by WPFormsインストール)

以上でインストール完了です。

Contact Form by WPForms」のお問い合わせフォームの編集をする

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

WPForms作成①テンプレートを選ぶ

STEP
WPForms新規追加

「WPForms」の有効化が完了したら、「Create Your Firsy Form」をクリック。

もしくは【管理画面】から
①【WPForms】を選択→ ②【新規追加】をクリック

(WPForms新規追加)
STEP
WPFormsテンプレートの選択
  1. 「セットアップ画面」が表示されるのでSimple Contact Formの「テンプレート」を選択する
  2. Simple Contact Form】にカーソルを合わせると「テンプレートを使用」とバナーが表示されるのでクリック。
(WPFormsセットアップ画面)
  • シンプルなお問い合わせフォームが作成され、フィールドの初期画面が表示されるので自身のお好みに編集していく。
(WPFormsシンプルなお問い合わせフォーム)

WPForms作成②フィールドの追加・編集

テンプレートを選択したらフィールドの追加・編集を行います。

STEP
フィールドの追加

ここでは、私が実際に作成したものを例に説明していきます。

デフォルトのテンプレートでも良いのですが、「英語から日本語表記に変更したい」のと「フリガナ欄を追加したい」ので編集をしていきます。

【フィールド】
【フィールドを追加】
③「標準フィールド」の中から【単一行テキスト】をクリック。

それだけで右のプレビュー画面に、選択したフィールドが追加されます。

(WPFormsフィールド初期)
  • 次に追加した「単一行テキストフィールド」をフリガナ欄として設置したいので、「Name」の下に移動移動させる。

    ※ドラッグで簡単に動きます♪
(WPFormsフィールド追加)

これで、フィールドの追加は完了です。

STEP
フィールドの編集

フィールドの追加をしたら
次はフィールドの編集を行います

(WPFormsフィールド編集)
(例)Name欄の場合

作業したいフィールドをクリックして、それぞれ編集していきます。

(Name欄の場合)
【フィールド設定】
【一般】
③【ラベル】お名前
④【フォーマット】シンプル

同じ要領で、他のフィールドも編集をします。

WPForms作成③設定項目の編集

次に設定項目の編集を行います。

設定欄「一般」

「一般」では、フォーム名やボタンの文言等の設定を行います。

設定】→【一般】→【フォーム名「送信」ボタンのテキスト「送信」ボタン処理テキスト

(WPForms設定項目)
通知」設定項目
  • フォーム名:お問い合わせ
  • 「送信」ボタンのテキスト:送信
  • 「送信」ボタン処理のテキスト:送信中

※ここでの「フォーム名」は自身の確認用になるので公開されることはありません。

(WPForms設定・一般)

設定欄「通知」

「通知」では、メールを受信時の設定を行います。

【設定】→【通知】→【メール件名】

基本的には、「メール件名」のみ変更したので良いと思います。

お問い合わせのメールを受信した時のメールの件名になるので、「お問い合わせ」など自分がメールを受信した際に分かりやすい表示をオススメします。

(WPForms設定・通知)

私は「サイト名【お問い合わせ】」にしました。

お問い合わせの送信先メールアドレスの設定

お問い合わせは、通常「管理者メールアドレス」宛に届くようになっています。

「送信先メールアドレス」欄にデフォルトで入力されている{admin_email}はワードプレスの管理者メールアドレスを指します。

別のメールアドレスで受信したい場合は、{admin_email}を削除してお問い合わせを受信したいメールアドレスを直接入力します。

設定欄「確認」

「確認」では、ユーザーがお問い合わせを送信時の確認画面の設定を行います。

【設定】【確認】【デフォルトの確認】

(WPForms設定・確認)
確認」設定項目
  • 確認タイプ:メッセージ
  • 確認メッセージ:ユーザーがお問い合わせを送信した際に画面に表示されるメッセージを作成

    確認メッセージは、
    「お問い合わせありがとうございます。近いうちにご連絡させていただきます。」
    等の内容にすると良いと思います。

    私は上図のメッセージにしました。

これで、お問い合わせフォームの作成は完成です。

★最後に右上の「保存」ボタンを必ずクリックしてくださいね。

「WPFormsお問い合わせフォーム」をサイトで表示させる

お問い合わせフォームの作成が完了したら、次はサイトでお問い合わせフォームを表示させる作業を行います。

そのための手順は2つ。

  1. 固定ページにフォームを埋め込む
  2. ①で作成した固定ページをサイト内に設置する。

この2つの作業を行なっていきます。

今回は、新規でお問合せフォームを作成した場合の内容になります。

①作成した「お問い合わせフォーム」を固定ページに埋め込む

フォーム作成画面の右上にある【埋め込む】のボタンをクリック。

(WPForms埋め込み)

①「新しいページを何と呼びますか?」と聞かれるので「お問い合わせ」と入力。
②右のボタン「行きましょう」をクリック

※ここで入力するページ名が、ユーザーに公開されるようになります。(後から変更は可能です)

(WPForms埋め込み)

すると、下図のように自動的に新規固定ページが作成されます。

(WPForms固定ページ)

特に問題がなく、このままでOKであれば「公開」をします。

『 URLスラッグcontact otoiawaseなど 』にしてあげると良いと思います。

私は、お問い合わせフォームを埋め込んだあと、下図のように簡単な文言を入力しました。

(WPForms固定ページ)

②作成した「固定ページ(お問い合わせ)」をサイト内へ設置

次に作成した「固定ページ(お問い合わせ)」をサイト内に表示させます。

今回は「フッター」へ表示させる方法を解説します。

STEP
新規メニューを開く

まず、ワードプレスの管理画面を開きます。

管理画面】→【メニュー】→【新しいメニューを作成

すると下図のようになるので、「メニュー名」と「メニュー設定」を行う。

  • メニュー名:フッター
  • メニュー設定:☑️フッターをチェック
(メニュー新規)
  • メニューを作成」をクリック
STEP
メニュー項目の追加
  • メニューを作成したら、次にフッターへ表示をさせたい固定ページを選択します。

メニュー項目を追加」欄で【固定ページ】を選択→「最近
①【☑️お問い合わせ】にチェック。
②【メニューに追加】をクリック。
③【メニューに追加】をクリックすると右画面へ自動的に表示されます
④【メニューを保存

(固定ページ選択)

これで完成です。

今回はフッターへお問い合わせフォームを表示させましたが、ご自身のお好みの場所へ表示させてくださいね。

お問い合わせフォーム「Contact Form by WPForm」を設置する方法まとめ

今回、SWELL でお問い合わせフォーム「Contact Form by WPForm」を設置する方法について紹介しました。

初心者の私にとって、この「Contact Form by WPForm」は簡単に作れてしまうのでとても助かります。

こんな感じで完成しました。

(お問い合わせフォーム)

是非、作成してみてくださいね。

ブログランキング・にほんブログ村へ
Shareされると喜びます!
  • URLをコピーしました!
  • URLをコピーしました!
目次