お助けにゃんこのIT講座

画像入り登録フォームの作り方

ワードプレスとフォームメーラーで画像入り登録フォームを作る

こんにちは(^^)

今回は画像入りのフォームメーラーの作成方法をお教え致します。
そんなに難しくないのでぜひ見ながら作ってみましょう!

まずフォームメーラーを登録下さい!
http://www.form-mailer.jp/

 

Free版(無料)とPro版、BUSINESS有料版をお選びいただけます!
最初はFree版で登録の練習をしてみるのもいいかもしれません

002

 


003

申込が終わったら「一般フォーム」よりフォームメニューを作成致します!
こちらはFree版で説明致します。

 


作成する登録フォームにタイトルを入れておくと便利です!

必要のないフォームを消去するのにもいいですよね

氏名・連絡先・質問なども一緒に作成します。

 

005
登録フォームは完成しましたか?

完成したら「必ず保存」をしておいて下さいね!

1000

 


完成したらまず「ワードプレス」と「フォームメーラー」に

使う「看板」をご用意下さい

※ワードプレスはブログとして使用していないものを用意して下さい!
サイドメニューやグローバルナビなどがついていないものでの使用することを推奨します!


試しにこんな看板を作りました!

006

 

 ワードプレスの「固定ページ」にフォームページをつくりましょう!

ワードプレス左メニューから「固定ページ」→「新規追加」をクリック下さい!

私の方ではご相談フォームというタイトルを付けました。
次に用意した「看板」を「メディアを追加」から入れることが出来ます。

007
早速画像を追加しましょう!

008

 

「上記ボタンでも、ワードプレスの左メニューでも」

画像は追加することが出来ます!お好きな方で作業してくださいね

 

 


009
「看板画像」を挿入できたら必要な本文を記述しましょう!
※フォームメーラーにも本文を記述するところがあるので無理に記述することはありません

 


ここからはフォームメーラーを使用します!
フォームメーラーを開いたらコード表示を押しましょう!

1010

赤枠の中の文章をコピーして下さいね!

 

次にワードプレスを開いて
「本文の最後」に上記インラインフォームの埋め込みコードをペーストします!

1200

 

こんな風にフォームメーラーをページに組み込むことができます!(^^)

 

1300

フォームの質問内容によりページが長くなる場合は、
「1300pxや1500px」など長くする必要があるので

短かったり長かったり細かい数字の調整も必要になります。
 ※ワードプレスにコピーしたあとで上記の赤枠部分を変更して下さい 

 

今回私の試作では1000pxの値は、フォームのページを1000px長く伸ばしたという命令を書いたということです。
フォームの名前や連絡先などが増えるともっと長くする必要があり、1300pxとか1500pxなど画面を確認してから数字を入れ替えて下さい

 

どうです簡単でしょ?(^^)b

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です