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

こんなBEFORE/AFTERも作成できます!

図00

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

今回は【1】~【3】についてご案内します!
【1】色を変えてフォームのイメージを編集する![易]
【2】JavaScriptを組み込み入力しやすく編集する![難]
【3】HTMLソースを編集して、項目の見せ方を編集する![難]

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

詳しくは下記の通りです。



【1】色を変えてフォームのイメージを編集する![易]

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

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

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

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

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

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

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

【1-7】
【1-1】から【1-6】まで完了させると、図のようなフォームになります。
図07

トップに戻る



【2】JavaScriptを組み込み入力しやすく編集する![難]

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

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

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


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

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

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

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

【2-3】
▼をクリックして「URLをコピーする」をクリックします。

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

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

図14

【2-6】
①入力設定画面の「オリジナルHTMLアップロード」にて「HTMLを新しくアップロードする」を選択。
②編集したHTMLソースを「参照」して
③【フォームを更新】します。

【2-7】
【1-1】から【2-6】まで完了させると、図のようなフォームになります。
図16

トップに戻る



【3】HTMLソースを編集して、項目の見せ方を編集する![難]

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

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

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

図18

【3-3】
①入力設定画面の「オリジナルHTMLアップロード」にて「HTMLを新しくアップロードする」を選択。
②編集したHTMLソースを「参照」して
③【フォームを更新】します。

【3-4】
【1-1】から【3-3】まで完了させると、図のようなフォームになります。
図20

トップに戻る

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