フォーム入力支援方法

①ダッシュボードの「施策」から「フォーム入力支援」をクリックします。

②「フォーム新規作成」をクリックします。

フォーム入力支援で使用するフォームの登録を行います。

③フォーム名を入力し、「作成」をクリックします。

作成すると施策一覧画面が表示されます。
「フォーム一覧」をクリックします。

新規作成したフォーム設定が確認できます。
「フォーム設定」をクリックします。

④フォーム入力支援のフォーム設定作成を行います。

input登録/編集

フォームの入力支援を入れるページの各入力項目を設定できます。

■管理用タイトル

入力支援を設定したい項目に管理用タイトルをつけることができます。

入力項目の名称を入力してください。

例）お名前、住所、メールアドレスなど

■name属性

各入力項目の枠を設定し、入力支援を行うことができます。

フォームに設定されている各項目 HTML要素のname属性を入力してください。

例）name="〇〇〇〇"　（〇〇〇〇に当てはまる箇所です。）
※一部フォームでname属性が付与されていないケースがございますので、その際はname属性を追加ください。

name属性の確認方法

サイトのフォームからname属性の名前を確認。（以下の場合、name属性名は「name」）

■inputの設定

入力したinputのタイプを選択することができます。

任意項目・必須項目・送信ボタンから選択してください。

■削除

設定したinputを削除することができます。

⑥入力が完了したら「更新して一覧へ」をクリックします。

⑦作成完了

画面上部に「設定を更新しました。」と表示されれば、作成完了です。

⑧次に「コンテンツ設定」をクリックします。

以下のように、設定一覧が表示されますので、まずは各機能を設定します。

【ガイドナビゲーション/ プログレスバー】

全入力項目数のうち、どれだけ入力済みかがリアルタイムにわかります。

※PC・スマホそれぞれ設定してください。

有効/無効：機能を追加するかどうかです。有効になっていないと、設定内容は反映されません。

プログレスバー：プログレスバーを使うかどうかです。

表示形式：◯/◯で表示 か◯%表示かを選択できます。

表示形式一覧

▽ ◯/◯で表示

▽ ◯%表示

必須項目のみカウントする：「input登録/編集」で設定した項目の「必須項目」のみをカウントします。

コメント内容：プログレスバー内の文言を変更したり、HTML, CSSを追加してカスタマイズができます。デフォルトは◯/◯入力済みです。

表示位置：テーブルから指定と詳細に指定が選べます。

テーブルから指定：8箇所からバーの位置を選択してください。

詳細に指定：pxで指定します。ヘッダーの高さ分を空けたいといった細かな調整ができます。
　　　　　　手順：「詳細に設定」を選択→上/下・左/右どちらかを選択→px設定

【フォーム背景色】

ユーザーに「どこを必須で入力すればいいか」や「どこを入力完了したか」をわかりやすく区別するための機能です。

※PC・スマホそれぞれ設定してください。

有効/無効：機能を追加するかどうかです。有効になっていないと、設定内容は反映されません。

オートコンプリート対応：ブラウザのオートコンプリートで入力した時にも「必須項目/任意項目入力後の色」を反映させたい場合はこちらを有効にしてください。
※有効にした場合、フィールド上の画像要素やラジオボタン・チェックボックス等が表示されなくなる可能性があります。

自動入力検知：外部のサービス等で自動入力されても背景色が変わらない場合はこちらを有効にしてください。

必須項目入力前の色：必須項目を入力する前の背景色を選べます。

基本的に赤色に近い色が必須項目とわかりやすいかと思います。

必須項目入力後の色：必須項目を入力した後の背景色を選べます。

基本的に入力項目の元々の色と揃えてあげることで、馴染みやすくなります。

任意項目入力前の色：必須項目を入力した後の背景色を選べます。

基本的に入力項目の元々の色と揃えてあげることで、馴染みやすくなります。

任意項目入力後の色：任意項目を入力した後の背景色を選べます。

基本的に入力項目の元々の色と揃えてあげることで、馴染みやすくなります。

【メールアドレスサジェスト】

自動で@以降のアドレスを提案してくれる機能です。
@gmai.comや@yahoo.co.jpのように、ユーザーの入力の手間を省けます。

