【ドラッグ&ドロップで簡単・直感的】お問合せフォーム「Contact Form by WPForms」の使い方をご紹介

更新日:2022年03月26日 /  投稿日:2021年12月10日

【ドラッグ&ドロップで簡単・直感的】お問合せフォーム「Contact Form by WPForms」の使い方をご紹介

WordPressにはプラグインという拡張機能でWEBサイトを簡単に、より便利なWEBサイトにしてくれる便利なものです。

お問合せフォームもプラグインを使って実装される事が多く、そして様々なプラグインが開発されています。

そんな中でも今回はWordPress初心者の方でも簡単に作れるプラグイン「Contact Form by WPForms」とその使い方をご紹介していきます。

WordPressでお問合せフォームを作りたいけど、編集に自信の無い方は是一度ご覧下さい!

Contact Form by WPFormsとは

WPFormsから開発されたたプラグインで、有料版で様々な機能が使用できますが無料版でもある程度のフォームであれば問題無く作成が可能です。

また、以下のような特徴でフォーム作成を簡単・直感的に作成する事が可能です。

  • フォーム項目をドラッグ&ドロップで作成可能
  • 独自の編集画面で分かり安く、必要な機能が揃っている
  • フォームのテンプレートもあり、より効率的にフォームの作成が可能
  • レスポンシブにも対応済みでスマホ表示も安心

Contact Form by WPFormsの使い方

まずは、 WordPressの管理画面から Contact Form by WPFormsをインストールと有効化を行います。

まずは、 WordPressの管理画面から Contact Form by WPFormsをインストールと有効化

管理画面の「プラグイン」というプラグインから新規追加で「 Contact Form by WPForms 」を検索します。

上記のプラグインが表示されたらインストールを行い、その後上記の画像の「有効化」をクリックします。

最初のフォームを作成をクリック

Contact Form by WPFormsを有効化すると上記画像のような画面が表示されますので、上記画像の赤枠部分をクリックしてフォームを作成していきます。

「空のフォーム」を使ったフォーム作成

次に、上記のような画面が表示されます。フォームにはテンプレートもあり、それぞれサイトのタイプや必要な機能に合わせてフォームを選ぶ事も可能です。無料版では空のフォームを含めた29種類のフォームが使用可能です。

今回のご紹介では「空のフォーム」を使ったフォーム作成のご紹介を行います。

空のフォーム作成でも十分簡単に作成できますので、是非挑戦してみて下さい。

赤枠部分のフォームのパーツをドラッグ&ドロップで作成

上記のような画面が表示されましたら、画面右側の方へ赤枠部分のフォームのパーツをドラッグ&ドロップで作成していきます。

有料版になれば赤枠下の項目を使用可能になります。

シンプルな内容のフォームを作成

今回は上記画像のように以下の項目を入れてシンプルな内容にしました。

  • 「名前」の項目
  • 「段落テキスト(備考・お問合せ内容)」 の項目
  • 「メール」 の項目
  • 「チェックボックス(お問合せ種別)」 の項目

各フォームの項目はドラッグ&ドロップで順番の入れ替えが可能です。

ラベルは編集する事ができますので、任意の名前に変更

段落のテキストをクリックすると、上記画像のようにラベルを編集する事ができますので、任意の名前に変更しましょう。

後は画面左側にある「設定」項目で自動返信メールの設定などを行い、「空のフォーム」という部分の名前を変更します。

「保存」のボタンを押すとショートコードができますので、コピーして任意のページに貼り付けます。

ショートコードをページに貼り付けてフォームページを作成

上記までの工程でフォームの作成からショートコードのコピーまでが終えたと思います。

ここまでが出来ましたらワードプレスの管理画面「固定ページ」をクリックし、お問合せページに、先程のショートコードを貼り付け、「更新」ボタンを押します。

まだお問合せページが作成していない場合であれば「新規追加」で「お問合せページ」を作成(もしくは任意の名前のページを作成)し、ショートコードを貼り付け、「公開」ボタンをクリックして公開します。

テンプレートを選べばイメージに近いフォームを1クリックで作成が可能

最初の方に述べたように、このプラグインでは、フォームのフォーマットが無料版で29種類用意されています。

それらを選べば1クリックで、あっという間にフォームが作成可能になります。(項目名が英語なので編集が必要です)

まとめ

Contact Form by WPForms の特徴から簡単な使い方までご紹介いたしましたが、いかがだったでしょうか?

ドラッグ&ドロップでフォーム作成が可能な上に、テンプレートを使用すると、ほぼ1クリックで作成ができるので、WordPressに慣れていない方でも簡単に必要なフォームが簡単に作成できます。

ご興味がある方は是非一度お試し下さい。

この記事を書いた人

KNOWLEDGE BASEの中の人

KNOWLEDGE BASEの中の人

2013年よりWEB制作会社に入社し、デザイン・コーディングからディレクションと幅広く従事。

その他の関連記事はこちら