ホームページビルダーSP20に無料のメールフォームを挿入する（FC2メールフォーム）その２

前回は、FC2メールフォームで作ったお問合せフォームを　ホームページビルダーのSPの画面に埋め込むという作業で終わりました。

ホームページビルダー20SPに無料メールフォームを挿入する（FC2)その１&武庫川はポッポとコイキングばっかり(ドジ講師のポケモンGo）
　　　↓↓
http://blog.goo.ne.jp/murmarmurmar0816/e/0b57600881c8501a3f7e8f399eb7e88b

とりあえず、デフォルトのまま、タグを貼りつけただけ。
上はパソコン側のプレビュー、下は、スマホ用のプレビュー。

どちらも、画面内には収まっているが、書くところが小さいですねえ。

デフォルトのままだと、こんなになっちゃった、メールフォームを　ホームページビルダーの画面に合わせて　もうちょっとなんとかしたい。

お問い合わせ、書くところ小さすぎるやん。
メールアドレス、長い人どうするんあだあ！
住所も、途中で消えてなくなる。
そのまま、続けて入れてもOKだけど、入力する人はやりづらいわ。

こっちだって知りたい項目で、職業なんかいらないし、性別ほしいんだけど。（ブツブツ言うな・・ブーブー）




デフォルトはお問い合わせ内容の幅が50　7行になっているが実際にプレビューで見ると、えらく箱の幅が狭い。

ぼやいてるひまがあったら、進めええ・・・・

わかった。いじるよ。
ドジ講師が　いじる。（いじると、ろくなことはないぞ・・・とどこからか聞こえてくるけど）
ビルダーのSPの詳細マニュアルは、電子マニュアルや付属の本にも載っていない。
別の本を何千円も出して買うか、自分で手当たり次第にトライするか、ジャストシステムにつながらないサポート電話をかけるか、ジャストにメールしてしばらく待つか。

だから、適当独学でやってきた　ドジ講師の　「てきとーマニュアル」でよければ、参考にしてくださいましね。

それでは、G0！

A.

FC2メールフォームの編集画面からメニュー一覧で


まず、選択項目は、テキストボックス、エリアでは作れない種類のものを最低限に。
お名前と、年代と　性別。
お名前はテキストボックスだけど、年代は、ドロップダウンメニュー。性別はラジオボタン。

B.

このあとは、テキストエリアのカスタマイズ
定型フォーム・テキストフォームをクリックして編集画面をだす。
幅と行数を決める。

電話番号や、住所などは、テキストボックスの編集で　サイズをカスタマイズ。
自分で、好きな項目を好きな大きさに作れる。

最初、選択項目をカスタマイズして、テキストエリアのお問い合わせ内容を　デフォルトの５０のままにしておくと、テキストエリアがスマホプレビューからはみ出してしまった。



それじゃあ、FC２のほうで、また数値を変える。



５０じゃあだめだし、テキストボックスのほうに住所なども持ってきたから、４０くらいの幅でどうかなと一度やってみた。
住所も、お問い合わせ内容のボックスも幅がスマホのプレビュー画面からはみ出してしまう。

では。具合を直すために、また、FC2メールフォーム編集画面のテキストエリア設定に戻る。


３０が、ビルダーに埋め込んでスマホのプレビューを出した場合、ちょうど良い幅の数字になりました。プレビューは表示順を変更してからね。
普通は、住所１と住所２ですよね。((´∀｀))
住所１,住所２っていうテキストボックスを作るのが普通だけど、
幅が狭ければ、住所を2行にするっていうアイデアだってOKだと思うけどね。メールが届きゃあいいんだからね。ドジ講師の場合は。会社やお店の人は、ちゃんと作ってくださいまし。（ええ加減なこと）

C.

お問い合わせが一番上にきてしまったり、項目の順番がバラバラなので、表示順の変更もする。

FC2メールフォーム編集画面に戻ります。



世の中の常識程度の表示順に変更。
お問い合わせ内容は一番下。
名前の次は、メールアドレスか　住所あたりかな。



どうやら、FC2メールフォーム側の設定は　こんなもんで、ええーとしようかなあ。

D.

少し、レイアウトを美しくしてみたい。
スマホもパソコンもフォームが左に寄りすぎているし、少し、背景色なども加えて、フォームらしくすることに。

ビルダーの元の画面が黒だし、に文字も白いから、このままでもいいんだけど。
「眠たい時の日記」も、そうだけど　誰かさんは、黒の画面に　白の文字がお好き？



ビルダーの画面に戻ります。
ビルダーはCSSの簡易版をSのところから、設定できるようにしているので、「S」⇒「背景」タブ

まず、背景色の設定。
白っぽい色に。これは、簡単。


今度は「S」⇒「枠」タブ。ボーダーです。
ややこしいのは、「枠」ボーダーというやつですね。
角丸とか、選べるけど、とりあえず、四角で。
背景色と同じ色にした。
ボーダーの数値は２０と太くしてみた。
左パディングを５

これには理由がある。


ごらんのとおり、ボーダーの数値を１３くらい、パディングをなしにすると、リストマークが変な場所に入ってしまう。
だから、左パディングとボーダーの数値を大きくするのは、必要。
リストマーク消そうにも、fc2側のものだから、消すに消せない。

FC2メールフォームの形式は、タグではIDを貼りつけるだけなので、既定のメールフォームになるし、FC2側も　埋め込み式の場合は、テンプレートを変えないほうがいいと
指示もあったので、ビルダーで変えられる部分を、手直しするくらいしかできない。

FC2からの説明に
「ブログなどでプラグインやパーツとして利用する場合は、
テンプレート設定をしないほうが良い場合があります
また、パーツ利用時は添付ファイルの使用は出来ません 」と出てました。

E.

同じく「S」を押して、文字タブをクリック。
背景色を白っぽくしてしまったので、文字が白いと、見えないから、黒に変更。


先に幅をピクセルかパーセントで決めておいて、あとから、マージンの左右を自動にしておけば、いい場所に配置される。

F.

Eまでの作業をやった結果、
PCのほうのプレビューは、


スマホのプレビューは
　　

G.

忘れてはいけないのは、転送したサイトでテスト送信をすること。
入力した、内容が　自分の設定したメールに来るかどうか確認。
なんでもいいから、入力して　テスト送信

自分のほんとの情報もチロリと　入れたんで、塗りつぶしばっかりで　失礼。（洋介じゃないけど）
ちゃんと　届きました。

最後に　まとめ。
１．

wordpress,phpや、htmlのタグを書き込むより、制限は多いですが、
無料ですから、そこそこ、見栄えが良くなれば良いし、
４番で、説明しなおしていますが、セキュリティ上、埋め込み式ののほうが、リンクでFC2メールフォームのページを出すより、良いのではと　ソースの表示を見てて思った。
タグの書き換えなど、悪さをするとき、基本　埋め込み式のほうが　完璧とは言わないまでも　やりにくいと思いますが。
（idを盗まれれば終わりだけど・・・）

２．

ひまはかかるが、FC2とビルダーの画面を行き来してマメにプレビューを出す。
FC2メールフォームのユーザー用画面ででカスタマイズ。
・登録ボタンを押して保存。
・ホームページビルダーでプレビュー。
・ビルダー画面にメールフォームのレイアウトを合わせる作業。
・ビルダーでまたプレビュー　というのを繰り返す。
・スマホもPCも　両方ね。

３．

変わっていない時は、もう一度、FC2フォームタグをコピーしなおして、貼り付けなおしなんてこともしたけど。（これは意味なし。タグは同じですから）
FC2メールフォームで変更時、ホームページビルダーのプレビューに反映されるまでは多少タイムラグあり。
ビルダーを再起動して、プレビューを出した方が良い。更新ボタンではだめだった。

４．

ほかにも、googleのフォームの挿入なども同じ方法ですし、無料のメールフォームはたくさんあるようです。

ドジ講師はグーグルのメールフォームと忍者メールフォームとFC2メールフォームしか　知らないよ。
あしからず（使ったことのないもの、いい・・っていうわけにはいかないわ）

と、投げやりなことを言っておりますが、この三つ、練習用に前から使っていたけど、この３つどれも、使い勝手は　良かったです。
ただ、グーグルは詳細までは知らないです。

グーグルは　フォームのページをリンクで飛ばしても　安全性は高いでしょうね。
https://ですから　SSL/TSL暗号化されてる。

https://docs.google.com/forms/・・・

上のは、アンケートフォームをグーグルでサンプルとして作ったもの。

FC2メールフォームのページのURLは
http://form1.fc2.com/form/?id=〇〇〇〇ですからね。
暗号化されてない。

ホームページビルダーに、文字列　ボタンなどを挿入し、
FC2のメールフォームのページのリンクを文字列、ボタンに　挿入すれば、右の図のように別ページで開く。
　　

そのページにhttpsが入ってて、より、セキュリティ上安全なののがいいって方は、そうすればよろしいかと。

５．

スマホとPCの画面表示のための「S」CSSの設定（マージンとか、幅、パディングなど）　については、基本は　PCでやっておけば良いようです。
スマホのほうは、ビルダー側で調整してくれる模様。
もちろん、スマホはスマホで別に「S」で　別にCSSを設定できるようですけど。
５．については　細かくは検証していないので、これから、トライです。

相変わらずの備忘録はこれで終わり。

フフ、柿の美味しい季節になってきましたね。（好物・・・）
柿売ってるやんと　スーパーをのぞくと、野菜が、1.5倍から2倍弱の値段になってる。
どうしちゃったの？

師匠とドジ講師がいる、教室はこちら。
→http://www.kishima-sys.com/

応援クリックよろしくお願いいたします。

人気ブログランキング