MailChimpを使って、事前登録フォームを作る

   

最近、WordPressやHTMLのデザインテンプレートを購入して使っているという話をしたことがある(素人でもWeb構築が楽に出来るのに最低限必要な知識とは何か)のですが、その中でMailChimpというサービスを使ってメーリングリストやら登録フォームやらを構築する仕組みが組み込まれている事が多いのです。流行ってるのかな。

機能としては、メーリングリスト機能の提供という事みたいです。デザインテンプレートが準備されているので、自分でHTMLメールを組んで送る必要がありません。無料プランにはもちろん送信数の上限があるのですが、ちょっとしたサービスであれば十分でしょう。無料プランの上限は2000人の登録者と、月間12000通のメール送信です。

各種プランはこんな感じになっています。2000人までなら月6回まで送信出来る感じになりますね。週刊にすれば余裕で足ります。

Mail Chimp価格プラン

高機能故のわかりづらさを解説するよ

やりたい事は、例えば「Webサービス用の事前登録ページを作ってオープン前に告知をしておきたい」という設定にしましょう。シンプルなのですが、高機能ゆえに何からいじればいいのかわからないという欠点が…(理解するまで凄く時間かかった)。日本語の解説ページもそんなに無いので、書いてみます。

1:リストを作る

何はともあれ、リストを作りましょう。これが無いと登録できませんので。

makelist

 

ログイン後の左カラムにあるListというリンクをクリック。その後ページ右上にCreate Listというボタンが現れるのですみやかにそいつを押しましょう。これでリストの構築が完了です。

各種項目を入力します。日本語でもOKです。

setuplist

 

from Nameには、メール送信者名が入りますので、【サービス名】自動送信 とかそんな感じでよいのでは。
from email にはメアドを登録しましょう。 [email protected]とかでしょうか。

Remind People how they got on your listには、送信したメールに「このメールは、【あなたのサービス名】の登録フォームから登録いただいたメールアドレスに送信しております。」みたいな感じの文章を書いておきましょう。

その他に、発信元の情報などを入れます。

notify

 

続いて、通知設定をします。一日一度通知が来れば良い人はDaily summaryという所にチェックを入れておけば十分かと。1つずつ受け取りたい人はそのようにどうぞ。

E-mailformatはチェック入れておいてあげるのが良いのではないでしょうか。

以上でリストが完成します。

各種フォームの設定を行います

デザイン変更や翻訳の変更をします。

先ほど作ったListをクリックし、Sign up formsをクリック。General formsというアイコンをクリックしましょう。

generalforms

 

ここからが大事なところです。日本語で使う場合、翻訳がグダグダなので、きっちり変更しておきましょう。

変更するフォームを選択します

list-2

 

矢印の部分がドロップダウンリストになっていますので、そちらを選択して、いちいち変更をかけるのです。

まずは、ヘッダにサービスの画像について変更をしましょう。

konohen

 

枠で囲った部分にマウスを持って行くと、imageを選ぶことが出来ますので、そこからアップロードできます。ここで設定したヘッダは、各種画面で使いまわされますよ。

登録する項目については、右側にあるボタンをクリックすると追加できます。

各種ページを翻訳しましょう

translate

 

翻訳タブを開きましょう。

  • 登録フォーム
  • 登録フォーム(ヴァリデータ付き)
  • 登録完了ページ
  • 登録確認ページ
  • 登録完了後に送信されるメール

最低限、この辺までについては設定を行うことをおすすめします。

特に、メールの文面については結構変な感じになっていますので、登録・登録解除とかリンククリックしたりとかして、変な画面が無いかについて検証しましょう。

ということで、翻訳大事だよという指摘でした!

登録フォームとリストに設定した項目を合わせる

Build it!のタブの中で項目を追加出来ることは先ほど書いたとおりですが、これをフォームに合わせるにはどうしたらいいか。

fieldtype

 

<input class="form-control input-outline input-lg" name="yourfield1" type="text" id="yourfield1" placeholder="追加したい項目" required="required">

こんなかんじでフォームを作ると思うのですが、name属性,ID属性にfieldtagの項目を設定します。それだけでOK。

あとは作ったフォームに必要な情報を入力してみて、ちゃんとLISTの登録情報に反映されているか確認してください。以上!

 

 

オススメNginx本

nginx実践入門 (WEB+DB PRESS plus) 単行本(ソフトカバー) – 2016/1/16

nginxを現場で活用するための知識を、実践的なノウハウを交えて解説した書籍です。nginxのインストール方法や基本的な設定方法からはじめ、nginxを利用した「静的コンテンツ配信サーバ」「HTTPSサーバ」「Webアプリケーションサーバ」「大規模コンテンツ配信システム」の構築方法をそれぞれ詳しく紹介しています。後半ではnginxサーバのモニタリングやログの収集、そして軽量スクリプト言語Luaでnginxを拡張する方法について解説しているので、nginxをこれから使う方はもちろん、さらに活用したい方にもお勧めです。

 - Tips