16
©2016 やさしいブログの作り方 All rights reserved. アメブロガーさんのための フォームメーラー作成ガイド 初めてでもカンタン!

アメブロガーさんのための フォームメーラー作成ガイドアメブロガーさんのための フォームメーラー作成ガイド 初めてでもカンタン!1.フォームメーラーに登録する

  • Upload
    others

  • View
    0

  • Download
    0

Embed Size (px)

Citation preview

Page 1: アメブロガーさんのための フォームメーラー作成ガイドアメブロガーさんのための フォームメーラー作成ガイド 初めてでもカンタン!1.フォームメーラーに登録する

©2016 やさしいブログの作り方 All rights reserved.

アメブロガーさんのための

フォームメーラー作成ガイド

初めてでもカンタン!

Page 2: アメブロガーさんのための フォームメーラー作成ガイドアメブロガーさんのための フォームメーラー作成ガイド 初めてでもカンタン!1.フォームメーラーに登録する

1.フォームメーラーに登録する

グーグル検索で「フォームメーラー」と検索すると、すぐに出てきます。

画面左側にある「新規登録はこちら」をクリックします。

無料版の欄の一番下にある「新規ご利用登録」をクリックします。

フォームからメールを受け取るメールアドレスを入力し、個人情報等の確認にチェックを入れて送信するをクリックします。

入力したメール宛に受付確認のメールが届きますので、本登録のリンクをクリックします。

利用するメールアドレスおよび個人情報等の利用規約確認にチェックを入れて送信するをクリックします。

©2016 やさしいブログの作り方 All rights reserved.

Page 3: アメブロガーさんのための フォームメーラー作成ガイドアメブロガーさんのための フォームメーラー作成ガイド 初めてでもカンタン!1.フォームメーラーに登録する

入力したアドレス宛に仮登録のメールが送られてきます。

メール本文内にある本登録へのリンクをクリックします。

名前、任意のパスワード、アンケートに入力して本登録を完了します。

登録が完了したら、トップページの左にある Free版ログインからログインします。

©2016 やさしいブログの作り方 All rights reserved.

Page 4: アメブロガーさんのための フォームメーラー作成ガイドアメブロガーさんのための フォームメーラー作成ガイド 初めてでもカンタン!1.フォームメーラーに登録する

2.フォームを作成する

ログイン後、画面右上にある「一般フォームを作成」をクリックします。

フォーム名にフォームのタイトル(実際のフォームサイトのタイトルになります)と説明文(実際のフォームサイトの冒頭の挨拶文になります)を入力します。

テンプレートは使わないにチェックして設定を保存するをクリックします。

これで新規にフォームを作ることができました。

無料版では5つまで作成できますので、別のフォームを作りたい時は、再度一般フォームを作成から上記手順を進めて下さい。

次に入力項目を設定します。フォームのリスト左下にある「入力項目編集」をクリックします。

フォームはドラッグアンドドロップにて項目を自由に追加、並べ替えができます。

まずはプリセット欄にある「名前」をマウスでクリックしながら右側のフォームプレビュー欄にドロップします。

©2016 やさしいブログの作り方 All rights reserved.

Page 5: アメブロガーさんのための フォームメーラー作成ガイドアメブロガーさんのための フォームメーラー作成ガイド 初めてでもカンタン!1.フォームメーラーに登録する

右側に挿入されたところにマウスカーソルをあてがうと編集やコピー、削除のアイコンが表示されます。

アイコンの一番左、鉛筆をクリックします。

例に挙げる「名前」に関しては、通常「お名前」と表記するのが一般的ですので、項目名を修正します。

また、必ず必要な情報については入力必須にチェックを入れて設定を保存します。

お名前が修正できたら次にメールアドレスをドラッグアンドドロップします。

メールアドレスに関しては、入力必須、自動返信メールの返信先に設定、確認用入力欄にチェックを入れます。

管理者宛メールに関しては、フォームから送信された際、送信者のアドレスを差出人にするか、フォームメーラーからの通知にするかを設定します。ここはフォームメーラーからの通知でよいのでチェックは外します。

©2016 やさしいブログの作り方 All rights reserved.

Page 6: アメブロガーさんのための フォームメーラー作成ガイドアメブロガーさんのための フォームメーラー作成ガイド 初めてでもカンタン!1.フォームメーラーに登録する

続いて連絡先(電話番号)を登録します。電話番号に関してはお問い合わせフォーム的にはなくても問題ありません。

ただ、万が一メールアドレスが入力ミスされていた場合、連絡を付けることができなくなりますので入力項目としてあった方が安心です。

連絡先も一般的には「ご連絡先」と表記されますので修正します。

最後にお問い合わせ内容の入力欄を用意します。

これは基本セットの中にある「テキストエリア」をドラッグアンドドロップします

テキストエリアは複数行の自由文を入力できるスペースです。項目名は「お問い合わせ内容」のような表現がよいでしょう。

初期設定では横幅が30、縦が5行になっていますが、これだと少し狭く表示されてしまいます。

それぞれ倍の値(横60、縦10)に修正するとほどよい大きさになります。

