フォームズの使い方ガイド【フォーム設置と注文フォームの作成方法を紹介】

      
フォームズの使い方ガイド【フォーム設置と注文フォームの作成方法を紹介】

問い合わせフォームの作成や注文フォームの作成など、多くの使用用途があるサービス「フォームズ(formzu)」です。

フォームズの導入を検討する上で、

『フォームズの特徴が知りたい』
『フォームズの使い方が知りたい』
『他サービスとの違いが分からない』

上記のような課題が生じるかと思います。

本コラム記事では、ホームページ担当者様へ向けて「フォームズの特徴や使い方」「他サービスとの比較」「注文フォームの作り方」を紹介しています。

※今回のコラム記事で掲載している情報は記事公開日(2021年9月2日)時点になります

フォームズとは

フォームズ

出典:フォームズ

フォームズ(formzu)は、フォームズ株式会社が提供するメールフォーム作成サービスです。

「問い合せフォーム」「申し込みフォーム」などを簡単に作成することができます。

作成したフォームは、フォームズ上のWebサーバー上で稼働するので、セキュリティ対策も万全です。

個人だけではなく、大手企業など幅広く利用されています。

フォームズの機能

フォームズの代表的な機能について紹介します。

下記機能を参考に導入を検討してみましょう。

各デバイスに対応したメールフォーム作成

フォームズでは「パソコン」「スマートフォン」「タブレット」などの各デバイスに対応したメールフォームを簡単に作成できます。

フォームズで作成したフォームは、レスポンシブ対応となるため、ユーザーがアクセスするデバイスに合わせて自動でフォームレイアウトを調整します。

SSL通信対応のフォーム作成

フォームズで作成するフォームは、全てSSL通信に対応しています。

SSL通信とは、インターネット上でデータを暗号化して送受信する仕組みです。

個人情報を記入するメールフォームでは、情報が盗み取られるのを防止するため、SSL通信が活用されます。

フォームズであれば無料で、SSL通信に対応したフォームを作成することができます。

自動返信メール機能

フォームズでは、自動返信メール機能も搭載しています。

自動返信メール機能とは、問い合わせがあったユーザーに対して自動で返信メールを送ることができるサービスです。

無料プランでも「500文字まで」の自動返信メール設定をすることができます。

注文フォーム作成

商品注文フォーム

出典:フォームズ

フォームズでは、PayPal決済(クレジットカード決済)に対応した注文フォームも作成することが可能です。

無料プランでも「10商品」まで登録ができます。

その他機能

フォームズでは、その他に下記のような機能も搭載しています。

▼スマホの場合は横にスクロールしてご覧ください

フォームズ機能 詳細
ファイル送信 フォームからのファイル送信
画像表示 フォームでの画像表示機能
計測タグ設置 Web広告用の計測タグ設置機能
アフィリエイト対応 A8.net等のアフィリエイトに対応
多言語対応 英語表記のテンプレートあり
統計機能 フォーム回答の集計機能
定員機能 申し込みの上限数を設定する機能

フォームズの料金

フォームズでは、下記5つのプランが用意されています。

▼スマホの場合は横にスクロールしてご覧ください

プラン フリー パーソナル ビジネス プロフェッショナル
料金(3か月) 0円 1,900円 3,300円 8,500円
用途 個人用 個人用 個人・法人 法人用
広告表示 あり なし なし なし
フォーム作成 無制限 無制限 無制限 無制限
項目数 12項目 50項目 50項目 100項目
条件分岐 2まで 4まで 12まで 12まで
注文フォーム 10商品まで 50商品まで 50商品まで 100商品まで
PayPal決済

無料プランでも「12項目までのメールフォーム作成」や「10商品までの注文フォーム作成」が可能です。

また、フォームズでは有料プランの「2週間無料トライアル」が設けられているので、機能を確認した上で、有料プランに加入することができます。

Googleフォームとの比較

無料でフォーム作成が可能な「Googleフォーム」との比較を紹介します。

「フォームズ」と「Googleフォーム」の無料プラン比較表は、下記の通りです。

▼スマホの場合は横にスクロールしてご覧ください

フォームズ(無料プラン) Googleフォーム(無料プラン)
フォーム作成数 無制限 無制限
フォーム項目数 12項目まで 無制限
項目種類 21種類 11種類
注文フォーム設置 ×
自動返信機能 〇(アドオンが必要)

