IT豆知識

[WordPress×フォームメーラー] 画像入り登録フォームの作り方

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

こんにちは(^^) ブラザーズの宮方くんが作ってくれた画像入り登録フォームの作り方。これ、わかりやすいのでUPします。

今回は画像入りのフォームメーラーの作成方法をお教え致します。そんなに難しくないのでぜひ見ながら作ってみましょう!まずフォームメーラーを登録下さい!http://www.form-mailer.jp/

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

 


 

  • 申込が終わったら「一般フォーム」よりフォームメニューを作成致します!
  • こちらはFree版で説明致します。
  • 作成する登録フォームにタイトルを入れておくと便利です!
  • 必要のないフォームを消去するのにもいいですよね。
  • 氏名・連絡先・質問なども一緒に作成します。


登録フォームは完成しましたか?
完成したら「必ず保存」をしておいて下さいね!


  • 完成したらまず「ワードプレス」と「フォームメーラー」に 使う「看板」をご用意下さい。
  • ※ワードプレスはブログとして使用していないものを用意して下さい!
    サイドメニューやグローバルナビなどがついていないものでの使用することを推奨します!(サイドバーがついていないなら固定ページの利用でもOK)


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

 

  •  ワードプレスの「固定ページ」にフォームページをつくりましょう!
  • ワードプレス左メニューから「固定ページ」→「新規追加」をクリック下さい!
  • 私の方ではご相談フォームというタイトルを付けました。
    次に用意した「看板」を「メディアを追加」から入れることが出来ます。
    早速画像を追加しましょう!

 

 

「上記ボタンでも、ワードプレスの左メニューでも」画像は追加することが出来ます!お好きな方で作業してくださいね。



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

 


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

 

赤枠の中のソースコードをコピーして下さいね!

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

 

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

 

フォームの質問内容によりページが長くなる場合は、「1300pxや1500px」など長くする必要があるので、短かったり長かったり細かい数字の調整も必要になります。※ワードプレスにコピーしたあとで上記の赤枠部分を変更して下さい!

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

「文字だけじゃわかんなーい」なんて思っていませんか?

Skypeレクチャーしてくれるところがありますよ。

ワードプレス制作代行と格安LPならネットキャロラインがおすすめ!

社長とってもいい人だし、制作が終わってからも作り方を教えてくれたりと本当にかゆいところまで手が届くかんじ。

ワードプレスを利用した格安のLPとか、ホームページの制作代行とか、コンサルとか初心者向けにやっているみたい。

ABOUT ME
ちゅうたん
はじめまして、宇宙鼠のちゅうたんです。ゆうこりんしゃちょーのお手伝いをしてお小遣いもらってます( *´艸`)