標準機能でできる範囲のご紹介～フォーム編～

フォーム機能では、デザイン設定で「設定デザイン」と「ソースデザイン」を選ぶことができます。
本記事では、設定デザインで実現できることをまとめましたので、作成時の参考にしてください。

デモはこちら

フォームのページ背景色の変更方法

ページ背景色を任意に設定することができます。

画像の挿入方法

画面上部に画像を追加することができます。
画像の表示位置は、「見出しの上」か「見出しの下」を指定することが可能です。

手順

1.挿入したい画像をURL化する
2.ヘッダのURL入力ボックスへ画像URLを入力する

画像はPCやタブレット、スマートフォンによって表示する画像を変更することができるので、
お客様の環境に応じた画像を用意してください。

見出しの設定方法

ヘッダでは「見出し」「見出しの補足説明」「入力時の説明」「入力エラー時の説明」を
設定することができます。

それぞれ「背景色」「文字色」「太字」「センタリング」を任意に選択できます。
画像やフォームのイメージに合わせてご変更ください。

フォーム上の星印と①～③に変更内容が反映されます。

フッタに文字を入れる事で、スパイラルシール下に入力文字を表示させる事ができます。
フッタもヘッダと同様に、「背景色」「文字色」「太字」「センタリング」を任意に選択できます。

フィールドの並び替え方法

フォーム上ではフィールドの並び順を任意に変更することができます。
「項目の表示順」より上下ボタンを利用して並び替えします。

項目タイトル等の文字色の変更方法

「項目タイトル」「項目入力欄」「注意事項」などの文字色や太字を任意に変更することができます。

送信ボタンの設定方法

送信ボタンの色や文言を任意に変更することができます。
また送信ボタンを画像にすることも可能です。

注意事項や例文の設定方法

フォームの画面左側メニューのフィールド別チェックからそれぞれ項目ごとに、
「例文」「注意事項」「プレースホルダー」「接頭語・接尾語」の設定が可能です。

その他

リンク挿入方法

フォームのなかにリンクを挿入するには<a href="〇〇">□□</a>の〇〇にリンク先URLを入れて、
□□にリンクにする文字などを入れることで可能です。
記述例

当社HPは<a href="https://www.spiral-platform.co.jp/company/">こちら</a>からご覧ください

見た目：当社HPはこちらからご覧ください
※本記事ではページの切り替わりを避けるため、別タブで開くよう記述しています。

YouTubeの埋め込みタグ

デモフォームでは、入力時の説明欄にYouTubeの埋め込みタグを挿入しております。
YouTubeを埋め込みたい場合には、埋め込みたい動画を開いていただき、共有を押下します。
その際に共有画面に「埋め込む」と表示されますので、こちらを押下し、
画面に表示される「<iframe width～～/iframe>」のタグをコピーして、
任意の場所に張り付けてください。