フォームズは「フォーム項目のグループ分け」や「注文フォーム設置」ができる点がメリットです。

そのため、フォームデザインの細部にまでこだわりたい方や注文フォームを設置したい方にフォームズの利用が向いています。

一方、Googleフォームは、フォーム項目数が無制限であるメリットを生かしてWebテストやボリュームのあるアンケートフォーム作成に向いています。

それぞれ、無料でも十分活用できるサービスなので、自社の目的で判断してみましょう。

関連記事

Googleフォームについては、以下のコラム記事で詳しく解説中です。

Googleフォームの使い方完全ガイド【マーケティングツールとしての使い方も紹介】

フォームズの使い方

続いて、フォームズの使い方を7STEPで紹介します。

下記手順で、メールフォームを作成してみましょう。

  1. アカウント作成とログイン
  2. フォーム作成
  3. フォームのデザイン変更
  4. 自動返信メール設定
  5. フォームの保存
  6. フォームを埋め込み
  7. テスト

【STEP①】アカウント作成とログイン

はじめにフォームズのアカウントを作成します。

アカウント作成とログイン

出典:フォームズ

フォームズの公式サイトにアクセスして「メールアドレス」を入力後「メールフォームを作る」を選択しましょう。

「フォームタイトル」と「パスワード」の入力画面

出典:フォームズ

「フォームタイトル」と「任意のパスワード」を入力して「同意して進む」を選択すれば、アカウント開設完了です。

【STEP②】フォーム作成

フォーム作成

出典:フォームズ

アカウント開設後、左上の「フォーム表示」を選択するとデフォルトのメールフォームが立ち上がるので、内容を確認しましょう。

「お名前項目」の編集

出典:フォームズ

編集したい項目がある場合は、項目内の「編集」を選択します。

今回は「お名前項目」を編集してみましょう。

お名前項目では、下記内容の編集が可能です。

▼スマホの場合は横にスクロールしてご覧ください

編集可能内容 詳細
入力必須 入力必須のあり・なし
タイトル 項目のタイトル編集
注釈 入力欄下に表示する文章
姓と名を分ける 名前の姓と名を分ける
サイズ 入力テキストボックスのサイズ

項目の編集

出典:フォームズ

項目を編集したら最後に「更新する」を選択すれば、メールフォームに反映されます。

項目追加

項目の追加

出典:フォームズ

メールフォーム項目を追加する場合は、画面左にあるメインメニューから「項目の追加」を選択します。

この位置に追加する

出典:フォームズ

項目を追加したい場所で「この位置に追加する」を選択しましょう。

追加する項目の種類を下記内容から選択します。

▼スマホの場合は横にスクロールしてご覧ください

追加項目 詳細
文字を入力する 1行テキスト型/複数行テキスト型
選択肢 選択型ラジオボタン/選択型セレクトボックス/
選択型チェックボックス/グリッド
名前 お名前/フリガナ
住所・電話番号 住所/電話番号/都道府県
コメント・画像表示・見出し コメント/画像/見出し

フォームに設定する項目は、大きく分けると下記「3つのタイプ」に分類されます。

  • 文字を入力する項目
  • 選択肢を選ぶ項目
  • コメントや画像等の項目

上記3つの組み合わせで、フォームが作成可能です。

今回は例として、性別の項目を追加してみましょう。

この項目を追加する

出典:フォームズ

「選択型セレクトボックス」を選択して項目に追加します。

項目の追加を反映する

出典:フォームズ

「項目の追加を反映する」を選択します。

「選択型セレクトボックス」の編集

出典:フォームズ

「選択型セレクトボックス」の編集をしていきます。

編集できる内容は下記の通りです。

▼スマホの場合は横にスクロールしてご覧ください

編集可能内容 詳細
入力必須 入力必須のあり・なし
タイトル 項目のタイトル編集
注釈 入力欄下に表示する文章
タイプ 1つのみ選択可/複数選択可
選択肢 選択肢のテキスト編集

性別の選択

出典:フォームズ

修正が完了したら、メインメニューのフォーム表示から追加した項目を確認してみましょう。

【STEP③】フォームのデザイン変更

