[新連載]WEBでの申し込みフォームを公開するまでの道のり(ブログへ埋め込み)[5]


1日2時間操作方法で無駄にしていませんか?
パソコンが苦手な起業家のための
集まる集客®テクニカルコーチ田尻佐和子です。

 

連載中のこちら

「WEBからの申し込みフォームを公開するまでの道のり」

1日目:自動返信メール
http://web-yougo.com/agent-mail/2201/

2日目:サンクスページ
http://web-yougo.com/agent-mail/2204/

3日目:申し込みフォーム 

http://web-yougo.com/agent-mail/2208/

4日目:ランディングページ

http://web-yougo.com/agent-mail/2213/

5日目:ブログへ埋め込み ←今日はここです

6日目:申し込み開始(計測)

 

前回は、
ランディングページについてお伝えしました。

 

今日はランディングページに、
フォームを埋め込む方法についてです。

 

フォームの詳細を表示して

右サイドにある
HTMLソースをクリックします。

 

スクリーンショット 2017-01-22 5.51.15.png

 

URL版

Javascript版

HTML版

とタグが並んでいます。

スクリーンショット 2017-01-22 6.05.25.png

 

URL版をコピーして、
ブラウザーで表示すると、
どのように出来上がっているか確認ができます。

WordPressがまだない場合は、
このURLがランディングページのURLとなります。

 

Javascript版のタグをコピーして、
WordPressで作成したランディングページを、

ビジュアルではなく
テキストの表示に切り替えて、
表示させたい場所に貼り付けます。

 

スクリーンショット 2017-01-22 6.41.10.png

通常一番下でよいと思います。

スクリーンショット 2017-01-22 6.42.12.png

 

ビジュアル表示に切り替えても確認できませんが、
実際にページを表示してみると、
フォームが埋め込まれていることが確認できます。

 

項目の表示のレイアウトは、

 

PC&スマートフォン向け
横長レイアウト

PC&スマートフォン向け
縦長レイアウト

がありますが、

 

スマホでも見やすいのは、
縦長レイアウト
かと思います。

 

どちらも表示して
確認してみてください。

 

次回はいよいよ申し込み開始の方法を
お伝えしますね。