有効/無効：機能を追加するかどうかです。有効になっていないと、設定内容は反映されません。

管理用タイトル：「input登録/編集」で設定した入力項目のうち、メールアドレスを選択します。
「＋」をクリックしてフォームを選択してください。複数選択可能です。

【サブミットブロック】

必須項目をすべて入力しないとフォームの送信ボタンを押せなくする　という機能です。

ユーザーが入力項目漏れがないか確認する基準になります。

※PC・スマホそれぞれ設定してください。

有効/無効：機能を追加するかどうかです。有効になっていないと、設定内容は反映されません。

ブロックタイプ：「HTML・CSSによる制御」と「画像による制御」の2つから選べます。

「HTML・CSSによる制御」

ボタンを押せなくする：必須項目の入力が完了していないと、ボタンを押せなくするかどうかを選べます。
ボタンの色を変更：以下2つの設定を適用するかどうかを選べます。
　「送信不可時のボタンの色」：送信前のボタンの色を選べます。
　「送信不可時のボタンの透明度」：上記で選択した色のボタンの透明度を調整できます。値が小さくなればなるほど、ボタンの色が薄くなります。
ボタン内のテキストを変更：以下2つの設定を適用するかどうかを選べます。
　「送信不可時のテキスト」：ボタン内の文言も自由に変更できます。
　「送信不可時のテキストの色」：ボタン内の文言のテキストの色も変更できます。

「画像による制御」

ボタン内の文言ではなく、画像をボタン上に乗せることができます。

LPのようなボタンが画像で作られるケースで活用いただけます。

送信不可時の画像ファイル：ご自身のPCから写真をアップロードいただけます。
画像サイズ：画像のサイズをピクセル単位で調整できます。

【フリガナ入力補助設定】

名前の漢字を入力すると、自動でふりがなが入力される機能です。

ユーザーの名前の入力の手間を半減できます。

有効/無効：機能を追加するかどうかです。有効になっていないと、設定内容は反映されません。

漢字タイトル：「input登録/編集」で登録した入力項目を選択します。

ふりがなに変換したい漢字の入力項目を登録します。
フリガナタイトル：「input登録/編集」で登録した入力項目を選択します。

ふりがなに変換される入力項目を登録します。
変換タイプ：ふりがなとカタカナのどちらに変換するかを選択できます。

※複数設定する場合は「＋」をクリックして設定フォームを追加してください。

【住所自動入力】

郵便番号を入力すると、自動で都道府県から町名までを表示できます。

フォーム入力支援機能で一番インパクトの大きい機能です。

都道府県コード設定：都道府県セレクトボックスを使用している場合は各optionのvalue値を設定してください。※value値がJIS規格と一致している場合は設定不要です。

有効/無効：機能を追加するかどうかです。有効になっていないと、設定内容は反映されません。

郵便番号用タイトル：郵便番号の入力項目を選択します。郵便番号が２つに分かれている場合：◯◯◯-◯◯◯◯のように、3桁と4桁で入力項目を分けている場合は、分けて登録できます。
住所用タイトル１：タイトル１のみの選択で、都道府県名・市町村名・町域名をまとめて入力します。

都道府県と市区町村、建物名と分かれている場合は、都道府県のみの項目を選びます。
住所用タイトル２：都道府県名を１に、市町村名・町域名を２に入力します。
住所用タイトル３：都道府県名を１に、市町村名を２に、町域名を３に入力します。

住所検索 有効／無効：郵便番号が分からない時の逆引き検索機能です。

住所検索を「有効」にしてください。

見た目の設定を行えます。

▽詳細

⑨各input設定を行います。

以下3機能を各入力フォームに対して設定できます。

①初期文言設定
②リアルタイムアラート設定
③自動変換機能設定

①初期文言設定

placeholder(プレースホルダー)のことです。

入力項目にどういったテキストを入力すればいいか、例を示すことができます。

▽例

※PC・スマホそれぞれ設定してください。

有効/無効：機能を追加するかどうかです。有効になっていないと、設定内容は反映されません。

