2017年6月2日金曜日

メールフォームってHTMLで簡単に作れるんだ【知らんかった】

今まで知りませんでしたが、HTMLで簡単にメールフォームが作れるので実際に作ってみました。
ポク太郎です。

ちょっとしたアンケートなどを採りたいときのためにアンケートフォームを探していたのですが、HTMLで簡単に作れたのでその作り方をメモります。

わざわざ外部にアクセスするとページが重くなるので自分で作れた方が何かと便利です。


簡単メールフォーム

HTMLで作るアンケートフォーム
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
37
38
39
40
41
42
43
44
45
46
47
<form action="mailto:***" enctype="text/plain" method="post">
<table>
<caption><b>↓↓ 調査にご協力お願い致します。↓↓</b></caption>
<tr>

<td align="center" colspan="2">質問。<br /></td>

</tr>
<tr>

<td align="center" width:="300px"><input name="通り名" type="text">
</td>

<td align="center" width:="300px"><select name="お住まい">

<option selected="">▽お住まい</option>
<option>北海道</option><option>
東北</option><option>
関東</option><option>
北信越</option><option>
東海</option><option>
近畿</option><option>
山陽</option><option>
山陰</option><option>
四国</option><option>
九州</option><option>
沖縄</option><option>
海外</option><option>

</td></tr>
<tr>

<td align="center" colspan="2"><br />
メッセージもお待ちしております。<br />
<textarea cols="60" name="メッセージ" rows="2"></textarea>
</td>

</tr>
<tr>

<td align="center"><input type="reset" value="やり直し" /></td>
<td align="center"><input type="submit" value="送信する" /></td>

</tr>
</tbody></table>

</form>

1,47
行目
<form>タグ
<form></form>でフォーム全体を囲みます。
mailto:の先が***になっていますが、ここにはメールアドレスを記入します。

どうせ迷惑メール収集ロボットが集めに来るので、こちらで解説した捨てアドレスを取得し、少しだけ分かりにくく加工して記入します。(この加工をしてもいずれ収集されるので必ず捨てアドレスを使用。)
11
行目
<input>タグ
<input name="通り名" type="text">
inputタグを使用するとエディットフィールド(テキストを入力できる箱)を作ります。
14~
28

行目
<select>タグ
<select name="お住まい">
selectタグを使用するとプルダウンメニューを作ります。
選択肢は、
<option selected="">A</option> ←あらかじめ選択される選択肢
<option>B</option> ←選択肢となる
<option>C</option> ←選択肢となる
35
行目
<textarea>タグ
<textarea cols="60" name="メッセージ" rows="2"></textarea>
textareaタグを使用すると、長文を書き込める箱を作ります。


これは単に閲覧している方のメーラーを立ち上げるだけですが、簡単に作れたのでメモってみました。

こちらの記事で重要な調査を行う予定があったので設置しました。(最後の方にあります。)


【関連記事】
[Thunderbird]設定やメールを別フォルダに保存してパソコン買い替えに備える
メールアドレスを自由に取得する方法


スポンサーリンク



↓ Ctrlキーを押しながら ↓

ブログ村へ blogramのブログランキング

ポク太郎の「俺の説明聞いてくれ」 コンテンツ
ポク太郎の「俺の説明聞いてくれ」最キラー記事 IT関連
映画・ドラマ・芸能
ブログ運営
アホの雑記
ホームへ戻る

スポンサーリンク





0 件のコメント:

コメントを投稿