フォームメーラーのオリジナルデザイン連結方法

ホタルイカが美味い
LINEで送る
[`evernote` not found]
Pocket

業者等にLPなどのオリジナルデザインを作ってもらって、
いざリリース!って時に、どうやってメーラーを組み込めば良いのか分からない
と言う人が結構居る様です(苦笑)

なので、定番のフォームメーラーを使って、
オリジナルデザインにフォームを連結する方法を書いて行きます。

自分でLP作ったり、問い合わせフォーム作るだけなら誰でも簡単に出来ますが、
デザインしてもらったレイアウトを崩したくない場合は、ちょっと工夫が要ります。
先日問い合わせを頂いたので、解説して行きます。

※ちょっとテクニカルに偏り過ぎなので、
意味分からない人はこの記事無視して下さい(^_^;)
分かんない人が読んでも、ゲ◯吐くだけだと思います(笑)

上でも書いてる通り、WordPressであれば、
コンタクトフォーム7(Contact Form 7)使ってみたりとか、
フォームメーラーのHTMLそのまま放り込めば済む話しなんですが、
デザインしてもらったものに適用するとなると、少しHTMLの知識が必要になります。

今から解説するのは、このような既存入力フォーム(+送信ボタン)を
フォームメーラーに適用(連結)する方法です。
このフォームにフォームメーラーを設定します。

ここでは、フォームメーラー側の設定について記載致します。
オリジナルデザインHTMLファイルへのフォーム導入部分については、
次の記事をご参照ください。
次の記事はこちら⇒フォームメーラーのオリジナルデザイン連結方法(完結編)

実践に則した形でお見せして行きます。

フォームメーラー側の作業

フォームメーラは、FREE版で大丈夫ですので、先ずアカウントを取得しておいて下さい。
フォームメーラのアカウント取得操作は割愛します。
それが出来ない様な人は、デザイン外部に頼んじゃダメです(笑)
自力でなんとかして下さい。

フォームメーラーのFree版にログイン後、
右上に新規のフォームを作成するボタンが有りますので、こちらをクリックして下さい(画像参照)。
フォームメーラーのフォーム作成①

フォームの名前をつけるポップアップが出て来るので、とりあえず、内容が分かる名前をつけて保存して下さい。

同時に『テンプレート選択』という、チェックつける所が出て来ますが、これはどちらでも良いです。
【テンプレート(個人情報入力セット)を使う】
にチェックをいれて作成すると、最初から色々な項目がセットされた状態で作成されます。
「名前」等の項目がありますが、大概思った通りでは無い(今回はデザインに併せて作成するのが目的)ですので、
【使用しない】
でいいです。

フォームメーラーのフォーム作成②
こんな感じで作成されます。

先ず、左端の『入力項目編集』を行います。

入力項目編集

今回使用する項目は、画像の①〜③までの項目のみです。
もう少しイレギュラーがある場合は、それに応じて作成して下さい。

フォームメーラーのフォーム作成③

今回は、一番最初に示したフォームを作る事が目的ですので、
項目数と内容を合わせます。(上の画像参照して下さい)

2番目のメールアドレス入力欄は、③の『メールアドレス』を利用します。
5番目の意気込み入力欄は、複数行入力可能である為、②の『テキストエリア』を利用します。
それ以外の項目は全て①の『テキストフィールド』を利用します。

左側の項目をクリックし、右側にドラッグ、離すとフォームの項目としてセットされます。

こんな感じです。
フォームメーラーのフォーム作成④

今回の場合、別にこのままでも良いのですが、自分が混乱しない様に、表示を変更しておきます。

右項目にカーソルを合わせるとこんな表示になり、ここから編集可能です。
フォームメーラーのフォーム作成⑤

クリックするとこんな表示が出ます。
フォームメーラーのフォーム作成⑥

とりあえず、項目名さえ変えれば良いのですが、文字数制限を入れたい場合や、
入力を必須にしたい場合(多分メールアドレスや名前は必須にした方が良いです)
文字入力に制限(文字制約)を入れたい場合等、ここで設定する事が出来ます。

ただ、これあんまり優秀じゃなくて、「半角文字」という設定がありません。
「半角数字」「半角英数字」しか設定が出来無いため、
「-」等の記号が入るとエラーになります。
電話番号や、LINEやSkypeなどのIDには利用出来無いので注意して下さい(苦笑)

ここまで設定出来たら、次は環境設定です。
このフィールドの設定は、別の画面に行くと自動で保存されますので、気にせず、
次の環境設定タグをクリックして下さい。

環境設定

環境設定タグを押すと、こんな画面が出て来ます。
フォームメーラーのフォーム作成⑦

全部写真にするとキリが無いので、必要項目のみ解説します。

先ず、この画面の『公開設定』、PCのみ公開にしておいて下さい。
ここから先は、画面一番下に、『設定を保存する』と言うボタンが有りますので、
設定完了後、保存する為に必ずこちらをクリックして下さい。
※ここから先は自動保存では有りません。

