取扱説明書 > ご利用マニュアル > メール配信ASPで生成されるフォームのデザインを合わせる
コンビーズを例に説明します。他のメール配信ASPでも基本的に同じです。
メール配信ASPでフォームを生成します。
<!-- CombzMail ReaderRegistForm START-->
<form method="post" action="https://regssl.combzmail.jp/adddel.cgi"><input type="hidden" name="charset" value="UTF-8">
<input type="hidden" name="mode" value="add"><br>
<INPUT TYPE="hidden" NAME="event" value="hp"><br>
<br>
<font size="2"><b>売れるホームページの作り方（仮）</b></font><input type="hidden" name="magid" value="1asd"><br>
<INPUT TYPE="text" NAME="email" SIZE="40" MAXLENGTH="200"><br>
<br>
<br>
<br>
<br>
<input type="submit" name="submit" value="読者登録"> <img src="https://www.combzmail.jp/ssl_key.gif">
</form>
<form method="post" action="https://regssl.combzmail.jp/adddel.cgi"><input type="hidden" name="charset" value="UTF-8"><br>
<input type="hidden" name="mode" value="del"><br>
<br>
<font size="2"><b>売れるホームページの作り方（仮）</b></font><input type="hidden" name="magid" value="1asd"><br>
<INPUT TYPE="text" NAME="email" SIZE="40" MAXLENGTH="200"><br>
<br>
<br>
<INPUT TYPE="submit" NAME="submit" VALUE="解除"> <img src="https://www.combzmail.jp/ssl_key.gif">
</form><br>
<br>
<br>
<!-- CombzMail ReaderRegistForm END-->
改行やインデントが整理されていない事が多いので、HTML整形サイト（http://u670.com/pikamap/htmlseikei.php）などを利用してキレイに直すとわかりやすくなります。
<!-- CombzMail ReaderRegistForm START-->
<form method="post" action="https://regssl.combzmail.jp/adddel.cgi">
<input type="hidden" name="charset" value="UTF-8">
<input type="hidden" name="mode" value="add">
<br>
<INPUT TYPE="hidden" NAME="event" value="hp">
<br>
<br>
<font size="2">
<b>売れるホームページの作り方（仮）</b>
</font>
<input type="hidden" name="magid" value="1asd">
<br>
<INPUT TYPE="text" NAME="email" SIZE="40" MAXLENGTH="200">
<br>
<br>
<br>
<br>
<br>
<input type="submit" name="submit" value="読者登録">
<img src="https://www.combzmail.jp/ssl_key.gif">
</form>
<form method="post" action="https://regssl.combzmail.jp/adddel.cgi">
<input type="hidden" name="charset" value="UTF-8">
<br>
<input type="hidden" name="mode" value="del">
<br>
<br>
<font size="2">
<b>売れるホームページの作り方（仮）</b>
</font>
<input type="hidden" name="magid" value="1asd">
<br>
<INPUT TYPE="text" NAME="email" SIZE="40" MAXLENGTH="200">
<br>
<br>
<br>
<INPUT TYPE="submit" NAME="submit" VALUE="解除">
<img src="https://www.combzmail.jp/ssl_key.gif">
</form>
<br>
<br>
<br>
<!-- CombzMail ReaderRegistForm END-->
<form>から</form>までが１つのフォームです。
<!-- CombzMail ReaderRegistForm START-->
<form method="post" action="https://regssl.combzmail.jp/adddel.cgi">
<input type="hidden" name="charset" value="UTF-8">
<input type="hidden" name="mode" value="add">
<br>
<INPUT TYPE="hidden" NAME="event" value="hp">
<br>
<br>
<font size="2">
<b>売れるホームページの作り方（仮）</b>
</font>
<input type="hidden" name="magid" value="1asd">
<br>
<INPUT TYPE="text" NAME="email" SIZE="40" MAXLENGTH="200">
<br>
<br>
<br>
<br>
<br>
<input type="submit" name="submit" value="読者登録">
<img src="https://www.combzmail.jp/ssl_key.gif">
</form>
<form method="post" action="https://regssl.combzmail.jp/adddel.cgi">
<input type="hidden" name="charset" value="UTF-8">
<br>
<input type="hidden" name="mode" value="del">
<br>
<br>
<font size="2">
<b>売れるホームページの作り方（仮）</b>
</font>
<input type="hidden" name="magid" value="1asd">
<br>
<INPUT TYPE="text" NAME="email" SIZE="40" MAXLENGTH="200">
<br>
<br>
<br>
<INPUT TYPE="submit" NAME="submit" VALUE="解除">
<img src="https://www.combzmail.jp/ssl_key.gif">
</form>
<br>
<br>
<br>
<!-- CombzMail ReaderRegistForm END-->
下の解除フォームは消して、上の登録フォームだけで説明を続けます。
必要なのはinputselectoptiontextareaです（必ず全部あるわけではありません）。これらと、お名前やメールアドレスなどの項目名の文字を入れていきます。
<form method="post" action="https://regssl.combzmail.jp/adddel.cgi">
<input type="hidden" name="charset" value="UTF-8">
<input type="hidden" name="mode" value="add">
<br>
<INPUT TYPE="hidden" NAME="event" value="hp">
<br>
<br>
<font size="2">
<b>売れるホームページの作り方（仮）</b>
</font>
<input type="hidden" name="magid" value="1asd">
<br>
<INPUT TYPE="text" NAME="email" SIZE="40" MAXLENGTH="200">
<br>
<br>
<br>
<br>
<br>
<input type="submit" name="submit" value="読者登録">
<img src="https://www.combzmail.jp/ssl_key.gif">
</form>
今度は、作業中のテンプレートを開きます。この作業はソースモードでしかできないので、BlueGriffonよりもTeraPadやmiのようなテキストエディタで行った方がやりやすいかもしれません。
「form--」で検索してフォームの部品の場所に移動します。
INFOPLATE 5ではlabelというタグを使っています。<label>から</label>までが１つの項目です。
<form class="form--large" action=" " method="post">
<input name=" " value=" " type="hidden">
<input name=" " value=" " type="hidden">
<input name=" " value=" " type="hidden">
<label>
<span>姓</span>
<input name="name1" value="" type="text" style="width:50%">
</label>
<label>
<span>名</span>
<input name="name2" value="" type="text" style="width:50%">
</label>
<label>
<span>メールアドレス</span>
<input name="email" value="" type="text" style="width:75%">
</label>
<input class="form-button-w" value="今すぐ登録する" type="submit" style="width:67%">
</form>
<span> ... </span>に「お名前」などの項目名、その後にinputやselectやtextareaなどの要素を入れます。
<form class="form--large" action=" " method="post">
<input name=" " value=" " type="hidden">
<input name=" " value=" " type="hidden">
<input name=" " value=" " type="hidden">
<label>
<span>姓</span>
<input name="name1" value="" type="text" style="width:50%">
</label>
<label>
<span>名</span>
<input name="name2" value="" type="text" style="width:50%">
</label>
<label>
<span>メールアドレス</span>
<input name="email" value="" type="text" style="width:75%">
</label>
<input class="form-button-w" value="今すぐ登録する" type="submit" style="width:67%">
</form>
ASPで生成したコードの方からコピーして、１つずつ貼り付けていってください。<b>や<font size>などの装飾は必要ありません。SIZE="40"などサイズを指定している属性も消して下さい。INFOPLATE 5ではそれらのサイズをstyle="width: 100%;"など、スタイルシートを使ってパーセンテージで指定します。
<form class="form--large" action=" " method="post">
<input name=" " value=" " type="hidden">
<input name=" " value=" " type="hidden">
<input name=" " value=" " type="hidden">
<label>
<span>メールアドレス</span>
<INPUT TYPE="text" NAME="email" style="width:100%">
</label>
<input type="submit" name="submit" value="読者登録" class="form-button-w">
</form>
<input ..... type="hidden">と書かれている要素は全部必要なので入れておきます。画面には現れないので<form>から</form>の間であればどこでもかまいません。入れ終わったらテンプレートの方に入っている見本の<input name=" " value=" " type="hidden">は消しておいてください。
<form class="form--large" action=" " method="post">
<input type="hidden" name="charset" value="UTF-8">
<input type="hidden" name="mode" value="add">
<INPUT TYPE="hidden" NAME="event" value="hp">
<input type="hidden" name="magid" value="1asd">
<label>
<span>メールアドレス</span>
<INPUT TYPE="text" NAME="email" style="width:100%">
</label>
<input type="submit" name="submit" value="読者登録" class="form-button-w">
</form>
<input type="submit">にclass="form-button"もしくはclass="form-button-w"を加えると、デザインされたボタンになります。class="form-button"は普通のサイズ、class="form-button-w"は横幅いっぱいのサイズです。
<form class="form--large" action=" " method="post">
<input type="hidden" name="charset" value="UTF-8">
<input type="hidden" name="mode" value="add">
<INPUT TYPE="hidden" NAME="event" value="hp">
<input type="hidden" name="magid" value="1asd">
<label>
<span>メールアドレス</span>
<INPUT TYPE="text" NAME="email" style="width:100%">
</label>
<input type="submit" name="submit" value="読者登録" class="form-button-w">
</form>
formのclassを変えるとサイズを変更することができます。
フォームのクラスはform--largeform--mediumform--smallの3つがあります。
<form class="form--large" action=" " method="post">
<input type="hidden" name="charset" value="UTF-8">
<input type="hidden" name="mode" value="add">
<INPUT TYPE="hidden" NAME="event" value="hp">
<input type="hidden" name="magid" value="1asd">
<label>
<span>メールアドレス</span>
<INPUT TYPE="text" NAME="email" style="width:100%">
</label>
<input type="submit" name="submit" value="読者登録" class="form-button-w">
</form>
メールフォームのカスタマイズは文字化けなどのトラブルもあって、とても難しいです。わからなかったらお問い合せフォームから質問してください。
これは個人的な意見ですが、難しいと感じたら、サイトには「登録はこちら」などのボタンの形をしたリンクだけを置いておいて、別画面でメール配信サービスが用意している登録ページに移動するのが楽で良いと思います。
