「html」を使っての問い合わせフォームの作り方！

「html」を使っての問い合わせフォームの作り方についてご存じでしょうか？

サイト作成ソフトであれば「html（エイチ・テー・エム・エル）」は必須です。

では「html」では、一体どうやって問い合わせフォームを作ればよいのでしょうか？

今回は「html」を使っての問い合わせフォームの作り方についてわかりやすくご紹介します。

「html」とは一体何か？
「html」はマークアップ言語
「html」を使っての問い合わせフォームの作り方の流れ
- ①ワードプレスの固定ページのコードエディターに入る
- ➁コードエディターに「html」を入力する

「html」とは一体何か？

みなさんは「html」とは一体どんなものかご存じでしょうか？

「html」を一言でいうと、

「サイトを作成する時のマークアップ言語」のことです。

また「html」は「HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」の略字です。

「html」はマークアップ言語

「html」はマークアップ言語です。

マークアップ言語とは、

「タグで囲むことで、構造が理解できる言語」のことです。

サイト記事の「タイトル」を例にしてご説明します。

サイトで「html」を使って「タイトル」を入力すると、

「　<title>　タイトル　</title>　」

となります。

要は「タイトル」という文字を「　<title>　</title>　」という前後の2つのタグで囲むことで、公開すると「タイトル」という文字が反映されます。

これがマークアップ言語という意味になります。

「html」を使うことで、コードで書いた文字・画像の全てが、マークアップ言語のタグで囲まれ、実際にネット上で、人が閲覧できる文字や画像となって反映されます。

「html」を使っての問い合わせフォームの作り方の流れ

こちらはワードプレスを使って「html」を使っての問い合わせフォームの作り方の流れについてご紹介します。

サイト作成ソフトでも同じ流れになります。

①ワードプレスの固定ページのコードエディターに入る

❶ワードプレスのダッシュボードに入り、左側メニューバーの「固定ページ」をクリックします。

❷固定ページ左上部の「新規追加」をクリックします。

❸ワードプレスのビジュアルエディターページが表示されます。

❹ワードプレスのビジュアルエディターページの右上の「・」が3つ並んでいるボタンをクリックします。

すると右側にメニューバーが出現します。

❺メニューバーの真ん中くらいに、エディターの項目があります。

コードエディターのボタンをクリックしてページを開いてください。

❻画面がコードエディターに変わります。

❼ページの中央に「タイトルを追加」があるので「お問い合わせ」をテキストで入力します。

➁コードエディターに「html」を入力する

❶「お問い合わせ」を入力した窓の真下に「テキストまたはHTMLを入力して開始」の窓があります。

その窓に今から「html」を入力します。

❷フォームをつくるには「html」の「form（フォーム）タグ」を使います。

お問い合わせの「名前」や「住所」の項目ことを「form」といいます。

お問い合わせの各項目の前後には「formタグ」を使います。

それぞれご紹介します。

❷「名前」を入れる

<form>

</form>

❸「住所」を入れる

</div>

❸「電話番号」を入れる

</div>

❹「メールアドレス」を入れる

<label class=”label”>メールアドレス</label>

</div>

❺「ご連絡を取りやすい方にチェックを入れてください」を入れる

<p class=”label”>ご連絡を取りやすい方にチェックを入れてください</p>

<input id=”test3″type=”radio”name=”contact”value=”whichever”><label for=”whichever”>どちらでも</label>

</div>

❻「お問い合わせ内容・ボックス・送信ボタン」を入れる

<label class=”label”>問合せ内容</label>

</div>

</div>

</form>

❼以上を入力して「プレビュー」をクリックして、反映したものを確認します。

問題がなければ「公開」をクリックして完了になります。