ドラッグ＆ドロップ 直感的に問合せフォームを作る【Contact Form by WPForms】

にゃん花子はいつもContactform7を使ってるのですが、今回はもっと直感的にフォームが作れるというContact Form by WPFormsを使って、問合せフォームを作ります！

Contact Form by WPFormsとは？

1. 基本的にHTMLやCSSを使用せず、問合せフォームを作ることができる
2. プレビュー画面がある
3. ドラッグ＆ドロップだけで操作できる

にゃん花子は、Ameliaという予約サイトを作るプラグインをインストールするときに、一緒に関連プラグインとしてインストールされました。

Contact Form by WPFormsのインストール

ダッシュボード > プラグイン > 新規プラグインの追加 から、Contact Form by WPFormsを検索しましょう。

今すぐインストール > 有効化 すれば完了です！

Contact Form by WPFormsの設定

ダッシュボード > WPForms > 設定 から行います。
初期に行わなければならない必須設定はありませんが、いくつか確認しておくと良いでしょう。

「メールアドレス」タブ

配色やヘッダー画像をアップロードできます。

「CAPTCHA」タブ

迷惑メールの防止措置を設定します。お好きなものを使用してください。
今回はGoogle提供のreCAPTCHAを使用します。

reCAPTCHAの設定は、下記のブログでもご紹介しています。無料登録をして、コードを必要箇所へコピペしてください。

あわせて読みたい

【2024完全版】ContactForm7のスパム対策

Contact Form by WPFormsでフォームを作る

ダッシュボード > WPForms を表示して、「新規追加」をクリックします。

テンプレート選択画面が表示されますので、お好みのものを選んでください。
freeの場合は、「利用可能なテンプレート」65パターンから選べるようです（24年2月1日現在）
もし好みのものがなければ「空白のフォームを作成」から、作ってもよいでしょう。

「テンプレートを使用」と「デモを表示」のボタンがあります。デモ表示で動くフォームを見ると、初めてフォームを作る場合もイメージも湧きやすいです。

変更はドラッグ＆ドロップで前後を変更でき、標準フィールドも簡単に追加可能です。

フィールドの設定項目：入力必須にする

項目名の下に必須ボックスがあるので、ONにしておきましょう。

Contact Form by WPFormsの確認メール

フォームごとに、「設定」のフィールドがあります。その中に、確認メールの設定もあります。順番に見ていきましょう。

「一般」ではフォームの名前と説明を変更できます。

「デフォルト通知」では、管理宛の件名と内容を変更できます。
送信先メールアドレスは、デフォルトではWordpressの管理画面メールアドレスになっています。「スマートタグを表示」をクリックし、[メールアドレス]をクリックすると、カスタマーのメールドレスが自動で入力されるようになります。

確認ページについて、無料の場合は「ページを表示」か「ページにリダイレクトする」のどちらか1つしか設定できません。

Contact Form by WPFormsを固定ページに表示する

フォームを設定後、保存します。

保存ボタンの横に「埋め込む」ボタンがございますので、そちらをクリックします。「既存のページを選択」もしくは「新規ページを作成」が表示されます。

どちらか選んで、表示用ページを作成します。

こちらは「新規ページを作成」をクリックした場合です。ページ名を入力すると、固定ページが表示されます。

にゃん花子

FacebookInstagram

「コード書くには苦手」「コピペで動けば、それでOK」な、ノンプログラマー向け | マニアック・ピンポイントなWordpress TIPSが多め｜文系から独学でWeb屋さんになった人｜インフラ分野のわかるWebディレクター｜主にWordpressのサイト立ち上げ、リプレイス、運用をしています｜Shopifyもはじめました | アニメ・映画・ドラマを聴きながら、ブツブツ呟きながら、制作するのが好きです | ブログ収益を保護猫活動に使いたいので、頑張る人 | 夜型人間から朝方に切り替え中｜小学１年生の壁に負けじと２０２４年も奮闘します