2025.4.21時点の確認内容
googleアカウントを利用できるクライアント様の場合、
まずはgoogle formのご提案で良いかと思いますが、
社内規定でgoogleアカウントを作成できないクライアント様もいるため、
その際に代替案として提案できるサービスとして、
「formrun」について調査致しましたので、
ご提案の仕様確認としてご確認ください。
formrun
無料でも最低限のフォームは作成できそうだが、
自動返信メール機能は有料プランからの利用となるため、
利用の際は何かしらの有料プランを利用することになりそう。
有料プランの詳細については下記URLよりご確認ください。
機能概要
フォームに必要な機能は要件によって様々だと思いますが、
頻繁に要件として挙がってきそうな内容で、
formrunで実装可能な内容について箇条書きでまとめております。
- フォームの独自ドメインページへの埋め込み
- htmlやCSSを使用したオリジナルデザインの反映
※コード型での実装の場合 - 入力内容の確認表示
※ただし、同一ページでの確認表示となる。入力内容確認ページを単体では作成できない。 - バリデーション
※ある程度のバリデーションルールは用意されている - 郵便番号からの住所の自動補完
- 自動返信メール
※fromのメールアドレスを独自ドメインにするのであれば最上位プラン - 管理画面でのお問合せ管理
- お問合せ内容の集計
※「FREE」と「BEGINNER」は直近の7日間のみ
機能一覧抜粋
頻繁に要件として挙がってきそうな内容について抜粋
| FREE | BEGINNER | STARTER | PROFESSIONAL | |
|---|---|---|---|---|
| フォーム作成数 | 1 | 5 | 50 | 無制限 |
| 月間フォーム回答数 ※コード型（htmlでの自作） であれば無制限 | 30 | 100 | 無制限 | 無制限 |
| フォーム送信前の確認画面表示 | ||||
| formrunクレジット非表示 | ||||
| CSV / Excel エクスポート | ||||
| 独自ドメインのメールアドレス設定 | ||||
| パスワードによるフォーム閲覧制限 | ||||
| 自動返信メールの送信数(無制限) | ||||
| 回答集計機能 | ||||
| 受付データのダッシュボード | 直近7日間のデータ | 直近7日間のデータ | 一度にエクスポートできるデータの最大件数は【回答数×項目数】の合計が10,000件まで | 一度にエクスポートできるデータの最大件数は【回答数×項目数】の合計が10,000件まで |
コード型での実装について
formrunでは画面操作で作成できる「テンプレート」での作成と、
自由なマークアップで作成できる「コード型」の2パターンが存在しますが、
コード型で実装する方法について記載致します。
「設定＞埋め込み」から基本コードを確認
formタグの基本的な構造として、
左赤枠部分のclass, action, method変更しなければ、
あとは自由にマークアップを変更したり、
CSSやjsを使用してデザインを調整することが可能です。
formタグのactionに指定されているURLは、作成するフォームごとに一意の内容となります。
必ず使い回さずフォームごとに管理画面から取得してください。
※別のフォームで使用したURLを使い回すと集計データがグチャグチャになる。
左図のスクリプトは全ページ共通で使用してOK。
これを読み込ますことで、formrun側で提供しているバリデーションやエラー表示などが機能するようになるので、入れ忘れないようにしてください。
フォームの実行を許可するドメインを記載してください。
また左図赤枠部分に、
問い合わせ完了時のサンクスページを設定する箇所があるので、こちらも設定するようにしてください。
※ここを設定していないと、formrun側で提供しているデフォルトのサンクスページが表示される。
よく使いそうなコード事例
サポートサイトにサンプルコード事例があるので、何かあればまずはそちらをご確認ください。
https://faq.form.run/samplecode
具体的な実装方法は上記サンプルコード事例を見ていただくのが確実だと思うので、
構築時に気が付いた上記ページでは触れられていない使えそうな内容について記載しておきます。
確認画面モードを有効にする
Formタグに data-formrun-confirm=”true” 属性を指定することで、確認フェーズを挟みますが、すべてのバリデーションをクリアして確認画面表示になると、bodyに「formrun-system-confirm」というclassが付与されるので、条件分岐やcssの記述に使える。
<body class="formrun-system-confirm">
・・・確認画面モードを有効にする
上記、赤枠のような確認ボタンや、入力内容を修正するボタンを設置した際、formrun側のjsでformのトップまで遷移してくれる機能が備わっているが、追従ヘッダーが存在していた場合、そこまで考慮して遷移することができなたったため、オリジナルでjsを組んで調整しました。
具体的な動作については下記ページで実装
左図の処理は下記jsファイルにて関数化してます。
jsファイル内に使い方の注釈みたいなのも入れているので仕様の際はそちらをご確認ください。
Q:\80.coding\cynosura.jp\nacwith\public_html\js\formrun.cstm_v2.js
// 戻るボタンを押した時の処理
setupBackButtonScroll('#button_mfp_gocancel', '#request-form','.header-Fixed');
// 確認画面遷移時のスクロール設定
setupScrollToFormOnConfirm('#request-form', 'formrun-system-confirm', '.header-Fixed');エラーテキスト
タグに data-formrun-show-if-error= name属性を指定することで、必須項目の漏れやバリデーションエラーがあった際、エラー時にテキストを表示させることができるが、formrun側が提供しているjsではエラー箇所まで遷移する機能は提供されていなかったため、オリジナルでjsを組んで調整しました。
具体的な動作については下記ページで実装
例：エラーがあった際、「お名前を正しく入力してください」が表示される。
<input type="text" name="お名前" data-formrun-required>
<div data-formrun-show-if-error="お名前">お名前を正しく入力してください</div>左の事象についても関数化してます。
jsファイル内に使い方の注釈みたいなのも入れているので仕様の際はそちらをご確認ください。
Q:\80.coding\cynosura.jp\nacwith\public_html\js\formrun.cstm_v2.js
// 送信ボタンクリック時の処理
setupScrollToFirstErrorWithHeaderOffset('.entryBtn', 'formrun-system-show', '#request-form', '.header-Fixed');