初期文言：placeholderのテキストを自由に変えることができます。
文字色：初期文言のテキスト色を変えることができます。目立ちすぎると入力中のテキストと区別がつきにくいため、薄めのグレーを推奨します。

▽以下、設定なしであればサイトのフォーム設定が反映されます。
文字サイズ：初期文言の文字サイズを調整できます。
文字太さ：初期文言の文字の太さを調整できます。
文字間隔：初期文言の各文字間の広さを調整できます。
文字行間：初期文言の文字の高さを調整できます。
上下余白：初期文言と入力項目の枠との間の上下余白を調整できます。
左右余白：初期文言と入力項目の枠との間の左右余白を調整できます。

②リアルタイムアラート設定

ユーザーが入力を進めるごとに、アラートを出してくれます。

※PC・スマホそれぞれ設定してください。

有効/無効：機能を追加するかどうかです。有効になっていないと、設定内容は反映されません。

入力形式：

※１　パスワード設定方法

「パスワード」を選択すると、「パスワード強度チェック」の設定フォームが表示されます。

適宜設定をしてください。

パスワードの表示を有効にすると、入力した文字が「⚫︎⚫︎⚫︎」のように表示されます。

目のマークをクリックすると入力した文字が表示されます。

※２　フリーテキスト設定方法

「フリーテキスト」を選択すると、テキスト入力エリアが表示されます。

任意のテキストを入力してください。

入力したテキストがそのまま表示されます。

文字数制限：◯文字以上 ◯文字以下と、文字数に制限を加えることができます。パスワードや電話番号、郵便番号等で有効です。

入力成功サインの表示：入力項目の枠内に、チェックマークが表示されます。

▽表示例

禁止文字設定：指定したテキストの入力時に、エラー判定します。

▽表示例

禁止文字ルールの設定方法について

①「禁止文字ルール一覧」をクリックします。

②「作成」をクリックします。

③ルールの名前を入力し、作成をクリックします。

④「設定画面を開く」をクリックします。

⑤禁止したい文字を登録します。

正規表現・個別登録、お好みの方法でご登録いただけます。

正規表現の例

禁止文字：「松」「竹」「梅」

他にも追加したい場合は[松竹梅桃桜] のように[] 内に文字を加える

▽アラート

〜他の例〜
・「a」「b」「c」を禁止　→　[abc]
・「abc」を禁止　→　abc
・「abc」「def」「ghi」を禁止　→　abc|def|ghi

個別登録の例

禁止文字：「松竹梅」
「＋」をクリックして、設定フォームを追加します。

アラート文言は以下のようになります。

▽松：「前方一致」

▽竹：「後方一致」

▽梅：「部分一致」

⑥設定が完了したら「更新」をクリックします。

③自動変換機能設定

入力中のテキストを任意の形式に自動変換します。

例えば、全角の数字を入力すると、自動で半角数字に変換されるといった設定ができます。
→

※PC・スマホそれぞれ設定してください。

有効/無効：機能を追加するかどうかです。有効になっていないと、設定内容は反映されません。

それぞれのフォームに合わせて適宜設定してください。

ひらがな：
　カタカナをひらがなに：カタカナをひらがなに自動変換します。名前のふりがなの入力に有効です。
カタカナ：
　ひらがなをカタカナに：ひらがなをカタカナに自動変換します。名前のフリガナの入力に有効です。
　半角カタカナを全角カタカナに：半角カタカナを全角カタカナに自動変換します。名前のフリガナの入力に有効です。

数字：
　全角を半角に：全角数字を半角数字に自動変換します。電話番号や郵便番号、メールアドレスに有効です。

アルファベット：
　全角を半角に：アルファベットの全角を半角に自動変換します。メールアドレスの入力に有効です。
　大文字を小文字に：アルファベットの大文字を小文字に自動変換します。

記号：
　全角伸ばし棒をハイフンに：全角伸ばし棒をハイフンに自動変換します。メールアドレスや電話番号、郵便番号の入力に有効です。
　ハイフンを削除：「-」を削除します。電話番号や郵便番号入力に不要であれば設定してください。
　全角＠を半角＠に：全角＠を半角＠に自動変換します。メールアドレスの入力に有効です。

条件付き必須設定

