htmlを使ったメールフォームの作り方をお探しですか？
htmlであれば、サイトやブログのページを作ることができます。
では、htmlでもメールフォームは作れるのでしょうか？
今回は 簡単にできる htmlメールフォームの作り方についてわかりやすくご紹介します。
目次
htmlを使ったメールフォームの作り方の手順！
あなたはhtmlを使って、メールフォームを作ることができることはご存じでしょうか？
htmlを使うことで、あらゆるウェブサービスを作ることができます。
今回は、htmlを使ったメールフォームの作り方の手順についてわかりやすくご紹介します。
①htmlエディタの準備！
htmlを使ったメールフォームの作り方の手順の1つ目が「htmlエディタの準備」をすることです。
メールフォームを導入するサイトのhtmlエディタを準備してください。
htmlエディタがないと、メールフォームは作れません。
➁ファイルを作る
htmlを使ったメールフォームの作り方の手順の2つ目が「ファイルを作る」ことです。
htmlエディタを開き、左上の「ファイル」をクリックしてください。
❶「名前を付けて保存する」をクリックする
❷「メールフォーム.html」とファイル名を入力して保存する
❸フォルダは「メールフォーム.folder」にして保存する
以上で、メールフォームファイルの保存が完了です。
必ず、最初にメールフォームファイルの保存を行うようにしてください。
➂<html></html>タグで囲む！
htmlを使ったメールフォームの作り方の手順の3つ目が「<html></html>タグで囲む」ことです。
htmlエディタを開いたら、エディタの画面に<html></html>タグを打ち込んでください。
この<html>と</html>の間に、その他のタグを入れることで、メールフォームは完成します。
その他のタグを入れるたびに必ず「保存」をしてください。
「保存」されてないと、他の作業を入れた時に消えてしまうことがあります。
また「保存」されてないと、プレビューで表示されません。
④タイトルを入れる
htmlを使ったメールフォームの作り方の手順の4つ目が「タイトルを入れる」ことです。
「<h1>お問い合わせ</h1>」を、<html>と</html>の間に入れて「保存」してください。
プレビューで表示して確認してください。
お問い合わせが表示されればOKです。
⑤お問い合わせ項目を入れる
htmlを使ったメールフォームの作り方の手順の5つ目が「お問い合わせ項目を入れる」ことです。
次のコードを「お問い合わせ」の後に入れて「保存」をしてください。
<form action=”” method=””>
<div>
<label>お問い合わせ項目：</label>
<select name=”item”>
<option value=””>お問い合わせ項目を選択</option>
<option value=”product”>商品について</option>
<option value=”order”>注文について</option>
<option value=”ship”>配送について</option>
<option value=”service”>サービスについて</option>
<option value=”other”>その他</option>
</select>
</div>
プレビューで表示して確認してください。
お問い合わせ項目がプルダウンで表示されればOKです。
⑥お名前を入れる
htmlを使ったメールフォームの作り方の手順の6つ目が「お名前を入れる」ことです。
次のコードを「お問い合わせ項目」の後に入れて「保存」をしてください。
<div>
<label for=”name”>お名前：</label>
<input id=”name” type=”text” name=”name” placeholder=”お名前”>
</div>
プレビューで表示して確認してください。
お名前入力欄が反映されたらOKです。
⑦メールアドレスを入れる
htmlを使ったメールフォームの作り方の手順の7つ目が「メールアドレスを入れる」ことです。
次のコードを「お名前」の後に入れて「保存」をしてください。
<div>
<label for=”mail”>メールアドレス：</label>
<input id=”mail” type=”email” name=”email” placeholder=”メールアドレス”>
</div>
プレビューで表示して確認してください。
メールアドレス入力欄が反映されたらOKです。
⑧お問い合わせ詳細を入れる
htmlを使ったメールフォームの作り方の手順の8つ目が「お問い合わせ詳細を入れる」ことです。
次のコードを「メールアドレス」の後に入れて「保存」をしてください。
<div>
<label for=”comment”>お問い合わせ詳細：</label><br >
<textarea id=”comment” rows=”10″ cols=”30″ placeholder=”お問い合わせ内容を入力して下さい”></textarea>
</div>
プレビューで表示して確認してください。
お問い合わせ詳細入力欄が反映されたらOKです。
⑨送信ボタンの設置
htmlを使ったメールフォームの作り方の手順の9つ目が「送信ボタンの設置」です。
次のコードを「お問い合わせ詳細」の後に入れて「保存」をしてください。
<div>
<input type=”submit” value=”送信”>
</div>
</form>
プレビューで表示して確認してください。
送信ボタンが反映されたらOKです。