フォームをカスタマイズする

こんなBEFORE/AFTERも作成できます!
※新フォーム管理はオリジナルHTMLデザインが適用できないため、対象外です。

図00

フォームカスタマイズのサービスもご用意しています。詳細はこちらをご覧ください。

今回は1~3についてご案内します!

画像の挿入方法はこちらをご覧ください。

1.色を変えてフォームのイメージを編集する<難易度:低>

  1. まずは通常どおりフォームを作成します。

    ※旧デザインフォームでの色の変更方法になります。
    図01

  2. フォーム>フォーム管理から該当フォームの【編集】>「スタイル設定」の「旧スタイル設定はこちら」のリンクをクリックします。

  3. レイアウト設定にて、必要があれば「画像位置」や「分割パターン」を編集して【進む】をクリックします。
    ※サンプルの場合は分割パターンを「罫線なし」にしています。

  4. カラー設定の詳細設定にて色を指定します。
    ※ちなみに(4)タイトル背景色・(12)項目背景色を変えるだけで大きくフォームのイメージが変わります。
    例えば、(4)タイトル背景色を設定したい場合、該当の【選択】ボタンをクリックします。

  5. すると、別画面で216色から色を選択できる画面が表示されるので、設定したい色をダブルクリックします。
    図05

  6. 詳細設定の該当欄に5で選択した色のコードが入力されます。
    他にも色を変更したい場合は続いて同じように設定します。
    最後に色の設定が完了したら【完了】をクリックします。

  7. 1を完了させると、図のように色を変更することができます。
    図07

2.JavaScriptを組み込み入力しやすく編集する<難易度:高>

ご注意ください!

JavaScript(※)の設定をする為には、ある程度のHTMLの知識が必要です。ここではHTMLを理解していることを前提としてご案内します。
外部JavaScriptにアップロードするファイルは事前に用意してください。
※JavaScriptとは、あらかじめ“HTMLや外部ファイル(.jsファイル)として書き込んだ”ソースを“HTMLからリンクして呼び出し”、HTML上で動作をさせる技術です。

  1. ファイル管理を開き、ファイルをアップロードしたい階層を表示します。

  2. 「アップロード」ボタンをクリックします。

    ①ファイルを「公開」に選択します。
    ②ファイルを枠内にドラッグ&ドロップするか、「または、ここをクリックしてファイルを
     選択」ボタンよりファイルを読み込みます。

    アップロード済みのファイル名と同名のファイルをアップロードした場合、上書き登録となります。

    ファイル名は50文字まで登録ができます。
    ファイル名には半角英数字、ドット、ハイフン、アンダーバーが使用できます。
    ただし、ファイル名の先頭にドットは使えません。

    アップロードできる1ファイルの上限は20MBまでです。
    空のファイルはアップロードできません。

  3. ▼をクリックして「URLをコピーする」をクリックします。

  4. 生成されたURLをHTMLファイルにて利用します。

  5. HTMLソースのヘッダ部分にて、JavaScriptが呼び出せるように設定します。
    またJavaScriptを動作させる部分を編集してソース保存します。

    図14

  6. 入力設定画面の「オリジナルHTMLアップロード」にて「HTMLを新しくアップロードする」を選択します。
    編集したHTMLを「ファイルを選択」から選び、「フォームを更新」を押します。

  7. 2を完了させると、図のように「ご依頼主と送り先が異なる場合はチェック」にチェックをした際だけ送り先氏名・電話番号・住所などの項目を表示させることができます。
    図16

3.HTMLソースを編集して、項目の見せ方を編集する<難易度:高>

  1. フォーム>フォーム管理から該当フォームの【編集】>画面設定「入力画面」の【設定】をクリックします。

    「デザイン選択」で「オリジナルHTMLを適用する」を選択すると画面が変わるので、「オリジナルHTMLアップロード」内の「テンプレートHTMLをダウンロード」のボタンをクリックしてHTMLソースを保存します。

  2. 保存したテンプレートHTMLソースを表示し、必要な箇所を編集します。

    図18

  3. 入力設定画面の「オリジナルHTMLアップロード」にて「HTMLを新しくアップロードする」を選択します。
    編集したHTMLを「ファイルを選択」から選び、「フォームを更新」を押します。

  4. 3を完了させると、図のようにトップの画像と最後の3つの項目を横並びに表示させることができます。
    図20

この記事は参考になりましたか?
参考になった参考にならなかった
読み込み中...
この記事への評価、ご指摘がございましたらご入力ください。
※ご入力内容への回答はできません。ご質問はフォームよりお問い合わせください。