Colorfulからマイスピーのメルマガに登録してもらう


Warning: Trying to access array offset on false in /home/grjshirts/takeoff-inc.com/public_html/rri.takeoff-inc.com/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123

カラフルでLPを作り、そのページにメールアドレスを入力するだけで

メルマガに登録完了する方法を説明します。

登録先のステップメール用のメルマガは事前に作成しておいてください。

事前準備

まずマイスピーの管理画面から、登録フォームタグの発行(HTML)を選択します。

28697443 FEAE 458F 8C3B 10289BB68571 1024x841

そうするとよく分からない文字列が表示されると思いますが、ひとまずメモ帳にでも貼り付けておいてください。

D8E0B959 1D1F 4A82 B650 C68363B149A4 1024x788

 

ボタンを設置する

カラフルでボタンを設置するにはいくつか種類があります。好みでOKですが、ここでは「フォーム大(ボタン画像ver)」を選択します。

6C2F6A05 5643 46F5 A3D5 A7855A53E13A 1024x632

そのボタンを「テキスト」モードで見ると、よくわからない文字列が並んでいると思います。
まず、<form action〜と書いている部分を見てください。

1B97E81F 5A90 4F09 B49B E5927AE60FDB 1024x752

この部分を、さきほどメモ帳に貼り付けたマイスピーの<form action に差し替えます。カラフルのform actionの後に、input nameというのが3つ並んでいますが、消してしまってOKです。

88A03516 4437 49F9 9AF3 B69D8BFFC9AB 768x1024

続いて、名前とアドレスの部分を修正します。

522572FF 96CA 4BFF 9898 EC869B5D0598 1024x684

まず、名前は使わないので削除してください。

次に、アドレスですが、name=”d[0]” と書いている部分があると思います。これをname=”data[User][mail]”に変更してください。

修正したものがこちら。
3586368D 88C9 4945 999E BF54F511F04B 1024x807

ビジュアルモードで見たものがこちら。
6452C96B 4D84 4F42 969F BB9D3012A598 1024x771

画像の変更

登録フォーム上部の「今すぐ無料で登録する」の画像とか、ボタンの画像を変更する方法です。

登録ボタンの変更を例に説明します。

まず、変更したい登録ボタンをメディアを追加から追加して、そのボタンのURLをコピーしてください。
02A96789 4D95 41FD 97E9 10D92FC2911C 1024x627

次に、カラフルの登録フォームを見ると、画像が指定されているURLが2箇所あります。

1つめが「今すぐ無料で登録する」の画像で、二つ目がボタンの画像です。
84069EF2 E51C 4956 8748 283A3A69CE65 1024x807
今回はボタンの画像を変更するので、二つ目のURLを消して、さきほど登録したボタンのURLに変更してください。

変更したものがこちら。(今回は用意したボタンの幅が、フォームに対して大きかったため「width=”700″」と書いて幅を指定しました。数字に応じて幅を調整できるので試してみてください。)
9083E999 8282 4D2B 80C1 1AB042913FA9 1024x866

ビジュアルモードで見たものがこちら。

10F613D1 DDCF 45D7 8A10 73B9ACC17696 1024x826

プルプルボタン

登録ボタンがプルプルと動くLPを見たことがあるかと思います。私のLPがそうなのですが、一般的にボタンは動いた方がコンバージョンしやすいと言われているので、是非動かしてください。

カラフルで作ったLPのボタンを動かすには、Shortcodes Ultimate というプラグインをインストールしてください。

やり方だけ知りたい人

「su animate」という文字でボタンの画像が挟まれていると思います。

03CFA856 D7E8 40AC A828 2708C1EAC825 1024x620

このようにするだけで、ボタンの画像が動きますのでコピペしてください。
[aside type=”boader”] [su_animate type=”shake” duration=”5″ delay=”0″] [/aside]
[aside type=”boader”] [/su_animate] [/aside]

ビジュアルモードで見ると、ちょっと変になっていますが、「更新」を押して通常のページで見ると問題なく表示されます。
2AAC5CF6 1354 4147 8D06 09C1F62674EC 1024x946

自分で色々やりたい人

このアニメーションは、「ショートコードの挿入」から設定できます。
F3934D4C C2C9 4DCB A905 4A941E424C1A 1024x765

アニメーションを選択します。
BD922464 2010 45D6 A3B1 06DBB5FAFEC6 1024x768

アニメーションの種類のほかにも変更出来ますので、色々試してみてください。
B557B9A9 A857 4BF7 92CA 62D1A6EDE2B9 1024x768

コメント

タイトルとURLをコピーしました