FC2のメールフォームをHTMLファイルに埋め込んでみる
「FC2メールフォーム｜無料でメールフォーム作成・ログ管理」 というありがたいサービスを利用して、作成したHTMLファイルにお問合せフォームを埋め込んでみましょう。
メールフォームの作成
フォームができたら、フォームの内容を編集
あらかじめ用意されているものを使用するのがカンタン
最初なにも設定しない状態のフォーム（デフォルト）はこんな感じ
デフォルトのフォーの設定はこんな感じ
今回のフォームはこんな感じ
好みで設定をして「登録する」
フォームができたら、HTMLに埋め込むためのコードをコピペするために「パーツ利用の設置用タグデザイン設定」へ
フォーム表示用タグをコピー
あらかじめ作成しておいたHTMLファイルにペースト（貼り付け）
HTMLファイルをブラウザで見たらこうなっています。試しに送信してみましょう
「確認」を押すと
確認画面もちゃんと出る！ 良ければ「送信」
送信されたお問合せはどこに届くかというと、最初にFC2に申し込んだときのメールに設定されています
とどいたお問合せはFC2のメールフォームのところからも確認ができます
確認画面（ログ管理）はこんな感じ
自分のメールにも届いているので、そこからも確認できます
このメールに返信はできませんｗ
ＣＳＳはChromeの画面で右クリック「検証」で、どこにどのようなクラスが使われているか読み解きましょう
（Ｍａｃは ⌘ + Option + I ）
（Windowsは F12 ）
参考コード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
/* Fc2フォーム用 CSS */ /* 「・お名前」などの先頭の「・」を非表示 */ #fc2form li {list-style-type: none; } /* 「※」部分 */ #fc2form #coution2 { color: #db7093 !important; /* ※の色 */ font-size: 0.7em; /* ※の大きさ少し小さく */ vertical-align: super; /* ※文字の上付きに */ } /* 入力欄 */ #fc2form .form-textline , /* １行テキスト入力欄 */ #fc2form .form-textbox{ /* テキストボックス入力欄 */ width:100%; /* 横幅 */ padding: 10px 5px; /* 枠内余白 */ } /* 確認ボタン・送信ボタン */ #fc2form form input[type="button"]{ width: 20%; /* ボタン横幅 */ font-size: 15px; /* 文字サイズ */ color: #fff !important; /* 文字色 */ display: inline-block; /* 2つを横並びに */ padding: 15px 0px; /* 文字まわりの余白 上下 左右 */ text-align: center; /* 文字中央揃え */ border-radius: 8px; /* ボタン角丸 */ background-color: #19448e; /* ボタンの背景色 */ cursor: pointer; /* マウスカーソルはリンクポインターの形に */ } /* 確認ボタン・送信ボタン ホバー時 */ #fc2form form input[type="button"]:hover{ background-color: #887f7a; /* ボタンの背景色 */ } |
↓上記コードはこんな感じになる（練習サイトにFC2フォームを埋め込んでいるので、そのサイトのCSSも効いている）