デザイン設定

出典:フォームズ

メールフォームのデザインを変更する際は、メインメニューの「デザイン設定」を選択します。

デザイン設定で変更できる内容は下記の通りです。

▼スマホの場合は横にスクロールしてご覧ください

デザイン設定項目一覧 詳細
テーマ テンプレートを選びフォーム全体のデザイン変更が可能
サイズ・位置・フォント フォームのサイズ変更が可能
カラー フォーム背景・外枠・内枠など一部の色の変更が可能
画像・特殊効果 画像の挿入が可能
項目レイアウト 横並び・縦並びの選択可能
入力必須マーク 入力必須マークの色や位置の変更が可能
送信ステップ 送信完了ステップ表示の有無
余白・マージン 各項目の余白の調整

デザイン変更画面

出典:フォームズ

今回は初心者でも簡単デザイン変更ができるテーマ変更を実施します。

テーマ変更

出典:フォームズ

「テーマ」を選択して、好きなデザインを選択してみましょう。

デザイン設定を更新する

出典:フォームズ

最後に上部に表示されるプレビューを確認して「更新する」を選択すれば、デザイン設定は完了です。

YouTube動画を埋め込む

デザインの応用編として、YouTube動画を埋め込む方法を紹介します。

メールフォームにYouTube動画を埋め込めば、動画感想をアンケートで集計するなどの活用が可能です。

追加項目から「動画」を選択する

出典:フォームズ

項目追加から「動画」を選択します。

編集を選択

出典:フォームズ

メインメニューから「編集」を選択しましょう。

「動画タイトル」「ビデオID」「サイズ」を入力

出典:フォームズ

「動画タイトル」「ビデオID」「サイズ」を入力します。

「ビデオID」に関しては、URLをフォームズ上に入力すると、抽出できるようになっています。

動画の反映

出典:フォームズ

メインメニューに戻り、動画が反映されていれば完了です。

【STEP④】自動返信メール設定

続いて、フォームズの自動返信メール設定の使い方を紹介します。

自動返信メール設定をすると、フォーム回答後に自動でメッセージを送信することができます。

手順は下記の通りです。

「自動返信メール」を選択

出典:フォームズ

フォームズメインメニューの「メール設定」→「自動返信メール」を選択します。

「自動返信メールを有効にする」にチェック

出典:フォームズ

「自動返信メールを有効にする」にチェックを入れます。

自動メッセージ内容を入力

出典:フォームズ

「自動返信メールを有効にする」にチェックを入れると、編集画面が立ち上がるので「差出人」「件名」「メール本文」など自動メッセージ内容を入力します。

設定が完了したら画面最下部にある「更新する」を選択してください。

【STEP⑤】フォームの保存

フォームの保存

出典:フォームズ

続いて、フォームの保存をします。

フォームの保存をしないと、URLが発行されずフォームが稼働しないので、この工程は必ず実施しましょう。

自動振分けURL(レスポンシブ)のURLをコピー

出典:フォームズ

フォームが保存されると、専用URLが発行されます。

自動振分けURL(レスポンシブ)のURLをコピーしておきましょう。

【STEP⑥】フォームを埋め込み

フォームズのメールフォームを埋め込むには「リンクを貼り付ける方法」と「Webページに埋め込む方法」2つの方法があります。

それぞれの埋め込み方法を紹介します。

リンクを貼り付ける方法

自社ホームページにリンクを貼り付ける場合は、<a>タグを使用します。

下記コードをホームページのHTMLに張り付けましょう。

<a href="フォームのURL" target="_blank" rel="noopener">メールフォームのタイトル</a>

「フォームのURL」と「メールフォームのタイトル」を変更して、自社ホームページ貼り付けてください。

メールフォームのリンク

メールフォームをリンクとして貼り付ける場合は、別ウィンドウが立ち上がるので、メールフォームのサイズを調整する必要がありません。

メールフォームの項目が多い場合は、この方法がおすすめです。

Webページに埋め込む方法

Webページ内に埋め込む場合は<iframe>タグを使用します。

下記コードをホームページのHTMLに張り付けましょう。

<iframe style="height: 500px; max-width: 620px; width: 100%; border: 0;" src="フォームのURL"></iframe>

メールフォーム

