こんにちは、ふっさんです。

 

先日、ブログのトップページに追加したコレ↓

画像の中にメルマガの登録フォームを入れるって方法です。

 

やり方が気になった人もいると思うので、作り方を解説していきます(^^)/ (上記はただの画像です。実際のフォームはトップページにあるのでコチラをクリックしてチェックしてください)

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

そもそも、なんで画像の中にメルマガ登録フォームを入れるの??って思ったかもなんですけど、これは単純に「すごそうに見られたいから」なんですよね。

 

この方法は単純だけど、威力はバツグンだと思います。メルマガやってる人のほとんどは画像の外にフォームを置いてるだけでデザインも適当なので、ここでガッツリと登録フォームを仕掛けて「なんじゃこりゃ!!」と思わせるだけで差別化できる。

 

ビジネスって相対評価なので、それで十分なんですよ。業界のなかは狭いので、読者の取り合いは避けられないんです。だから周りよりちょっとだけ「凄そうに見せる」「賢そうに見せる」だけでいいと僕は思います。

まずはキレイなメルマガ登録フォームを作ろう

じゃあ、実際にやり方を見ていきましょう。僕はメルマガ配信スタンドのMyasp(マイスピー)を使っているので、それを元に設置方法を見ていきます^^。

 

まずはフォームを取得してきましょう。

シナリオ一覧⇒シナリオ選択⇒登録フォームタグの発行(HTML)

を押して、登録フォームのタグを引っ張ってきます。

 

登録フォームのデザイン方法

 

で、多分そのまんま挿入しようと思うと、超絶ダサいフォームになると思います。

これを良い感じにデザインしていきます。

 

フォームのデザインって、適当にデザインをいじっちゃうとフォームとして機能しなくなっちゃうので、ちゃんとフォームのことを勉強してからいじるようにしましょう。このサイトがすごく参考になったので貼っておきます。⇒初心者必見!HTMLフォームとは

 

ちなみに僕が作ったフォームはこんな感じなんですけど、

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

 

 

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

 

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

 

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

 

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

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

 

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

 

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

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

 

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

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

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

 

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

 

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

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

 

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

 

relativeとabsoluteで位置を調整する

 

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

 

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

 

<div style=”position: relative;”>
<img src=”http://fussan01.com/wp-content/uploads/headkoukoku1.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デベロッパーツールとか使えば楽ちんだったんでしょうけど、僕はいちいち「実装⇒チェック⇒実装(数値変更)⇒チェック」を繰り返していましたね。

 

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

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

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

 

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

とか

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

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

 

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

 

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

海

 

 

この記事だとサイズが違ってフォームがずれるので、ちょっと数値を修正しています。

 

登録したらサンキューページまで移動するように作っているので、ぜひ登録してみてください。(メルマガではビジネスの戦略をお話しています^^)

画像内メルマガ登録フォーム作成後の効果

これまでは、トップページに画像リンクを差し込んでおいて、そこからランディングページに誘導していたんですね。

 

でも、ウェブマーケティングのセオリーに「読者は1クリック毎に50%離脱する」っていうデータがあったので、それは非効率なんじゃないかと思っていました。

 

それよりは、ウェブサイト上に直接フォームを設置し、ブログを読んだ人が直接メルマガに登録してくれる仕組みを用意したほうがいいんじゃないかと。

 

そして今回の「画像内メルマガ登録フォーム」を作るに至ったわけですが、実装2日目にして良い感じに効果が表れています。

↑これが24時間以内のメールボックスなんですけど、約6件ほどのハウスリストが取れています。

 

平均すると3~4リスト程度なので、さっそく効果が表れてきたのではないかと^^。やっぱり、狙った通りに効果が出てくると気持ち良いですね。苦労して作った甲斐がありました。

 

ぜひ、あなたも作ってみてください。決して簡単な方法ではないですが、やる価値は十分にあると思います。

 

それでは、最後まで読んでいただいてありがとうございました!

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

僕は大学生の頃から月収で170万ほど稼いでいます

怪しいし、信じがたいし、
才能があったんじゃないかとも言われます。


でも、家庭環境は最悪だったし、
バイトでは仕事ができない人間だったし、
大学の成績も下から2番目の落ちこぼれでした。


そんな人間でも、ビジネスに出会って
ちょっとの間だけ真剣に取り組んでみたら
あっさりと人生逆転できました。


僕がいま使っているものでよければ
ビジネスの戦略をメルマガでお渡ししているので、
ぜひ楽しみながら読んでみてください。


〆特別ギフト付きメールストーリーを読んでみる

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
↓↓このページをシェアして、明日の会話のネタにしてくれたら嬉しいです↓↓