メルマガ登録フォームを設置する方法(オレンジフォーム)

form

 

メルマガの配信サービスはいろいろありますが、100件まで無料なのと、多くの人が使っていることで、最初はオレンジメールから入るのがおススメです。

 

オレンジメールの登録とブログへの設置方法は、こちらの記事をご覧ください。

⇒ FC2ブログにメルマガ登録フォームを設置する方法(オレンジメール)

 

上の記事は、FC2ブログへの設置方法として書いていますが、ワードプレスでもほぼ同様ですから、十分参考にしていただけると思います。

 

ただ、オレンジメールの登録フォームは、スタイルが決まっていて、おもしろくないというか、格好悪いというか、ともかく、あなたの気にいらないのであれば、オレンジフォームを使う手があります。

 

そこで、オレンジフォームをワードプレスに設置する方法を、こちらの記事で紹介することにしました。

 

お手数ですが、まずは、さっきの記事を参考にして、オレンジメールの登録と、プラン作成まで終えてください。

 

そこまでできたら、また、ここに戻ってきてくださいね(^^ゞ

 

登録フォームを作る

オレンジメールの登録と、プラン作成が済んだところで、さっそくオレンジフォームへと進みますよ(^^)v

 

orangeform01

まず、オレンジメールのプラン一覧から、すでに作成したプラン名を選択します。

 

orangeform02

次に、右下にある、オレンジフォーム/新規作成へ。

 

orangeform03

フォームの作成画面になりますので、必要事項を入力・選択して次へを押してください。

画面にはありませんが、ここでは、管理用及び公開用フォーム名を「テスト」と、「TEST」にしました。

この公開用フォーム名が、登録フォームの標題として表示されます。

 

orangeform04

次に、登録フォームで入力する項目を選択するテンプレートが出てきます。

テンプレート選択では、フリーを選んでください。

フォーム項目では、姓名を選びたいところですが、そうすると下の図のように、姓と名の2枠になってしまうんです。

 

orangeform19

入力項目が増えるほど登録率が落ちるので、これは困りものです。

そこで、フリー項目を名前の入力枠に使います。

ただし、これにも一つ欠点があります。のちほど説明しますね(^^;)

 

orangeform05

フリー項目は、フォーム項目の画面の下の方にあります。

その行ごとドラッグで移動できるので、ずっと上までひきあげてください。

 

orangeform06

メールアドレスの上まで持ってきました。

項目名を「お名前」などに変えて、次へ

 

orangeform07

登録完了メールの設定になります。

初期設定の件名、本文を、書き替えましょう。

%%〇〇%%は自動置換のコマンドです。

あて名や、メールアドレスなど、登録者ごとに違う項目を、自動的に差し込んでくれる機能ですね。

ただし、登録完了メールに使える自動置換は、ここにあるものだけです。

orangeform08

この項目をクリックして入力します。

お気づきだと思いますが、ここには、項目1が無いのです。

これが、先ほど言った欠点です。

つまり、姓と名に枠が分かれるのを避けて、名前の入力枠に項目1を使うと、今度は「〇〇さん、はじめまして。・・・」が、使えないのです。

けれども、本番のメルマガの方では、項目1も自動置換できるので、この登録完了メールだけは、〇〇さん無しで我慢しましょう。

 

orangeform09

これで、フォームは完成しました。次に、オレンジメールと関連付けを行います。

フォーム設定の基本設定(編集)をクリックしてください。

 

orangeform10

読者設定/インポート先プランで、メルマガのプランを選択

 

orangeform11

フォーム利用/HTMLコードをクリックします。

 

orangeform12

表示されたHTMLコードを、「クリップボードにコピーする」でテキストエディタ等に保存しておきます。

 

orangeform13

ワードプレスの固定ページに戻って、HLMLコードを貼り付けましょう。

なお、上の画像は、クリックすると原寸大で表示されます。

黄色の枠で囲ったところは、このあと説明しますので、少々おまちくださいね(^^)

 

orangeform14

投稿画面のビジュアル側で見ると、こんな感じ。

標題の「TEST」のところでセンタリングボタンを押すと、枠の中でセンタリングが機能します。

 

orangeform15

プレビューするとこんな感じです。

まだ格好悪いので、さっきのHTMLコードの画像の、黄色で囲ったところを変更しましょう。

は、欄外に「必須です」と説明しないのであれば、削除してしまいます。

入力枠も右側の余白がバランス悪いので、私は200pxを230pxにしました。

最後に、画像を付けるつけないは、そのページのバランスを考えて判断してください。

 

うまくできましたか?

ちなみに、私のは、こうなりました(^^)

↓ ↓ ↓

 

 

メルマガ登録

定員オーバーのため新規募集を停止しました。

コメントを残す

サブコンテンツ

管理人について

 

はじめまして。
噺屋(はなしや)です。

 

前回の東京オリンピックの時には生まれていました。 (^^)v

 

現在は、信州で豊かな自然に囲まれ、妻と娘と犬一匹と、のんびり暮らしています。

詳しいプロフィール

 

ゼロからアフィリエイトで稼げるまでを、全部無料で教えてしまうメルマガ講座やってます。

メルマガ登録

 

ご質問やご相談があれば、ご遠慮なくどうぞ。24時間以内にお返事します。

私と同じ中高年や、アフィリエイト初心者の方、大歓迎です。

お問い合わせ

ブログランキング☆

このページの先頭へ