おもてなしフォームの作成方法
MOTENASUのおもてなしフォームとは、HPやLPにタグを追加してフォームを作成できる機能です。おもてなしフォームでは、3種類のフォームを作成することができ、目的に合わせてご利用いただけます。
①リード登録用フォーム・・・・直接MOTENASUにリード登録が可能です
②お問合せ用フォーム・・・・・MOTENASUの管理画面で個別対応ができます
③アンケートフォーム・・・・・アンケート機能で集計も可能です
このフォームを活用することで、顧客情報の収集・お問い合わせ対応・アンケート集計などが行え、必要に応じてセグメント情報の追加も可能です。
さらに、EFO（エントリーフォーム最適化）機能が搭載されており、ユーザーの入力負担を軽減し、フォームの離脱率を下げることが可能です。
1．新規登録
［新規登録］ボタンをクリックします。パーツを並べてフォームを作成し、保存ダイアログで各種の設定を行います。フォームのデザイン作成方法については「CMS・デザイン作成」をご参照ください。
設定が完了したら、画面右上の「保存」ボタンをクリックしてください。
2．おもてなしフォームの詳細設定
おもてなしフォームを作成した後は、保存をクリックして詳細設定を行います。
2-1 タイプ
タイプとは、作成するフォームの用途を選択する機能になります。下記の３つからお選びください
リード登録・・・・直接MOTENASUにリード登録が可能です
お問い合わせ・・・MOTENASUの管理画面で個別対応ができます
アンケート・・・・アンケート用フォームで結果の集計が可能です
2-2 名前
管理しやすい名前を設定してください。
2-3 フォームID
複数のフォームを設置しているとき「どのフォームなのか」を判断するために使います。半角英数字以外を入力するとエラーとなります。
2-4 必須項目
必須で入力させる項目を設定します。ここで必須を選択した項目は必ずフォームにも設置が必要です。タグを使って設置が可能です。
2-5 リード登録・リード更新設定
リード登録
タイプ「お問い合わせ」「アンケート」のとき、MOTENASUにリードとして登録する/しないを選択します。
リード更新
すでに登録済みリードの場合、情報を更新する/しないを選択します。ただし、リード情報を更新する場合はMOTENASUからチャネル配信をする必要があります。
＜ポイント＞
チャネル配信時のフォーム遷移先URLを下記の形式で送付をお願いします。
https://おもてなしフォームタグ設置URL?[[USERUPDATE]]
＊?[[USERUPDATE]] のタグを読み取ってリード情報を更新する事ができます。
2-6 ステージ
お客様がリード登録された際、同時にステージを設定することが可能です。ステージ１～３までご利用いただけます。
2-7 完了時リターンメール自動返信
お客様がフォーム登録を完了された後に、自動でメールを送付する機能です。ここでは、下記が設定可能です。
・送信元アドレス
・送信者名
・メールタイトル
・テキストメール（本文）
・HTMLメール（本文）
2-8 セグメント
お客様がフォーム登録を完了された後に、自動でセグメントを付与することができます。
2-9 リダイレクト
お客様がフォーム登録を完了された後に、遷移させるページを選択できます。
①リダイレクトする・・・・リダイレクトするを選択した場合、貴社HPのトップページなどご希望のページへ遷移させられます。リダイレクトURLにご希望のURLをご記入ください。
②リダイレクトしない・・・リダイレクトをしないを選択した場合は、貴社にて完了ページを作成する事が可能です。
2-10 登録完了時転送アドレス
お客様が登録を完了した後の自動返信メールを受信したい場合、希望するメールアドレスにそのメールを配信することができます。
すべての項目の設定が完了したら保存ボタンを押してください。
3．作成したフォームをHPにセットするためのタグを貼り付ける
作成したフォームは、貴社のHPにタグを埋め込むだけで表示することが可能です。ここでは、貴社のHPに表示させる方法をご紹介します。
3-1 タグをコピーする
［埋め込みコードコピー］ボタンをクリックします。クリックするだけで、タグがコピーされます。
3-2 貴社HPにタグを張り付ける
タグをコピーした状態で、張り付けたいページの編集画面を開いてください。コピーしたソースを既存のWEBページ内のフォームを設置したい場所に貼りつけてください。
4．表示を確認する
フォームのタグをWebサイトに貼り付けたら、実際のページでフォームが正しく表示されるか確認します。入力テストを行い、データの登録・更新が正常に反映されているかチェックしてください。
5．EFO機能について
おもてなしフォームには、ユーザーの入力体験を最適化するEFO（Entry Form Optimization）機能が搭載されています。
EFO v2.0の特徴
・Vanilla JavaScript（ES6+）で実装され、jQueryに依存しません
・リアルタイムバリデーションで即座にフィードバック
・視覚的なエラー表示で入力ミスを防止
・二重送信防止機能
・ページ離脱警告機能
5-1 リアルタイムバリデーション
ユーザーが入力フィールドに値を入力すると、即座にバリデーションが実行され、視覚的なフィードバックが表示されます。
バリデーションのタイミング
・テキスト入力: 文字入力ごとに検証
・選択項目: 選択変更時に検証
・すべてのフィールド: フォーカスアウト時に検証
5-2 視覚的フィードバック
EFOのデザイン（入力OK表示、エラー表示など）は、貴社のWebページにCSSを追加することでカスタマイズできます。
入力OK状態
入力値が正しい場合、フィールドに緑色の枠線と背景色が表示され、「✓ 入力OK」メッセージが表示されます。
・緑色の枠線（2px solid #28a745）
・薄い緑色の背景（#d4edda）
・「✓ 入力OK」メッセージ
エラー状態
入力値にエラーがある場合、フィールドに赤色の枠線と背景色が表示され、具体的なエラーメッセージが表示されます。
・赤色の枠線（2px solid #dc3545）
・薄い赤色の背景（#f8d7da）
・具体的なエラーメッセージ
5-2-1 デザインのカスタマイズ方法
HTMLファイルの<head>タグ内、または</body>タグの直前に、以下のような<style>タグを追加してください。
カスタマイズ可能な要素
・.inputOK: 入力OK時のフィールドスタイル（枠線、背景色）
・.inputOKtxt: 「✓ 入力OK」メッセージのスタイル
・.inputError: エラー時のフィールドスタイル（枠線、背景色）
・.efo-error-message: エラーメッセージのスタイル
・#sub: 送信ボタンのスタイル
カスタマイズ例1: 入力OK時の枠線と背景色を変更する
<style>
.inputOK {
border: 2px solid #0066cc !important; /* 枠線を青に */
background: #e6f2ff !important; /* 背景を薄い青に */
}
</style>
カスタマイズ例2:「✓ 入力OK」メッセージの色とサイズを変更する
<style>
.inputOKtxt {
color: #0066cc !important; /* 文字色を青に */
font-size: 14px !important; /* フォントサイズを14pxに */
font-weight: bold !important;
}
</style>
カスタマイズ例3: エラー時の枠線と背景色を変更する
<style>
.inputError {
border: 2px solid #ff6600 !important; /* 枠線をオレンジに */
background: #fff3e6 !important; /* 背景を薄いオレンジに */
}
</style>
カスタマイズ例4: エラーメッセージの色とサイズを変更する
<style>
.efo-error-message {
color: #ff6600 !important; /* 文字色をオレンジに */
font-size: 14px !important; /* フォントサイズを14pxに */
font-weight: bold !important;
}
</style>
カスタマイズ例5: 送信ボタンの色を変更する
<style>
#sub {
background: linear-gradient(to bottom, #0066cc, #0052a3) !important; /* 青のグラデーション */
color: #fff !important;
}
#sub:hover {
background: linear-gradient(to bottom, #0052a3, #004080) !important; /* ホバー時は濃い青 */
}
</style>
カスタマイズ例6: ラジオボタン・チェックボックスの入力OK時のスタイルを変更する
<style>
input[type="radio"].inputOK,
input[type="checkbox"].inputOK {
outline: 2px solid #0066cc !important; /* アウトラインを青に */
outline-offset: 2px !important;
}
</style>
注意事項
・カスタマイズしたスタイルを確実に適用するために、各プロパティの末尾に!importantを付けてください。
・カスタマイズ用のCSSは、efo-v2.jsを読み込んだ後に配置してください。
・変更が反映されない場合は、ブラウザのキャッシュをクリアしてから再度確認してください。
5-3 バリデーションルール
以下のバリデーションルールが自動的に適用されます。
必須項目チェック
・ルール: 空欄不可
・エラーメッセージ: 「必須で入力してください。」
氏名（カナ）チェック
・対象: lastNameKana, firstNameKana, companyNameKana, departmentNameKana
・ルール: 全角カタカナのみ
・エラーメッセージ: 「全角カナで入力してください。」
メールアドレスチェック
・ルール: RFC準拠、連続ドット禁止
・エラーメッセージ: 「正しいメールアドレスを入力してください。」
電話番号チェック
・対象: tel, companyTel, companyTel2, companyTel3, companyFax
・ルール: 9～13桁の数字（ハイフン任意）
・エラーメッセージ: 「電話番号を半角数字 9 ～ 13 桁で入力してください。」
郵便番号チェック
・対象: zipcode, companyZipcode
・ルール: 7桁または8桁の数字
・エラーメッセージ: 「郵便番号7桁または8桁で入力してください。」
文字数制限チェック
・対象: 氏名、住所、会社名など（85文字以内）
・エラーメッセージ: 「85文字以内で入力してください。」
整数チェック
・ルール: 0または正の整数のみ
・エラーメッセージ: 「数値で入力してください。」
5-4 送信ボタン制御
必須項目の入力状況に応じて、送信ボタンの表示が自動的に制御されます。
送信可能状態
・条件: 全必須項目が入力済み
・表示: ✓ 送信ボタン表示（緑色）
送信不可状態
・条件: 1つ以上の必須項目が未入力
・表示: ✗ エラーメッセージ表示「⚠ 必須項目 N 件を入力してください」
送信中状態
・条件: 送信処理実行中
・表示: ✗ ボタン無効化（グレー）
二重送信防止機能
送信ボタンをクリックすると、処理が完了するまでボタンが無効化され、二重送信を防止します。
5-5 ページ離脱警告
フォームに入力後、送信せずにページを離れようとすると、警告メッセージが表示されます。
警告表示の条件
・未入力: 警告なし
・入力済み & 未送信: 警告あり「登録が完了していません。このまま移動しますか？」
・送信完了: 警告なし
5-6 対応フォームタイプ
EFO機能は以下の3種類のフォームタイプに対応しています。
user（ユーザー登録フォーム）
・APIエンドポイント: /api/user/entry/
・個人情報、法人情報の登録
info（お問い合わせフォーム）
・APIエンドポイント: /api/info/entry/
・カスタムフィールド対応
questionnaire（アンケートフォーム）
・APIエンドポイント: /api/questionnaire/entry/
・質問フィールド対応
5-7 カスタムフィールド対応
標準フィールドに加えて、以下のカスタムフィールドもサポートしています。
text（テキスト入力）
・バリデーション: 必須チェック、文字数制限
text-integer（整数入力）
・バリデーション: 必須チェック、整数形式
textarea（複数行テキスト）
・バリデーション: 必須チェック、文字数制限
radio（ラジオボタン）
・バリデーション: 必須チェック（1つ選択）
selectbox（プルダウンメニュー）
・バリデーション: 必須チェック（デフォルト値以外）
selectbox-multiple（複数選択プルダウン）
・バリデーション: 必須チェック（1つ以上選択）
checkbox（チェックボックス）
・バリデーション: 必須チェック（1つ以上選択）
5-8 ブラウザ対応状況
EFO v2.0は以下のブラウザで動作確認済みです。
デスクトップブラウザ
・Chrome（最新版）: ✓ 完全対応
・Firefox（最新版）: ✓ 完全対応
・Safari（最新版）: ✓ 完全対応
・Edge（最新版）: ✓ 完全対応
モバイルブラウザ
・iOS Safari（iOS 12+）: ✓ 完全対応
・Android Chrome（最新版）: ✓ 完全対応
・WebView（iOS 12+ / Android 5+）: ✓ 完全対応（大文字小文字対応）
WebView対応について
一部のWebView（Chatwork内ブラウザなど）では、HTML要素のname属性が自動的に小文字化される問題がありますが、EFO v2.0では大文字小文字を区別しない要素取得機能により、この問題を解決しています。
5-9 パフォーマンス最適化
EFO v2.0では、以下のパフォーマンス最適化が施されています。
イベントハンドラー最適化
従来のjQuery版では、keydown、keyup、keypressの3つのイベントで処理していましたが、v2.0ではinputイベント1つに集約し、パフォーマンスを66%改善しました。
パフォーマンス目標値
・スクリプト読み込み時間: 1秒以内
・外部スクリプト読み込み: 合計2秒以内
・フォーム操作可能までの時間: ページ読み込みから3秒以内
5-10 モーダルダイアログ
エラー発生時やネットワーク障害時には、モーダルダイアログでユーザーに通知します。
表示タイミング
・送信エラー（制限エラー、ネットワークエラー）
・フォーム読み込みエラー
閉じる方法
・「閉じる」ボタンをクリック
・モーダル外側（オーバーレイ）をクリック
・Escキーを押下
制限エラーメッセージ
「登録の上限に達したため、現在登録を受け付けることができません。お手数ですが、時間をおいて再度お試しください。」
ネットワークエラーメッセージ
「送信に失敗しました。お手数ですが、ページを再読み込みして再度お試しください。」
5-11 レスポンシブデザイン
EFO v2.0は、スマートフォンやタブレットでも快適に利用できるよう、レスポンシブデザインに対応しています。
スマートフォン向け最適化
・フォントサイズ: 16px以上（ズーム防止）
・タップターゲットサイズ: 最低44px
・ラジオボタン/チェックボックス: 20px × 20px
・送信ボタン: 横幅100%、タップしやすいサイズ
5-12 セキュリティ機能
EFO v2.0には以下のセキュリティ対策が実装されています。
XSS対策
・入力値はtextContentを使用してエスケープ
・HTMLタグの自動エスケープ
CSRF対策
・CSRFトークンの検証
・サーバーサイドでのトークン確認
通信セキュリティ
・HTTPS必須
・Cookie属性: Secure, SameSite=Lax
二重送信防止
・送信ボタンの無効化
・処理完了まで再送信を防止
5-13 技術情報
技術スタック
・フロントエンド: Vanilla JavaScript（ES6+）
・依存ライブラリ: なし
・外部連携: Yubinbango.js（郵便番号API）
・Cookie管理: js.cookie.js
6．トラブルシューティング
よくある問題と解決方法について説明します。
問題1: バリデーションが動作しない
考えられる原因:
・efo-v2.jsが正しく読み込まれていない
・必須項目リストが未定義
解決策:
1. ブラウザの開発者ツールでコンソールエラーを確認
2. スクリプトのパスが正しいか確認
3. 必須項目リストが正しく設定されているか確認
問題2: 送信ボタンがクリックできない
考えられる原因:
・必須項目が未入力
・送信中状態が残っている
解決策:
1. すべての必須項目が入力されているか確認
2. ページを再読み込み
問題3: WebViewで動作しない
考えられる原因:
・name属性が小文字化されている
解決策:
EFO v2.0では自動的に対応しているため、通常は問題ありません。それでも動作しない場合は、サポートにお問い合わせください。
問題4: エラーメッセージが日本語で表示されない
考えられる原因:
・文字エンコーディングがUTF-8でない
解決策:
HTMLファイルの文字エンコーディングをUTF-8に設定してください。