月額定額制(サブスク)ホームページ制作 | ビズサイ
お役立ちコラム

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

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

問い合わせフォームの作成や注文フォームの作成など、多くの使用用途があるサービス「フォームズ(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営業日でホームページ制作ができます(詳しいプラン内容はこちら)。

ホームページに関する記事

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

※年末年始・土日祝は休業日となります
※受付時間 9:00~17:30
※担当者:佐藤 順規