画像の中にキレイなメルマガ登録フォームを挿入したらリストの取得数が1.5倍になった

↑これでよければ使ってください。一応コードを貼っておきます。

<form id="UserItemForm" accept-charset="utf-8" action="https://○○○○.com/△△△△" enctype="multipart/form-data" method="post">
<div class="input text " style="text-align: center;">

<input id="Usermail" class="form_input_input" style="width: 400px; height: 45px; background-color: #ffffff; border: solid 3px #4E7BBB; font-size: 20px;" name="data[User][mail]" type="text" value="" placeholder=" ここにメールアドレスを入力" />

<input style="width: 270px; height: 60px;" src="ボタンの画像URL" type="image" value="プレゼントを無料で受け取る" />

</div>
<input id="server_url" type="hidden" value="https://wisteria01.com/" />

</form>

(○○○○にはフォームのURL、△△△△にはメルマガのIDを入れてください)

別にフォームの構造とか知らなくても、それぞれのパーツをコツコツ変更していけば理想のデザインに近付くと思います。

例えば、上のコードをまるまるコピーしてwordpressのテキストエディタに貼り付け、widthとかborder:solidの値をいじってみてください。簡単に感覚を掴めますよ。

ちなみに、ボタンとかも自作で作りました。緑色のボタンは「無料」の印象が強く、クリック率が高まるというデータが出ているので濃い緑にしています。笑

画像の中にフォームを入れよう

次に、画像の中にフォームを入れていきます。この方法が今回の肝となる部分なんですが、意外とやってみたら簡単なのでぜひ挑戦していきましょう。ちなみに、参考にしたサイトはコチラです。⇒画像上の自由な位置に文字を重ねる方法

通常、画像の中にフォームを入れようと思っても、画像にはフォームを入れるような空間がないので入れることができないんですね。外側に弾き出されてしまうんです。

↑こんな感じに弾かれてしまう。

でも、HTMLには<div>っていう考え方があるんですけど、言ってしまえば「箱」のようなもので、その箱の中に「画像<img src=”○○”＞」と「フォーム<form></form>を入れたって感じです。

ちょうど、<div>っていう台の上に画像っていう紙と、フォームっていうペンを置いたって感じです。

台がないと紙の上にペンを置けないんですけど、<div>っていう台を用意してあげれば2つは同時に置くことができるってことです。

<div>
<img src="○○○">
<div>
<form>
</form>
</div>
</div>

なんとなくわかります？？divの中にdivがある感じ。あとはこの中にformを入れていくだけなんですね。

これがわかったら、まずは画像を作成していきましょう。

挿入する用の画像を用意する

画像の中にフォームを入れていくんで、まずは画像を用意しましょう。

これは色んなツールでがんばって作ってください。pixlrとか無料で良い感じの画像を作ることができるのでオススメです。

僕が作ったのはこんな画像です。

フォームを入れるための空白があるのがわかると思います。もちろん編集の際は実際にフォームの形を模した図形を作って、大体の位置を確認しておくようにしましょう。

画像が用意できたらFFFTPやwordpressのメディアを使って画像をアップロードし、URLを取得してください。

画像の中にメルマガ登録フォームを入れる

そしたら、先ほどのベースとなるコードの「img src＝」のところに、取得した画像URLを貼り付けます。

<div>
<img src="https://fussan01.com/wp-content/uploads/headkoukoku１.png">
<div>
<form>
</form>
</div>
</div>

そしたら画像ができあがるので、いよいよメルマガ登録フォームを入れていきます。

<form>～</form>に、自分でデザインしたメルマガ登録フォームのコードを入れていきます。

<div>
<img src="https://fussan01.com/wp-content/uploads/headkoukoku１.png">
<div>

<form id="UserItemForm" accept-charset="utf-8" action="https://○○○○.com/△△△△" enctype="multipart/form-data" method="post">
<div class="input text " style="text-align: center;">

<input id="Usermail" class="form_input_input" style="width: 400px; height: 45px; background-color: #ffffff; border: solid 3px #4E7BBB; font-size: 20px;" name="data[User][mail]" type="text" value="" placeholder=" ここにメールアドレスを入力" />

<input style="width: 270px; height: 60px;" src="ボタンの画像URL" type="image" value="プレゼントを無料で受け取る" />

</div>
<input id="server_url" type="hidden" value="https://〇〇〇〇.com/" />

</form>
</div>
</div>

ここまでオッケーですか？多分、この段階ではすごくグチャグチャなものができあがると思います。

ここからメルマガ登録フォームの位置を調整していきましょう。

relativeとabsoluteで位置を調整する

relativeとabsoluteっていう記述でフォームを自由に移動できるのですが、さきほど紹介したブログのほうですごくわかりやすく解説されているので、ここでは僕が実際にやった方法をご紹介します。地味な方法です。笑

まずは、positon:relativeとposition:absoluteのコードを入れていきましょう。

 

<div style=”position: relative;”>
<img src=”https://fussan01.com/wp-content/uploads/headkoukoku１.png”>
<div style=“position: absolute; top: 〇〇px; left: 〇〇px;”>

<form id=”UserItemForm” accept-charset=”utf-8″ action=”https://○○○○.com/△△△△” enctype=”multipart/form-data” method=”post”>
<div class=”input text ” style=”text-align: center;”>

<input id=”Usermail” class=”form_input_input” style=”width: 400px; height: 45px; background-color: #ffffff; border: solid 3px #4E7BBB; font-size: 20px;” name=”data[User][mail]” type=”text” value=”” placeholder=” ここにメールアドレスを入力” />

<input style=”width: 270px; height: 60px; position: absolute; top: 〇〇px; left: 〇〇px;” src=”ボタンの画像URL” type=”image” value=”プレゼントを無料で受け取る” />

</div>
<input id=”server_url” type=”hidden” value=”https://〇〇〇〇.com/” />

</form>
</div>
</div>

この赤文字の「〇〇」の数値を動かせば、自分の好きな場所にメルマガ登録フォームを持ってくることができます。

ちなみに、上のほうのpositon:absoluteが「メールアドレスを入力するとこ」で、下のposition:absoluteが「登録ボタン」の場所を指定するものです。

気合いと根性で位置を調節する

優秀な人なら、ある程度の場所を計算して載せると思うんですけど、僕は気合いと根性で位置を調整しました。笑

いま考えればGoogleデベロッパーツールとか使えば楽ちんだったんでしょうけど、僕はいちいち「実装⇒チェック⇒実装(数値変更)⇒チェック」を繰り返していましたね。

効率が良い方法があればそれをやってもいいと思いますが、実際のところ微調整は気合いと根性でなんとかなるのでがんばってください(^^)／

問題は山積みのようですが・・・

たぶん、今回の記事で画像の中にフォームを入れる方法はわかったと思うんですけど、初心者にとってはまだ問題は山積みなんですよね。

・トップページにどうやって入れてるの？

とか

・スマホ対応はどうやってるの？？

とか色々あると思います。

僕もその辺の操作で丸一日潰しちゃったのですが、それまで話すとキリがないのでお預けにします。いずれどこかでまとめたいと思いますのでもうしばらくお待ちください。

参考程度に、できあがったフォームの実物と実際のコードを載せておきます。