これで入力項目の設定は完了です。

©2016 やさしいブログの作り方 All rights reserved.

Page 7: アメブロガーさんのための フォームメーラー作成ガイドアメブロガーさんのための フォームメーラー作成ガイド 初めてでもカンタン!1.フォームメーラーに登録する

続いて自動返信メール等の設定です。

画面上部の環境設定をクリックします。

フォームメーラーは、パソコン版、スマホ版、携帯(ガラケー)版の3種類に対応しています。

その種類ごとに公開・非公開が設定できますが、基本はすべて公開するにチェックを入れます。

そのまま画面最下部にある設定を保存するをクリックします。

受付期間は期間限定で募集する際フォームの公開・終了日時を設定することができます。

お問い合わせフォームの場合は特に不要です。

受付定員は人数を限定した募集などで定員オーバーにならないよう予め指定された登録がされた段階で自動的に受付終了のページに切り替えてくれる機能です。

こちらもお問い合わせフォームの場合は特に不要です。

©2016 やさしいブログの作り方 All rights reserved.

【参考】

Page 8: アメブロガーさんのための フォームメーラー作成ガイドアメブロガーさんのための フォームメーラー作成ガイド 初めてでもカンタン!1.フォームメーラーに登録する

続いて「各種画面設定」に入ります。

左側のメニューにある「各種画面設定」をクリックします。

完了画面設定には完了画面に表記する文言を記入します。

基本的には、

・送信のお礼・10分以内に受付確認のメールが届かない場合は迷惑メールフォルダをチェック・それでも見当たらない時はこちらへご連絡ください

を記入しておけばOKです。

完了メッセージを入力したら、画面下にある設定を保存をクリックして保存します

続いて左メニューの「各種メール設定」に入ります。

©2016 やさしいブログの作り方 All rights reserved.

お申込ありがとうございました!

受付確認のメールを10分以内にご登録頂いたメールアドレス宛に送信します。もし受付確認のメールが届かない場合は、

・迷惑メールフォルダに入っている・サーバで受信拒否されている

可能性もあります。(特に docomo,ezweb,softbankのアドレス)届かない場合はお手数ですが、 [email protected]までご連絡下さい。

Page 9: アメブロガーさんのための フォームメーラー作成ガイドアメブロガーさんのための フォームメーラー作成ガイド 初めてでもカンタン!1.フォームメーラーに登録する

まず最初に自動返信メール設定を登録します。

自動返信メールはフォーム送信者にメールが届いた旨を伝えることができますので安心感につながります。

自動返信メールを使用するに切り替え、件名欄には送信した内容がわかる文章を入れます。

本文欄にはフォームで入力された値を自動挿入する機能があります。

例えば相手が入力した名前をそのまま返信文の冒頭に持ってくれば、こちらから相手の名前を呼びかける主旨の返信メールを送ることができます。

置換文字挿入をクリックすると、フォームに設定した入力項目が表示されます。

お名前をクリックし、挿入するを押すと本文欄に置換え用の記号が挿入されます。

お名前の置き換え記号の後には「さん」や「様」などを入力しておくと、実際のメールには

〇〇 〇〇様

という表記でメールが送られます。

それ以下にはお礼文などを入れておきます

その下の差出人アドレス欄には自分のメールアドレス(フォームメーラーに登録したアドレスでなくても可)を入れておくと相手が返信しやすくなります。

入力完了したら、画面最下部の設定保存をクリックします。環境設定は以上で終了です。

©2016 やさしいブログの作り方 All rights reserved.

Page 10: アメブロガーさんのための フォームメーラー作成ガイドアメブロガーさんのための フォームメーラー作成ガイド 初めてでもカンタン!1.フォームメーラーに登録する

続いて上部メニューの中の「デザイン変更」をクリックします。

フォームの背景などをテンプレートの中から自由に選択することができます。

レイアウト等も変更できますがこれは既存のままで問題ありません。

デザイン一覧ボタンをクリックします。

背景はベタ塗りやグラデーション、イラスト入りなどがあります。

ご自身のお仕事や受け付ける内容とイメージが違い過ぎないデザインを選びましょう。

デザインを選択すると画面下にプレビューが表示されます。

そのデザインでよければ右上の設定を保存をクリックして完了です。

これでフォームが完成しました。

©2016 やさしいブログの作り方 All rights reserved.

Page 11: アメブロガーさんのための フォームメーラー作成ガイドアメブロガーさんのための フォームメーラー作成ガイド 初めてでもカンタン!1.フォームメーラーに登録する

完成したフォームを早速見てみましょう。

画面上部のフォーム名の下にグレーのアドレスが表記されています。

これが作成したフォームのURLアドレスになります。

ここをクリックして実際のフォームを確認してみましょう。

アメブロの記事からこのフォームへリンクを貼ってみましょう。

画面上部に表示されているアドレスを選択し、右クリック→コピーします。

アメブロの記事編集画面を開きます。

フォームへのリンクの貼り方は通常のリンクの貼り方とやり方は同じです。

リンクを貼りたいテキストをマウスで選択し、リンクのアイコンをクリックします。

