ver.1サポートサイト

フォームのソースデザインを編集したい

最終更新日:2021年10月29日

フォームのデザインを「ソースデザイン」で編集する場合の簡易なHTMLソースをまとめています。
フォームの作成方法については「フォーム」を、フォームの複製方法については「フォームを複製したい」をご覧ください。

 

注意事項

 

【関連記事】

稼働中のフォームにフィールド(質問項目)を追加したい

稼働中のフォームのフィールド(質問項目)を削除したい

 

ソースデザインの編集方法

フォームの編集>ページ設定>入力ページ(確認ページ・サンキューページ・締め切りページ・システムエラーページ)

 

フォームのデザイン編集は、入力ページ・確認ページ・サンキューページ・締め切りページ・システムエラーページそれぞれの編集が必要になる場合があります。

 

(1)入力ページ>デザイン で、「ソースデザイン」を選択する

 

 

(2)入力ページ用HTML でHTMLソースをDLする

 

 

 

①デフォルトデザイン フォームを発行したときの初期のデザインのHTMLソース
②設定デザイン SPIRALのデフォルトのデザインで、フィールド別チェック等(※)での変更や、項目を追加した際に反映されるHTMLソース
③ソースデザイン デフォルトのデザインからHTMLの修正をしている場合のHTMLソース

 

※フィールド別チェックとは、各フィールドごとに入力制限を設定したり、入力に不備があった場合に表示するエラーメッセージを登録する設定のことです。

 

(3)テキストエディタでDLしたファイルを開く

 

 

※編集するファイルとは別にバックアップを作成してください。

※テキストエディタはメモ帳・Terapad・秀丸など普段ご利用のものをご利用ください。

1. ページタイトルを修正したい

 

 

ファイルの上部、<head></head>のタグで挟まれた箇所に記載されている<title></title>タグの間に挟まれた文言を修正します。

 

<head>
<title>キャンペーン応募フォーム</title>
</head>

 

2.見出しを修正したい

 

 

<body>以下に記載されている<h1></h1>タグの間に挟まれた文言を修正します。

 

<h1>キャンペーン応募フォーム</h1>

 

3.テキストを修正したい

 

 

ブラウザ内検索(Ctrl + F)で修正したい箇所を見つけ、文言を修正

<p class="header_rmesg">必要事項をご入力の上、送信ボタンを押してください。</p>

 

4.文字を太字にしたい

 

 

太字にしたいテキストを<b></b>、<em></em>、<strong></strong>で強調します。

※3種類とも太字になりますが、SEOの観点で強調の意味合いに違いがあります。

<b>太字になるが強調の意味はない</b>
<em>太字になり、強調の意味がある</em>
<strong>太字で、最も強調したい箇所に使う</strong>

 

5.文字の色を変更したい

 

 

色を変更したいテキストを<font></font>タグで挟みます。

色の指定は、colore=”#FF0000″ の “” で囲まれた部分にカラー名(red)やカラーコード(#FF0000)を記載します。

カラーコードは、外部サイト「原色大辞典」などが参考になります。

 

<p>必要事項をご記入の上、<font color="#FF0000">送信</font>ボタンを押してください。</p>

 

6.テキストにリンクを貼りたい

 

リンクさせるテキストを<a></a>で囲みます。

リンク先のURLは、href=”” の””の中に記載します。

タブを別にしたい場合は、target=”” の “”に_blankを記載します。同じタブに表示させる場合は、target=”_blank”の記載は必要ありません。

 

/* 別タブで開く */
<a href="https://www.pi-pe.co.jp" target="_blank">パイプドビッツ公式HP</a>

/* 同じタブで開く */
<a href="https://www.pi-pe.co.jp">パイプドビッツ公式HP</a>

 

7.項目の並び順を変更したい

 

 

例:項目「メールアドレス」を「お名前」の上に並べ替えたい

 

下記の①メールアドレスの入力欄を表示させるHTMLソースを、②お名前の入力欄を表示させるHTMLソースの上に切り取って挿入します。

 

①メールアドレスの入力欄を表示させるHTMLソースを切り取る

 

<dl class="cf">
<dt class="title">
メールアドレス <span class="need">*</span>
</dt><dd class="data ">

<input class="input $errorInputColor:mail$" type="text" name="mail" value="$mail$" maxlength="129" ><br>
(確認用)<br>
<input class="input $errorInputColor:mail$" type="text" name="mail:cf" value="$mail:cf$" maxlength="129" ><br>

<span class="msg">$error:mail$</span>
</dd>
</dl>

 

②お名前の入力欄を表示させるHTMLソースの冒頭<dl>の直前に挿入する

 

/* ここに①のHTMLソースを挿入する */<dl class="cf"> <dt class="title"> お名前 </dt><dd class="data "> <input class="input $errorInputColor:name$" type="text" name="name" value="$name$" maxlength="64" > <br> <span class="msg">$error:name$</span> </dd> </dl>

 

※ソース内に$で囲まれた文字列はDBやフォームの設定によって異なります。必ずHTMLソースは「ソースデザインの編集方法」の方法で取得したソースデザインをご利用ください。

例:$mail$など

 

※確認ページの項目も同様の作業を行ってください。

 

<実際のHTMLソースの挿入イメージ>

 

赤枠で囲っているメールアドレスの入力欄を表示するのソースを矢印の部分に挿入する。

 

 

 

 

 

より詳細なHTMLタグは「HTMLクイックリファレンス」など外部のサイトなどをご参照ください。

HTMLクイックリファレンスはパイプドビッツとは無関係のサイトです。ご自身の判断でご利用ください。

 

 

【関連記事】

フォーム

フォームを複製したい

稼働中のフォームにフィールド(質問項目)を追加したい

稼働中のフォームのフィールド(質問項目)を削除したい