ラジオボタン・チェックボックスなどの項目に使用することで、入力項目にカウントできます。

例）個人情報提供への同意のチェックマークなど

Radio、または　Checkbox 内のIDまたはvalue値を入力します。

⑩「（登録して）施策作成に進む」をクリックします。

⑪フォーム入力支援のフォーム設定作成を行います。

■施策名

任意の施策名を入力します。

■ラベル

ラベルを変更することができます。

※ラベルの変更や追加は「ラベル管理」から行えます。

■並び順

並び順指定がある場合は設定してください。

（並び順についてはこちら）

■適用URL

フォーム入力支援を使用したいページのURLを登録してください。

※表示するサイトのドメインを選択してください。
※白枠の入力欄は「https://example.com/〇〇 」の「〇〇」に当たるパスを入力してください。

■コンバージョンURL

コンバージョンに設定するURLを入力します。

■適用フォームコンテンツ
「コンテンツ設定」にて作成したフォームコンテンツを選択してください。

■プレビュー設定

プレビュー画面として使用したいページのURLを入力します。「HTMLソースを登録」に切り替えると、HTMLを直接入力できます。

⑫入力完了したら「作成して一覧へ」をクリックしてください。

⑬施策一覧画面に追加されます。

⑭施策を稼働

全ての施策設定が完了したら施策を稼働します。

施策設定画面内の「有効/無効」をON。

もしくは、一覧画面から状態を「稼働中」に変更します。

稼働したら、実際のサイトで表示確認を行なってください。

一覧画面の見方

フォーム入力支援施策 一覧

・施策新規作成：施策の新規作成ボタンです。
・フォーム新規作成：フォーム設定の新規作成ボタンです。
・絞り込み検索：設定した施策の絞り込み機能です。（→絞り込み機能）
・フォーム一覧：設定したフォーム設定の一覧ページに移動します。
・更新日：更新日による並び替え機能です。（→更新日で並び替え）
・並び順：任意の順番に施策の並べ替えが行えます。（→並び順）

・No.：施策の並び順番号
・施策名：設定した施策名です。「施策設定」から変更可能です。
・状態：有効か無効かを表示します。有効の場合は「稼働中」、無効の場合は「停止中」と表示されます。
・プレビュー：⑪で設定したページをプレビューで確認できます。
・レポート：レポートを確認します。
・作成日：施策を作成した日時
・更新日：施策を更新した日時
・設定
　∟施策設定：設定した内容の変更ができます。
　∟フォーム設定：施策を連携しているフォーム設定の編集ができます。
　∟コンテンツ設定：施策を連携しているフォームのコンテンツ設定の編集ができます。
　∟複製：施策の複製ができます。
　∟削除：施策を削除できます。

フォーム一覧

・作成：フォーム設定の新規作成ボタンです。
・フォーム入力支援一覧：設定したフォーム入力支援施策 一覧ページに移動します。
・更新日：更新日による並び替え機能です。（→更新日で並び替え）
・並び順：任意の順番に施策の並べ替えが行えます。（→並び順）

・No.：施策の並び順番号
・フォーム名：設定したフォーム名です。「フォーム設定」から変更可能です。
・設定
　∟フォーム設定：フォーム設定の編集ができます。
　∟コンテンツ設定：コンテンツ設定の編集ができます。
　∟複製：施策の複製ができます。
　∟削除：施策を削除できます。

絞り込み機能

設定した施策の絞り込みが行えます。

■ステータス
　施策の状態で絞り込みができます。
　∟全て：設定した全ての施策
　∟稼働中：稼働中の施策のみ
　∟停止中：停止中の施策のみ

■部分一致検索
　施策名の部分一致検索ができます。

※絞り込み機能は併用可能です。

更新日で並べ替え

施策の更新日による並べ替え機能です。
　∟デフォルト（選択してください）：名前順（並び順設定がある場合は優先）
　∟新しい順：更新日の新しい順
　∟古い順：更新日の古い順

並び順

施策の並び順を設定できます。

①並び替えたい順に数字を入力します。入力が完了したら「並び順(更新)」をクリックします。

②入力した数字順に施策が並び替わります。

---

その他、設定中に不明点がございましたらお問い合わせください！