URLの欄に先ほどコピーしたフォームのアドレスを貼り付けます。

リンク先はアメブロ外のサイトですので、「別ウインドウで開く」設定にします。

©2016 やさしいブログの作り方 All rights reserved.

Page 12: アメブロガーさんのための フォームメーラー作成ガイドアメブロガーさんのための フォームメーラー作成ガイド 初めてでもカンタン!1.フォームメーラーに登録する

無事フォームにリンクすることができました。

プレビューで確認する際は、クリックしてもサイトには飛びませんので、実際に記事を公開してから間違いなくリンクしているかを確認して下さい。

以上でフォームの設定、作成、公開作業は終了です。メールフォームはお問い合わせフォーム以外にも、申し込みフォームや予約フォームなどにも使うことができます。

別のフォームを作成したい場合は、改めて今の作業を行って下さい。

©2016 やさしいブログの作り方 All rights reserved.

Page 13: アメブロガーさんのための フォームメーラー作成ガイドアメブロガーさんのための フォームメーラー作成ガイド 初めてでもカンタン!1.フォームメーラーに登録する

3.フォーム活用例

【お申し込みフォームに選択肢を設置する】

お申し込みフォームを作成する場合、複数ある商品・サービスから選択してもらうことがあります。

例えばセミナーや講座なら、

・午前のみ受講・午後のみ受講・午前午後とも受講

お店や教室なら、

・Aコース(5000円)・Bコース(10000円)・Cコース(15000円)

といった具合です。

その時に使うのが「ラジオボタン」「チェックリスト」「リストメニュー」の3つです。

●ラジオボタン複数ある選択肢の中から1つだけを選んで欲しい時に使います。(複数選択はできません)

●チェックリスト複数ある選択肢の中から好きなだけを選べるようにしたい時に使います。

●リストメニューラジオボタンと機能は同じですが、画面表記がクリックすると一覧が出てくるプルダウン方式です。

©2016 やさしいブログの作り方 All rights reserved.

Page 14: アメブロガーさんのための フォームメーラー作成ガイドアメブロガーさんのための フォームメーラー作成ガイド 初めてでもカンタン!1.フォームメーラーに登録する

【投稿不可時にオリジナルメッセージを表示する】

期間限定、定員限定の受付フォームを作成する際、条件の範囲を超えると自動的にフォームが開かなくなります。

通常は、「現在受け付けておりません」という何とも殺風景なメッセージしか表示されませんが、この文章を自由に変えることができます。

環境設定→各種画面設定→投稿不可時の画面設定を開き、メッセージ欄に該当の文章を入れて保存すればOKです。

ちょっとした気遣いで印象は大きく変わるものです。

©2016 やさしいブログの作り方 All rights reserved.

申し訳ございません。こちらのエントリーは定員に達しましたので締め切らせていただきました。

キャンセル・増席等がありましたら、改めてブログ・メルマガにてご案内させていただきます。

Page 15: アメブロガーさんのための フォームメーラー作成ガイドアメブロガーさんのための フォームメーラー作成ガイド 初めてでもカンタン!1.フォームメーラーに登録する

【参加者リストを作成する】

イベントの申し込みフォームなどの場合、申込者の一覧・リストを作成することがあります。フォームメーラーには申込者の登録データをCSV出力(エクセルで加工できるファイル形式)できる機能があります。

すでに表形式になったものをダウンロードできますので、後は体裁を整えるだけで参加者リストを簡単に作成することができます。

フォーム一覧画面の「レポート」をクリックします。

レポートの画面にも登録者一覧が表示されます。

レポート画面の右上にある「CSVをダウンロードする」をクリックするとパソコンにデータを保存することができます。

©2016 やさしいブログの作り方 All rights reserved.

Page 16: アメブロガーさんのための フォームメーラー作成ガイドアメブロガーさんのための フォームメーラー作成ガイド 初めてでもカンタン!1.フォームメーラーに登録する

【無料版で5つ以上のフォームを作る裏ワザ】

フォームメーラーの無料版は5つまでフォームを作ることができますが、場合によっては5つ以上フォームを使いたい方もいらっしゃると思います。

Gmailを使うと無料版でも5つ以上のフォームを作ることが(裏技的に)可能です。

Gmailには既存のメールアドレスに「+」(プラス)や「.」(ピリオド)を紛れ込ませることで、違うメールアドレスでありながら、受信サーバはいつもの受信トレイに送られるというエイリアス機能という機能があります。

これを使うことで、フォームメーラーには違うメールアドレスとして登録(それぞれ5つのフォームが利用可能)して、フォームからの受信は大元のアドレスに届くという仕組みが作れます。

ただし、フォームメーラーの場合は「+」は使用できない記号になっているので、「.」を使う必要があります。

例えば、既存のGmailのアドレスが、[email protected]なら、

[email protected]@[email protected]

などが登録用のメールアドレスとして使えます。

そして、各フォームの環境設定→差出人アドレス欄には [email protected]を設定すれば折り返しの返信メールは大元のメールアドレスからの送信扱いにすることができます。

©2016 やさしいブログの作り方 All rights reserved.