保存が終わったら、左のタグから、次の『各種画面設定』行きます。

一番上に、入力画面設定と有りますが、これを必ず
『外部サイトに設置する(設置にはHTMLコードをご利用ください)』
にして下さい。(初期値は別の所にチェックが付いています。下画像参照)
フォームメーラーのフォーム作成⑧

この下の方に『完了画面設定』と言う項目が有りますが、
こちらはどのようにしたいかは自由です。
メッセージ入力欄に「登録しました。」とか入れておくか、
リダイレクトURLに自分のサイトの固定ページ等を設定して、
「登録完了しました」の様なメッセージを書いておくか、
などして下さい。

『投稿不可時の画面設定』も同様です。

この辺りについては、もしご希望が有れば、新たに記事なりなんなり作りますので、
個別問い合わせや要望下さい(笑)

先ほどと同様、画面一番下に、『設定を保存する』と言うボタンが有りますので、
保存して次の、『各種メール設定』に進みます。

各種メール設定

ここは登録が有った場合、メールで通知が来るのですが
その宛先や、内容の設定が可能です。

基本的な内容は、まぁ、見れば分かると思うので、
『自動返信メール設定』(初期値は「使用しない」)についてお話しします。

これは、フォームに入力して頂いたメールアドレス宛に、
自動で返信メールを送る機能です。(つまりフォームにメールアドレスが必須)
「使用する」にすると、沢山の項目が表示されます(下画像参照)
フォームメーラーのフォーム作成⑨

ここで、メルマガ等によく使われる、
名前など、入力項目の挿入機能が利用出来ます

メルマガスタンド等使った事が無い方向けに、簡単に解説します。
上の画像を参照しながらこちらの画像を見て下さい。

フォームメーラーのフォーム作成⑩

仮にこのような設定にすると、
名前:塩見
アドレス:a@gmail.com
電話:000−0000−0000
LINE-ID:line-id

で登録した場合、登録直後に

〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

メール件名:ご登録ありがとうございます。
塩見さん
メールアドレス:
a@gmail.com
電話番号:
000−0000−0000
LINE-ID:
line-id
で登録致しました。

〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

と言うメールが送信されます。

これを利用する場合、一つ前の項目である『完了画面設定』で、
「登録アドレス宛にメールを送信しましたので、ご確認ください。
万一メールが届かない場合は、アドレスが間違っている可能性がございますので、
再登録をお願いします。」
などと入れておくと、入力者が正しいアドレスが登録されたかどうかがわかり、親切です。

ここに記載した以外の『フィルタリング設定』や、『トラッキング設定』などは、
やりたければフォームメーラーのマニュアルを参照してご利用ください。
※何もしなくても大丈夫です。知りたい人は個別に。

ここまでで準備は終了です。
次は実際のオリジナルデザインに、ここまで作成したフォームを連結させて行きます。

大変長くなりましたので、キリがいいこの部分で、次の記事へ連携したいと思います。

次の記事はこちらフォームメーラーのオリジナルデザイン連結方法(完結編)

あとがき

記事が役に立ったら、下記応援ポチ、「いいね」等のご協力お願いします。

@自宅
今日はこんな感じで作業中
ホタルイカが美味い
ホタルイカが絶妙に美味いです(笑)

ブログランキング参加しています。
応援ポチお願いします!
我が家のサイヤ人(笑)

この記事の著者

ウッシー主夫×起業家 ビジネスと家族のためのコンサルタント

ほぼ主夫。ちょっと起業家。
いかに毎日楽しく過ごすか?を追及している。
そのため、稼げないときから起業したったので、経験は豊富。もっと稼いでいきたいという思いもあり、このブログでは何でもかんでも公開していくことに。
もうすぐ4児の父。

この著者の最新の記事

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

Time limit is exhausted. Please reload CAPTCHA.

著者について


ウッシー(1983年生)

2017年。気まぐれでいい加減なアイコンの人になる。
けど、ドメインのせいで本名モロバレ(苦笑)

主夫としての腕を磨きつつ、起業家としての腕も磨いている
2足のわらじをはきまくっている男。

生きているのは楽しいが、
その楽しさを伝える文章能力が欠如していて、
伝えられないのが悩み。

ビジネス経験は豊富だが、稼ぎがいまいちなので真面目に奮闘中。
このブログは、
【これからビジネスを始めていきたい人】
のために、ノーガードフル〇ンを曝して、
一緒に成長していくために構築したった。

もとSEでHTMLはそこそこ得意。
ビジネス経験はそこそこ豊富。

feedly登録はこちら

follow us in feedly

あなたの人生を変える(かもしれない)LINE@

是非こちらからご登録ください。(クリックでも行けます)

あなたの人生を変えるLINE@

友だち追加数

家族、仕事、自分の、いい関係。見つけませんか?

ページ上部へ戻る