WordPressテーマのSWELLでお問い合わせフォームをContact Form by WPFormsで設置する方法を解説します。
SWELL開発者の了さんは「Contact Form 7」ではなく「Contact Form by WPForms」を使っています。
Contact Form by WPForms
シンプルなコンタクトフォームが超簡単に設置できるプラグイン。
https://swell-theme.com/basic-setting/4688/
私はいつも「Contact Form 7」よりこっちを使ってます。
しかし、SWELL公式サイトでは「Contact Form by WPForms」の詳しいインストール方法や使い方等の解説はないので、このページで紹介していきます。
WordPress初心者の方でも簡単に「Contact Form by WPForms」をインストールしてお問い合わせフォームを作成する事ができます。
Contact Form by WPFormsを設置する方法
Contact Form by WPFormsを設置する手順は以下の通りです。
- プラグインの「Contact Form by WPForms」をインストール・有効化する
- テンプレートを選択する
- 必要に応じて項目を追加する
- 固定ページにフォームを埋め込み公開する
- フォームからテスト送信をする
ダッシュボードのプラグインから新規追加をクリックします。
右上にあるキーワード欄にContact Form by WPFormsを入力して検索します。
クマのアイコンの「Contact Form by WPForms – WordPress 用のドラッグ & ドロップフォームビルダー」にある「今すぐインストール」をクリック
インストールが完了するとボタンが「有効化」に変わるのでクリックしてください。
有効化すると「WPForms へようこそ」という画面が切り替わります。
最初のフォームを作成をクリックしましょう。
テンプレートを選択する画面になるので「簡単なお問い合わせフォーム」をクリックしましょう。
下図のような簡単なお問い合わせフォームができあがります。
ブログ運営のお問い合わせなら名前、メールアドレス、コメントの３つがあれば問題ありません。
メールの題名が欲しい場合は、左側にある「フィールドを追加」タブから「一行のテキスト入力」をメールとコメントまたはメッセージの間にドラッグアンドドロップして追加しましょう。
ドラッグアンドドロップするだけで下図のように配置が可能です。
一行のテキスト入力をクリックするとフィールドオプションが左側に表示されラベルの変更と必須項目にするか選択できます。
ラベルを題名に変更し必須に修正しました。
右上にあるオレンジ色のボタンの保存を押して一旦保存をしましょう。
埋め込むボタンをクリックします。
既存のページを選択するか新規ページを作成するか選びます。
ここでは新規ページを作成します。
※既存ページへの埋め込み方法は後述します。
ページに名前を付ける欄に「お問い合わせ」と入力しオレンジ色の「行きましょう！」ボタンをクリックします。
下図のように新規固定ページが一瞬して作成されます。
URLスラッグを「contact」に変更し公開しましょう。
お問い合わせページを公開すると下図のようなフォームが出来上がっています。
全ての項目を入力してテスト送信をしてみましょう。
メールアドレス以外は適当でOKです。
送信ボタンを押すと送信完了画面が表示されます。
以上でContact Form by WPFormsの簡単な設置は終了です。
既存の固定ページにContact Form by WPFormsを埋め込む方法
埋め込みボタンを押した後に既存のページを選択すれば既に作ってある固定ページにContact Form by WPFormsを埋め込む事が可能です。
既存のページを選択をクリックすると既存の固定ページを選択する事ができます。
Contact Form by WPFormsを埋め込みたいページを選択しオレンジ色の「行きましょう！」ボタンをクリックします。
ガイドが出るので指示に従って進めて行きましょう。
ブロック一覧のウィジェットの中にWPFormsが追加されているのでクリックしましょう。
WPFormsブロックが追加されます。
フォームを選択のプルダウンメニューから作成したフォームを選択するだけでフォームが埋め込まれます。
更新ボタンを押して既存のページ追加されたWPFormsを反映させましょう。
まとめ
今までお問い合わせフォームと言えば「Contact Form 7」が定番でしたが、「Contact Form by WPForms」なら先にお問い合わせページの作成が必要なく簡単スピーディーに設置が可能です。
SWELLを購入したばかりのWordPress初心者の方は「Contact Form by WPForms」でお問い合わせフォームを作成するのがおすすめです。
コメント