メルマガ登録フォームのカスタマイズ方法

今日は、よいこのみんなに役立つ情報をお届けしましょう!(・∀・)

 

>>まずは、こちらのページを見てほしい!

 

見て欲しいのは、メルマガ登録フォームです。

 

※画像はクリックで拡大します。

 

ちなみにこれはアスメルというシステムのフォームですが、通常アスメルの登録フォームはこんな感じです。

 

これを魔改造(メルマガ登録フォームをカスタマイズ)する方法を書きましょう。

 

結構ややこしいですが、登録フォームのデザインを変えるだけで、登録率が上がるのでぜひマスターしましょう!

 

アスメルで解説してますが、どんなメルマガや問い合わせフォームでも応用出来ます。

 

また、サイト作成ツールはシリウスで解説してますので、ご自身の環境に合わせて下さい。

 

まずは、メールフォームを貼り付けます。

 

 

アスメルだとこんな感じです。

 

 

シリウスだと改行にタグが入ってしまうので、ソースの改行も削除します。

 

 

すこし改行がつまります。

 

 

次に背景画像を作成し、FTPなどでネットにアップロードしておきます。

 

こういうのを用意しましょう。

 

 

とりあえず、大きさは適当で良いですが、測っておきます。
今回は710×225にしました。

 

つぎにスタイルシートを書きます。

#form {
width: 710px;
height: 225px;
background-image: url(http://www.eyesb.info/wp-content/uploads/2013/07/mailform.png);
}

これをスタイルシートに記載します。

幅710px高さ225pxのグループを作るという意味です。

 

そしてフォームを<div id=”form”>~<div>で囲みます

背景画像が表示されます。

今の状態ではメルマガ登録フォームがサイトの左によっているのでこの「form」というグループを少し右に動かします。

#form {
width: 710px;
height: 320px;
background-image: url(http://www.eyesb.info/wp-content/uploads/2013/07/form.png);
position: relative;
left: 40px;
}

赤字の箇所を加えます。

これは「本来の位置より左から40px動かす」という意味です。

実際のプレビューを見ながら調整して下さい。

 

<input type=”text” name=”touroku_name” id=”touroku_name” size=”30″ value=”" class=”inputText inputTextShort” />
⇒名前の登録フォームを指します。

<input type=”text” name=”touroku_mail” id=”touroku_mail” size=”60″ istyle=”3″ mode=”alphabet” value=”" class=”inputText inputTextLong” />
⇒メールアドレスの登録フォームを指します。

文字を白にして、登録フォームを文字の下ではなく横にしてみました。

ブラウザの表示です。

 

文中にある<fieldset>はここからここまでがひとつのフォームということを指しているのですが、このタグのせいで、四角の枠が表示されます。

 

このフォームではなくても意味は通りますので削除します。下の</fieldset>の削除も忘れずに。

 

ブラウザの表示です

つぎに、ボタンの画像を2種類作ります。

今回作ったのはこちら。

ボタンが切り替わるように切り替わる前と、後の2つを用意します。

用意したら、FTPなどで、アップロード、シリウスの場合は適当な余白に書いておきます。

 


※下2つのタグです。

 

次がポイント!(・∀・)

登録フォームのこの部分⇒<input type=”submit” name=”submit” value=”確定” class=”formBtn” />

これを下のように差し替えます。

<input type=”image” src=”<% pageDepth %>img/button_002.jpg” onmouseover=”this.src=’<% pageDepth %>img/button_003.jpg’;” onmouseout=”this.src=’<% pageDepth %>img/button_002.jpg’”value=”メールアドレスを登録する” class=”formBtn” id=”submit_button”/>

※<input type=”image” src=”変更前画像URL” onmouseover=”this.src=’変更後画像URL’;” onmouseout=”this.src=’変更前画像URL’”value=”メールアドレスを登録する” class=”formBtn” id=”submit_button”/>

ちなみにvalueの値は「メールアドレスを登録する」じゃなくてもOK

これで、登録ボタンが画像になります。
マウスを持って行くと画像が切り替わるか確認しましょう。

 

ここまで、やって背景が小さい気がして来ましたので、
大きな画像に差し替えました。(;・∀・)

 

背景画像を変えて、スタイルシートの高さを変えます。

 

登録ボタンの<p>タグも消します。

登録ボタンが上に移動します。

次の名前とアドレスの登録フォームを大きくして、そこに入力する文字サイズを変更します。

下のスタイルシートを貼り付けます。

input[type=text]{
height: 30px;
font-size: 18px;
background-color: #ffffff;
}
heightは枠の高さ、font-sizeは入力する文字の大きさです。

background-colorは登録フォームの色です。

カラーコードを返ることにより、お好きな色にできます。

ここでは白にしています。

枠の縦幅が広がります。

次に、枠の横幅を揃えるには、

<input type=”text” name=”touroku_mail” id=”touroku_mail” size=”60” istyle=”3″ mode=”alphabet” value=”" class=”inputText inputTextLong” />

⇒を変更します。

ここでは、名前の幅と合わせるため30にします。

