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

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

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

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

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

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

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

フォームズとは

出典：フォームズ

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

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

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

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

フォームズの機能

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

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

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

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

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

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

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

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

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

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

自動返信メール機能

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

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

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

注文フォーム作成

出典：フォームズ

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

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

その他機能

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

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

フォームズの料金

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

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

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

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

Googleフォームとの比較

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

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

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

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

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

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

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

フォームズの使い方

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

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

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

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

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

出典：フォームズ

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

出典：フォームズ

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

【STEP②】フォーム作成

出典：フォームズ

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

出典：フォームズ

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

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

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

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

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

項目追加

出典：フォームズ

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

出典：フォームズ

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

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

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

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

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

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

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

出典：フォームズ

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

出典：フォームズ

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

出典：フォームズ

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

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

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

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

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

出典：フォームズ

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

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

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

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

出典：フォームズ

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

出典：フォームズ

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

YouTube動画を埋め込む

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

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

出典：フォームズ

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

出典：フォームズ

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

出典：フォームズ

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

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

出典：フォームズ

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

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

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

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

手順は下記の通りです。

出典：フォームズ

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

出典：フォームズ

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

出典：フォームズ

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

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

【STEP⑤】フォームの保存

出典：フォームズ

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

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

出典：フォームズ

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

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

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

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

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

リンクを貼り付ける方法

自社ホームページにリンクを貼り付ける場合は、<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の「マーチャントID」が必要になるので、PayPalにログインして取得しましょう。

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

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

出典：フォームズ

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

【STEP⑤】フォーム確認

出典：フォームズ

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

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

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

まとめ

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

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

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

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

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

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

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

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

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