MailChimpを使って、事前登録フォームを作る
最近、WordPressやHTMLのデザインテンプレートを購入して使っているという話をしたことがある(素人でもWeb構築が楽に出来るのに最低限必要な知識とは何か)のですが、その中でMailChimpというサービスを使ってメーリングリストやら登録フォームやらを構築する仕組みが組み込まれている事が多いのです。流行ってるのかな。
機能としては、メーリングリスト機能の提供という事みたいです。デザインテンプレートが準備されているので、自分でHTMLメールを組んで送る必要がありません。無料プランにはもちろん送信数の上限があるのですが、ちょっとしたサービスであれば十分でしょう。無料プランの上限は2000人の登録者と、月間12000通のメール送信です。
各種プランはこんな感じになっています。2000人までなら月6回まで送信出来る感じになりますね。週刊にすれば余裕で足ります。
高機能故のわかりづらさを解説するよ
やりたい事は、例えば「Webサービス用の事前登録ページを作ってオープン前に告知をしておきたい」という設定にしましょう。シンプルなのですが、高機能ゆえに何からいじればいいのかわからないという欠点が…（理解するまで凄く時間かかった）。日本語の解説ページもそんなに無いので、書いてみます。
１：リストを作る
何はともあれ、リストを作りましょう。これが無いと登録できませんので。
ログイン後の左カラムにあるListというリンクをクリック。その後ページ右上にCreate Listというボタンが現れるのですみやかにそいつを押しましょう。これでリストの構築が完了です。
各種項目を入力します。日本語でもOKです。
from Nameには、メール送信者名が入りますので、【サービス名】自動送信 とかそんな感じでよいのでは。
from email にはメアドを登録しましょう。 no-reply@yourdomain.comとかでしょうか。
Remind People how they got on your listには、送信したメールに「このメールは、【あなたのサービス名】の登録フォームから登録いただいたメールアドレスに送信しております。」みたいな感じの文章を書いておきましょう。
その他に、発信元の情報などを入れます。
続いて、通知設定をします。一日一度通知が来れば良い人はDaily summaryという所にチェックを入れておけば十分かと。１つずつ受け取りたい人はそのようにどうぞ。
E-mailformatはチェック入れておいてあげるのが良いのではないでしょうか。
以上でリストが完成します。
各種フォームの設定を行います
デザイン変更や翻訳の変更をします。
先ほど作ったListをクリックし、Sign up formsをクリック。General formsというアイコンをクリックしましょう。
ここからが大事なところです。日本語で使う場合、翻訳がグダグダなので、きっちり変更しておきましょう。
変更するフォームを選択します
矢印の部分がドロップダウンリストになっていますので、そちらを選択して、いちいち変更をかけるのです。
まずは、ヘッダにサービスの画像について変更をしましょう。
枠で囲った部分にマウスを持って行くと、imageを選ぶことが出来ますので、そこからアップロードできます。ここで設定したヘッダは、各種画面で使いまわされますよ。
登録する項目については、右側にあるボタンをクリックすると追加できます。
各種ページを翻訳しましょう
翻訳タブを開きましょう。
- 登録フォーム
- 登録フォーム(ヴァリデータ付き）
- 登録完了ページ
- 登録確認ページ
- 登録完了後に送信されるメール
最低限、この辺までについては設定を行うことをおすすめします。
特に、メールの文面については結構変な感じになっていますので、登録・登録解除とかリンククリックしたりとかして、変な画面が無いかについて検証しましょう。
ということで、翻訳大事だよという指摘でした！
登録フォームとリストに設定した項目を合わせる
Build it!のタブの中で項目を追加出来ることは先ほど書いたとおりですが、これをフォームに合わせるにはどうしたらいいか。
[code]
<input class="form-control input-outline input-lg" name="yourfield1" type="text" id="yourfield1" placeholder="追加したい項目" required="required">
[/code]
こんなかんじでフォームを作ると思うのですが、name属性,ID属性にfieldtagの項目を設定します。それだけでOK。
あとは作ったフォームに必要な情報を入力してみて、ちゃんとLISTの登録情報に反映されているか確認してください。以上！