ブラウザの表示です

次にですね、「お名前」と「メールアドレス」のテキストなんですが、これも背景画像で書いたほうが綺麗なので消してしまいます。※話がわかり易いように残してましたが、はじめから消してもOKです。

消えます。

上のソースでは見た目がわかり易い様に名前のフォームとメルアドのフォームを<br />タグで改行させてますが、改行はなくても良いです。

背景画像をこちらと差し替えます。※当然、実際には最初からこのような名前とアドレスが書いたものを使って下さい。

 

差し替えました。

上が名前のフォームで下が、メルアドです。

名前の登録フォームとメルアドの登録フォームの改行タグ<br />を削除します。

ブラウザの表示です。

さて、仕上げです。(・∀・)

名前の登録フォーム、メルアドの登録フォーム、登録ボタンを3つのグループに考えます。

そしてそれぞれ、name,name2,name3というidをつけます。※任意の半角英数字でOK.

<div id=”form”>
<form name=”asumeru_form” method=”post” action=”https://1lejend.com/stepmail/kd.php?no=154663″>
<div id=”namae”><input type=”text” name=”touroku_name” id=”touroku_name” size=”30″ value=”" class=”inputText inputTextShort” /></div>
<div id=”namae2″><input type=”text” name=”touroku_mail” id=”touroku_mail” size=”30″ istyle=”3″ mode=”alphabet” value=”" class=”inputText inputTextLong” /></div>
<div id=”namae3″><input type=”hidden” name=”no” value=”154663″ />
<input type=”hidden” name=”action” value=”kakunin” />
<input type=”image” src=”<% pageDepth %>img/button_002.jpg” onmouseover=”this.src=’<% pageDepth %>img/button_003.jpg’;” onmouseout=”this.src=’<% pageDepth %>img/button_002.jpg’”value=”メールアドレスを登録する” class=”formBtn” id=”submit_button”/></div>
</form>

</div>

そして、スタイルシートで本来の位置から移動させます。

まずはname(名前の登録フォーム)を移動します。

本来の位置から、上から107px、左から315動かします。

次に、メルアドの登録フォームを動かします。

最後に、登録ボタンを動かします。

これで、完成です!(・∀・)!

結構な労力ですが、メルマガ登録フォームのデザインでもかなり登録率は変わってきますので、ぜひやってみて下さい!

 

最後ですが、少しでも楽できるようひな形置いときます。

 

スタイルシート部分

 

#form {
width: 710px;
height: 320px;
background-image: url(背景画像URL);
position: relative;
left: 40px;
}

input[type=text]{
height: 30px;
font-size: 18px;
background-color: #ffffff;
}

#namae {
position: relative;
top: 107px;
left: 315px;
}

#namae2 {
position: relative;
top: 133px;
left: 315px;
}

#namae3 {
position: relative;
top: 155px;
left: 175px;
}

ソース部分

<div id=”form”>
<form name=”asumeru_form” method=”post” action=”https://1lejend.com/stepmail/kd.php?no=#####”>
<div id=”namae”><input type=”text” name=”touroku_name” id=”touroku_name” size=”30″ value=”" class=”inputText inputTextShort” /></div>
<div id=”namae2″><input type=”text” name=”touroku_mail” id=”touroku_mail” size=”30″ istyle=”3″ mode=”alphabet” value=”" class=”inputText inputTextLong” /></div>
<div id=”namae3″><input type=”hidden” name=”no” value=”154663″ />
<input type=”hidden” name=”action” value=”kakunin” />
<input type=”image” src=”変更前画像URL” onmouseover=”this.src=’変更後画像URL’;” onmouseout=”this.src=’変更前画像URL’”value=”メールアドレスを登録する” class=”formBtn” id=”submit_button”/></div>
</form>
</div>

追伸:この記事のようにタグをそのまま記事に表示させたりするのにも弊社のHTMLタグクリエーターは便利ですので、買って下さい(・∀・)

このエントリーを含むはてなブックマーク Buzzurlにブックマーク livedoorクリップ Yahoo!ブックマークに登録

メルマガも読んでみる

ブログとメルマガで稼ぐ実践メルマガ(>>最新のバックナンバーはこちら<<
メールアドレス
登録

※解除はメルマガ内でいつでも可能です。

当ブログに寄せられたフェイスブックからのコメント

タグ

2013年7月30日 | コメント/トラックバック(0)|

カテゴリー:情報

最新情報

2013年10月3日メルマガバックナンバー
24ドメイン中古ドメイン発掘ツールのレビュー
2013年10月3日メルマガバックナンバー
地域セミナーや最新情報まとめ
2013年9月26日メルマガバックナンバー
ブログ・セミオート・ランチャー レビュー
2013年9月10日情報
シリウスでのスマホサイトへの最適化について
2013年9月3日情報
アフィリエイトリンクをリダイレクトさせるときの注意点。

このエントリーを含むはてなブックマーク Buzzurlにブックマーク livedoorクリップ Yahoo!ブックマークに登録

トラックバック&コメント

コメントをどうぞ

このページの先頭へ