【マイスピー】コピペで完了!メルマガ登録の入力フォームを真ん中にする方法

マイスピ―

メルマガ配信スタンドとして多くの人に利用されている”マイスピ―”。

ボク自身もマイスピ―を利用しているのですが、
登録フォームを自分のブログに設置した時に
気になった点が1つだけありました。

なんか入力フォームが左揃えになっていてダサいな。

メルマガの登録フォームって
読者さんに興味を持っていただく入口のような感じですし、
見た目にはこだわっておきたいですよね!

今回の記事ではコピペで”誰でも簡単に”入力フォームが真ん中にいくHTMLのコードを紹介していきます。

【マイスピー】コピペで完了!メルマガ登録の入力フォームを真ん中にする方法

それでは簡単にメルマガ登録のフォームをオシャレにしていく方法を見ていきましょう!!

最初に全体の手順を簡単に紹介していきます。

  1. HTMLのコードをコピペする。
  2. 該当箇所に入力する。
  3. メルマガ登録フォームを設置する。

以上の3点のステップを踏めば、簡単に登録フォームが完成します。

1.HTMLのコードをコピペしよう

それでは、まず最初に下記のコードをコピーして自分のブログに張り付けましょう。

 

<div align=”center”><img class=”alignnone wp-image-1360″ src=”自分のメルマガ登録のバナー画像URL” />
<style><!–.form_input_label { width: 100% !important; display: inline-block !important;}.form_input_input { width: 100% !important; display: inline-block !important;}.form_input_vertical { display: block !important;}.form_input_horizontal { display: inline-block !important;}div.right_block { width: 60%; word-break: break-all; display: inline-block;}#content_form { padding-left : 50px; background-color : #fff !important; padding:0px !important;}–></style>
<div id=”content_form”>
<form id=”UserItemForm” style=”width: 60%; margin-right: auto; margin-left: auto;” accept-charset=”utf-8″ action=”マイスピ―の登録フォームURL” enctype=”multipart/form-data” method=”post”><input name=”_method” type=”hidden” value=”POST” />
<div class=”input text required”><label class=”form_input_label” for=”Username2″> 名前</label> <br />
<input id=”Username2″ class=”form_input_input” name=”data[User][name2]” type=”text” value=”” /></div>
<div class=”input text required”><label class=”form_input_label” for=”Usermail”>メールアドレス</label> <br />
<input id=”Usermail” class=”form_input_input” name=”data[User][mail]” type=”text” value=”” /></div>
<br />
<div class=”submit form_input_submit” style=”text-align: center;”><input style=”width: 170px; height: 50px; color: #ffffff; font-weight: bold; padding: 0.5em; background-color: #ff0000;” type=”submit” value=”無料登録する” /></div>
<input id=”server_url” type=”hidden” value=”https://my-color-life.com/p/r/d1mszz4n” /><!– ▼リファラ –><input id=”UserRefererFormUrl” name=”data[User][referer_form_url]” type=”hidden” value=”” /><input id=”UserRefererUrl” name=”data[User][referer_url]” type=”hidden” value=”” /><script type=”text/javascript”><!–if (document.referrer.length !=0 ){ if(document.getElementById(“UserRefererUrl”)) { document.getElementById(“UserRefererUrl”).value=document.referrer; }}if (document.getElementById(“UserRefererFormUrl”)){ document.getElementById(“UserRefererFormUrl”).value=location.href;}//–></script><!– ▲リファラ –></form>
</div>
<script src=”マイスピ―の登録フォームURL”></script></div>

コピーして貼り付けが終了したら、1つだけ注意をしておいていただきたいことがあります。

ボクの場合、メルマガの読者さんの名前を表示する際に”%name2%”と入力をしています。

そのため、上のHTMLのコードでは”Username2”と記載をしています。

だから、あなたがマイスピ―で”%name1%”と入力をしていた場合、
上のコードは”Username1”と変換をしてください。

ここの部分が出来ていないと、読者さんがメルマガ登録できなくなりますので注意です。

2.該当箇所を入力しよう

それでは、続いて該当箇所の入力を行っていきましょう!

上のコードであなたが入力する部分は全部で3か所あります。

  • 自分のメルマガ登録のバナー画像URL
  • マイスピ―の登録フォームURL(2か所)

上記のコードに埋め込まれているURLは以下のURL部分は、「Ctrl+f」で検索して入力をお願いします。

自分のメルマガ登録のバナー画像URLに関しては、
メディアを追加をしてURLを作成してください。

続いて、マイスピ―の登録フォームのURLについてです。

マイスピ―にログインして、シナリオ一覧をクリックしてください。

そして今回メルマガ登録のフォームを設置したいものを選択しましょう。

その後は登録ページの表示をクリックしてください。

そうすると登録ページが表示されるので、URLをコピーして該当箇所に張り付けをお願いします。

3.登録フォームの設置をしよう

ここまでの作業が終了すれば、全て完了になります!

そしたらプレビューを押して、確認をしてみてください(^^♪

自分のメールアドレスを入力してみて、ちゃんと登録ができるのか確認をしましょう。

まとめ

今回はあなたと読者さんを繋ぐ入口となる登録フォームについて、オシャレにする方法を紹介していきました(*^-^*)

人は第一印象が大切という言葉もあるように、登録フォームも外見にはチカラを入れていきましょう!

何か質問がある方がいらっしゃれば、お気軽にご連絡くださいね。

知識ゼロの初心者でも
収入を稼ぐチカラが身に付く
メルマガに登録をする

  • 自宅やカフェでゆっくりフラペチーノを飲みながら、ノマドワークができる
  • 苦手な上司や取引先の人間関係に悩まされる生活から解放されたい
  • ブログで大きな収入を稼いでみたいけど、やり方がわからない

ボクの無料メールマガジンでは、そんな自分らしい生き方ができる思考法や、1記事で10万円以上を稼ぎ出したノウハウを暴露しています。

ぜひ、読んでみてくださいね!