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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

「フォームの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を貼り付けてください。

これで見てみると…

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

まとめ

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

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

Related Posts