ホームページに埋め込む場合は、サイズ調整する必要があります。

「height」「max-width」のpxを変更することで、調整が可能です。

【STEP⑦】テスト

最後にフォームが正常に稼働しているかテストしましょう。

メールフォーム画面

出典:フォームズ

メールフォームのURLにアクセスして、フォームを入力して送信します。

ログデータ

出典:フォームズ

フォームによる回答の確認は、フォームズのメインメニューにある「ログデータ」でできます。

回答が届いていれば完了です。

フォームズの注文フォームの使い方と作成方法

続いて、フォームズによる注文フォームの使い方と作成方法を紹介します。

下記手順に従って、注文フォームを作成してみましょう。

  1. 注文フォームの設置
  2. 商品リストの編集と追加
  3. その他設定
  4. 支払方法を追加(PayPalと連携)
  5. フォーム確認
  6. フォームの保存と埋め込み

【STEP①】注文フォームの設置

「注文フォームを有効にする」にチェック

出典:フォームズ

フォームズのメインメニューから「注文フォーム」を選択して「注文フォームを有効にする」にチェックを入れます。

【STEP②】商品リストの編集と追加

次に商品リストの編集と追加を実施します。

「商品名」「単位」「在庫」「価格」などを入力

出典:フォームズ

「商品名」「単位」「在庫」「価格」などを入力していきます。

商品を追加する場合は下部の「商品追加」を選択してください。

【STEP③】その他設定

その他の設定

出典:フォームズ

下記内容の設定を実施して、最後に「更新する」を選択しましょう。

▼スマホの場合は横にスクロールしてご覧ください

注文フォーム設定項目 詳細
ラベル 商品名・単価等のラベル名を変更できる
単価表示 単価表示のあり・なし
注文数 注文数の上限設定
合計/小計 合計/小計表示のあり・なし
送料計算 送料の設定
支払い方法 各種支払い方法の手数料を記載
消費税 消費税表記の設定
在庫数表示 在庫数表示数の設定
通貨単位 日本円以外の通貨表記へ変更

【STEP④】支払方法を追加(PayPalと連携)

「PayPal決済を有効にする」にチェック

出典:フォームズ

続いて、メインメニューの「投稿完了/外部連携」を選択して「PayPal決済を有効にする」にチェックを入れます。

チェックを入れると連携画面が立ち上がります。

連携には、PayPalの「マーチャントID」が必要になるので、PayPalにログインして取得しましょう。

マーチャントIDは、PayPalにログイン後「設定」→「アカウント設定」→「事業者情報」で確認できます。

詳しい方法に関しては、PayPalヘルプセンターを参考にしてください。

「決済金額」「通貨」「URL」の設定

出典:フォームズ

その他にも「決済金額」「通貨」「URL」の設定をして、最後に「更新する」を選択します。

【STEP⑤】フォーム確認

フォーム確認画面

出典:フォームズ

注文フォームを有効にすると、自動的に注文フォームが追加されているので、レイアウトを確認します。

【STEP⑥】フォームの保存と埋め込み

フォームの保存

最後に、通常のフォーム作成と同じように、フォームの保存でURLを発行して、ホームページに埋め込みすれば、注文フォームの設置完了です。

まとめ

フォームズの使い方について紹介しました。

今回のポイントは下記の通りです。

フォームズには以下の機能を搭載しています。

  • 各デバイスに対応したメールフォームの作成
  • SSL通信対応のフォーム作成
  • 自動返信メール機能
  • 注文フォーム作成

フォームズは「フォーム項目のカスタマイズ」や「注文フォームの設置」ができる点がメリットです。

そのため「フォームデザインの細部にまでこだわりたい方」や「注文フォームを設置したい方」に向いています。

今回のコラム記事を参考にして、問い合わせフォームや注文フォームを作成しましょう。

また、当サイト「ビズサイ」ではホームページ制作サービス(サブスクリプション)を提供しています。

ビズサイでは、ホームページの目的に合わせて3種類のプランを用意しており、お申込みから公開まで最短5営業日でホームページ制作ができます(詳しいプラン内容はこちら)。

ホームページに関する記事
人気記事ランキング
インカムを付けている女性

まずは無料でご相談ください。

011-640-1122(受付時間9:00~17:30)