Wordpress

WordPressに直感的に問合せフォームを作る【Contact Form by WPForms】

記事内に商品プロモーションを含む場合があります
にゃん花子
にゃん花子
ContactForm7よりも、もっと簡単と噂の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のスパム対策 ContactForm7以外のフォームでも使える、一般的なスパム対策で一番効果的な対策方法です!制作するサイトは必ずこ...

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

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

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

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

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

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

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

Contact Form by WPFormsの確認メール

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

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

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

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

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

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

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

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

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

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

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

wp-puzzle.com logo