アスメルの登録フォームを自由にデザインしてレスポンシブにする方法

アスメル レスポンシブ

ステップメールを発行するとなれば、この業界で有名なものはやはり「アスメル」か「マイスピー」ですよね。

ともにメルマガスタンドの中では到達率が非常に良いですし、サポートも充実しています。

ですが、一つだけ気になるのがフォームのデザイン。

僕はアスメルのほうを使っているのですが、登録フォームは初期の状態だとお世辞にもセンスが良いとは言えません。笑

アスメル 登録フォーム デザイン

そこで今回はWordPress用にこのアスメルの登録フォームで

  • 色を変える
  • 文字を変更する
  • 大きさを変える
  • ボタンを変更する
  • レスポンシブにする

やり方について解説をしていきたいと思います。

 

アスメルのメルマガ登録フォームを自由にデザインする方法

CSSジェネレーターを立ち上げる

まずはアスメルの管理画面に入って、サイドバーのシナリオ管理を押します。

アスメル 登録フォーム

次に自分がデザインを変えたいシナリオを見つけて「HTMLソース」を押しましょう。

アスメル 登録フォーム デザイン

すると次のような画面になるので、そこで「CSSジェネレーター」という部分を押します。

アスメル 登録フォーム デザイン

どんどん進んで「CSSジェネレーター」を起動させましょう。

アスメル 登録フォーム デザイン

すると次のような画面になるので、自分が編集したいシナリオのシナリオ番号を入力してスタートを押しましょう。

シナリオ番号

ちなみにシナリオ番号とはこれのことです。

 

登録フォームのデザインを編集する

CSSジェネレーターを起動するとこのように登録フォームのデザインを自由に変更できるようになります。

アスメル 登録フォーム デザイン

下にプレビューが出てくるので、こちらで確認をしながら自由にデザインを決めていきましょう。

アスメル デザイン 

今回はこんな感じにしてみました。

アスメル 登録フォーム デザイン

 

CSSコードとフォームコードをWordPressに貼り付ける

CSSジェネレーターを使って一通りフォームのデザインができたら、次にこれをWordPressに貼り付けてきます。

CSS付きソースを生成」という部分を押しましょう。

アスメル 登録フォーム デザイン

すると次のようにコードが出てきます。

アスメル 登録フォーム デザイン

しかし、これをそのままコピペをすると左側にある数字も一緒にコピペされてしまうので、右側にあるボタンを押して数字がないものを生成します。

アスメル 登録フォーム デザイン

ここで生成されたコードは「フォームのCSSはここから」という文言で囲まれたものと、「フォームはここから」という文言で囲まれたもので2つあります。

フォームのCSSはここから」という部分はご自分のWordPressのスタイルシートの一番下に貼り付けをしましょう。(使っているテーマによって貼る場所は異なります)

アスメル 登録フォーム デザイン

そして、「フォームはここから」という部分に関してはフォームを出現させたい箇所に貼ります。

今回はヴィジットに貼ってみました。

アスメル 登録フォーム デザイン

「お名前」や「メールアドレス」といったフォームの文言もここで修正することができます。

これでひとまず登録フォームの設置は完了です。

 

アスメルのメルマガ登録フォームをレスポンシブデザインにする方法

しかし、これをスマホで確認してみると…

アスメル 登録フォーム デザイン

フォームがレスポンシブデザインになっておらずに、画面右に向かって切れてしまっています。

このままだと見栄えが悪いので、これを直していきましょう。

スタイルシートを開いて、「フォームのCSSはここから」というコードを貼った画面へ移動します。

アスメル 登録フォーム デザイン

フォームが画面からはみ出してしまうのはフォームの大きさを”px“で指定しているからです。

よってこれを”“に直していきます。

修正するのは全部で5点です。

上から順番に、”#asumeruform“と”#asumeruform table“内の”width: ◯px;“となっているところを”width: 100%;“にします。

#asumeruform{
    width:100%;
}
#asumeruform table {
    border-collapse : collapse ;
	margin: 0 0 10px;
	width: 100%;
	table-layout: fixed;
    border-color:#666666;
}

 

次に”#asumeruform table th“内の”width: ◯px;“となっているところを”width: 33%;“にします。(数字は好みに合わせて調整して下さい。)

#asumeruform table th {
	width: 33%;
	padding: 5px 10px;
	border: 1px solid #666666;
	background: #f5f5f5; 
	text-align: left;
	vertical-align: middle;
    font-size:12px;
    color:#666666; 
}

 

そして、少し下へ行って”#asumeruform .inputtext.inputtextshort“と”#asumeruform .inputtext.inputtextlong“内の”width: ◯px;“も”%”に変えていきます。

僕の場合はどちらも”width: 95%;“にしています。

#asumeruform .inputtext.inputtextshort {
	width: 95%;
}
#asumeruform .inputtext.inputtextlong {
	width: 95%;
}

 

これでスマホで表示をしてみると…

アスメル 登録フォーム デザイン

スマホで見ても表示が崩れなくなりました!

 

アスメルのメルマガ登録フォームのボタンをデザインにする方法

レスポンシブ表示にはなりましたが、まだボタンの位置が悪いのと、デザインがしっくりきませんね。

そこで次はボタンを変えていきます。

 

素材を見つけてくる

まずはボタンマルシェなどのサイトから好きなボタンをダウンロードしてきます。

ボタンマルシェ

あるいはPowerPointやKeynoteなどで自分の好きなボタンを作ってしまいましょう。

ボタン

 

メディアライブラリへアップロードする

ボタンを拾ってきた(作ったら)それをメディアライブラリへアップロードします。

ボタン アスメル

アップロードしたらURLを控えておきます。

アスメル ボタン

フォームを置き換える

そして、先程「フォームはここから」という部分を貼った箇所へいきましょう。

僕の場合はヴィジットに貼ったのでヴィジットへ飛びます。

アスメル 登録フォーム デザイン

そしてこの中で最後のほうにある

<input type="submit" name="submit" value="確定" class="formbtn" />

という部分を

<center><input type="image" src="画像のURL" name="submit" value="確定" class="formBtn" /></center>

に置き換えます。

※『画像のURL』には先ほどアップロードした画像のURLを貼り付けてください。

 

これで見てみると…

この通り、ボタンのデザインが変更されて、さらに中央揃えになりました!

アスメル 登録フォーム デザイン

まとめ

ということで今回はアスメルの登録フォームをデザインする方法について解説をしました。

やはりここの表示が崩れていたりするとメルマガへの登録率も下がってしまうと思うので、あまり凝りすぎる必要もありませんが、きちっとしたデザインに仕上げていきましょう。

 

2017年01月23日 | Posted in Tools

Related Posts