<form>

<input type="submit">

<h1 class="contact-title">お問い合わせ</h1>

<form>
  
  <input type="submit" value="送信" class="submit-button" />
</form>
<script>
  const button = document.querySelector('.submit-button')

  button.addEventListener(
    'click',
    function () {
      console.log('送信ボタンが押されました')
    },
    false
  )
</script>

*,
*:before,
*:after {
  box-sizing: inherit;
}

html {
  font-size: 14px;
  box-sizing: border-box;
  color: #333333;
}

/* お問い合わせ タイトル */
.contact-title {
  font-size: 24px;
  color: #495b65;
  text-align: center;
  position: relative;
  margin: 40px 0 40px 0;
}
.contact-title::after {
  content: '';
  width: 50px;
  height: 3px;
  display: inline-block;
  background-color: #495b65;
  position: absolute;
  bottom: -20px;
  left: calc(50% - 25px);
}

/* 送信ボタン */

.submit-button {
  display: block;
  margin: 0 auto;
  background-color: #495b65;
  color: white;
  padding: 8px 64px;
  border-radius: 50px;
  font-size: 14px;
  cursor: pointer;
}


<h1 class="contact-title">お問い合わせ</h1>

<div>
  
</div>
<script>
  const button = document.querySelector('.submit-button')

  button.addEventListener(
    'click',
    function () {
      console.log('送信ボタンが押されました')
    },
    false
  )
</script>

お問い合わせフォームを宣言しよう

お問い合わせフォームの完成版を見てみよう

<input type="text">

placeholder

名前の入力欄を作成しよう

<label>

名前の入力欄に紐づくラベルを作成しよう

<input type="email">

メールアドレスの入力欄を作成しよう

<input type="tel">

電話番号の入力欄を作成しよう

<input type="date">

日付の入力欄を作成しよう

<input type="checkbox">

複数選択できるチェックボックスを作成しよう

<input type="radio">

1つだけ選択できるラジオボタンを作成しよう

<select>

項目が多いときはセレクトボックスを使おう

<textarea>

メッセージ入力欄を作成しよう

required

入力必須項目を指定しよう

:invalid

入力エラー時のスタイリングをしよう

お問い合わせフォームの設計から入力エラー時のスタイリング、バリデーション実装までをカバー。ユーザーからの情報収集を効率化する方法を身につけます。

0からWebサイト制作のコツを学び、案件獲得までに必要なスキルをキャッチアップします。

Web制作コース

【パーツ編📦】ウェブサイトの主要なセクションパーツを作成

「お問い合わせフォームを実装しよう」レッスンの総復習クイズです。

お問い合わせフォームを実装しようの総復習クイズ

お問い合わせフォームを実装しよう