html 入力フォームサンプル

HTML入力フォームサンプル: 効果的なコンタクトフォームデザイン

このガイドでは、HTML入力フォームのサンプルを紹介し、コンタクトフォームを効果的にデザインするためのヒントを提供します。使いやすく、ユーザーにとって快適なフォームを作成する方法を学びましょう。

この記事では、ユーザーフレンドリーでコンバージョン率の高い問い合わせフォームを作成するためのデザインとEFO対策、そしてすぐに使えるHTMLとCSSのコード例を紹介します。

シンプルな問い合わせフォームのデザイン

シンプルなデザインながらも、ちょっとした工夫で洗練された印象を与える問い合わせフォームの例を4つ紹介します。

例1：フォントの工夫でおしゃれに

<form>
  <label for="name">お名前</label><br>
  <input type="text" id="name" name="name"><br>
  <label for="email">メールアドレス</label><br>
  <input type="email" id="email" name="email"><br>
  <input type="submit" value="送信">
</form>

form {
  font-family: Georgia, serif; /* Georgiaフォントを指定 */
}

GeorgiaやTimes New Romanといったセリフ体フォントを使用することで、クラシックで洗練された雰囲気を演出できます。

例2：見出し設定をつけた問い合わせフォーム

<h2>お問い合わせフォーム</h2>
<form>
  <!-- 以下略 -->
</form>

見出しを設定することで、ユーザーが現在どのページにいるかを明確にし、離脱率の低減に繋がります。

例3：角丸加工した問い合わせフォーム

<form>
  <!-- 以下略 -->
</form>

form input, form textarea {
  border-radius: 5px; /* 角丸の度合いを調整 */
}

角を丸くすることで、フォーム全体の印象が柔らかくなります。

例4：パステルカラー×角丸の問い合わせフォーム

<form>
  <!-- 以下略 -->
</form>

form {
  background-color: #f0f8ff; /* パステルブルーを指定 */
}
form input, form textarea {
  border-radius: 5px;
  border: 1px solid #d0e0f0;
}

パステルカラーの背景色と角丸を組み合わせることで、優しい印象のフォームを作成できます。

コピペで使える！おしゃれな問い合わせフォームのデザイン

ユーザーの目を惹き、印象的なウェブサイトを実現するために、問い合わせフォームのデザインは重要な要素です。ここでは、個性的でおしゃれな問い合わせフォームの例を、具体的なHTMLとCSSのコード例とともに4つご紹介します。

例1：色を工夫したおしゃれな問い合わせフォームデザイン

色の使い方次第で、フォームの印象は大きく変わります。例えば、必須項目に緑色のアイコンを使用したり、黒と赤を効果的に組み合わせたりすることで、スタイリッシュで洗練されたフォームを作成できます。

HTML例：

<form class="stylish-form">
  <label for="name">お名前 <span class="required">*</span></label>
  <input type="text" id="name" name="name" required> 

  <label for="email">メールアドレス <span class="required">*</span></label>
  <input type="email" id="email" name="email" required>

  <button type="submit">送信</button>
</form>

CSS例：

.stylish-form label {
  color: #333;
}

.stylish-form input, 
.stylish-form button {
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  color: #555;
}

.stylish-form button {
  background-color: #008000; /* 緑色 */
  color: white;
  border: none;
  cursor: pointer;
}

.stylish-form .required {
  color: red;
}

上記の例では、緑色の送信ボタンと赤色の必須項目表示で、重要な情報を明確に示しています。

例2：クリックで入力項目が開く問い合わせフォーム

JavaScriptを活用することで、クリックして入力項目を開閉できる、アコーディオンメニューのようなフォームを作成できます。ユーザーが入力に必要な項目のみを表示できるため、フォーム全体がコンパクトになり、見やすくなります。

HTML例：

<div class="accordion">
  <div class="accordion-item">
    <h3 class="accordion-header">お名前 <span class="required">*</span></h3>
    <div class="accordion-content">
      <input type="text" name="name" required>
    </div>
  </div>
  <div class="accordion-item">
    <h3 class="accordion-header">メールアドレス <span class="required">*</span></h3>
    <div class="accordion-content">
      <input type="email" name="email" required>
    </div>
  </div>
  <button type="submit">送信</button>
</div>

CSSと

詳細なコードは割愛しますが、CSSでアコーディオンのデザインを定義し、JavaScriptでクリック時の開閉動作を実装します。

例3：入力したくなる問い合わせフォーム

ユーザーの心を掴み、入力意欲を高めるためには、アニメーションやイラストを効果的に活用することが重要です。視覚的な楽しさを加えることで、単なる入力作業ではなく、ユーザーにとって魅力的な体験を提供できます。

例えば、入力フィールドにフォーカスが当たった際にアニメーションを加えることで、ユーザーの視線を自然と誘導できます。また、送信ボタンに動きを付けることで、クリックしたくなるような、遊び心のあるインタラクションを実現できます。

実装例：入力フィールドのフォーカスアニメーション

HTML:

<label for="name">お名前</label>
<input type="text" id="name" name="name">

CSS:

input[type="text"] {
  padding: 10px;
  border: 2px solid #ccc;
  border-radius: 5px;
  transition: border-color 0.3s ease; /* アニメーションの設定 */
}

input[type="text"]:focus {
  outline: none;
  border-color: #007bff; /* フォーカス時にボーダーの色を変更 */
}

上記はシンプルな例ですが、CSSアニメーションを使用することで、より複雑で滑らかな動きを実現できます。

実装例：送信ボタンのホバーアニメーション

HTML:

<button type="submit">送信</button>

CSS:

button[type="submit"] {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: transform 0.2s ease; /* アニメーションの設定 */
}

button[type="submit"]:hover {
  transform: translateY(-3px); /* ホバー時にボタンを少し上に移動 */
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); /* 影を追加 */
}

上記の例では、ホバー時にボタンを少し上に移動させ、影を追加することで、クリックしたくなるような視覚効果を加えています。

例4：画像を活用した問い合わせフォーム

背景画像を効果的に使用することで、ブランドイメージを強調した、印象的なフォームを作成できます。例えば、企業イメージに合った写真やイラストを背景に設定することで、フォームに独自性を加えることができます。

HTML例：

<form class="image-form">
  <!-- 入力フィールド -->
</form>

CSS例：

.image-form {
  background-image: url('path/to/your/image.jpg'); /* 画像のパスを指定 */
  background-size: cover; 
  background-position: center;
}

上記の例では、background-imageプロパティで背景画像を設定し、background-sizeとbackground-positionで表示を調整しています。

EFOを重視した問い合わせフォームのデザインとは？

EFO（入力フォーム最適化）とは、ユーザーが入力しやすいフォームを設計することで、離脱率を減らし、コンバージョン率を高めるための施策です。具体的には、必須項目の明示、住所自動入力、入力エラーのリアルタイムチェックなどが挙げられます。

問い合わせフォームのデザインを30秒で作れる「formrun」

「formrun」は、120種類以上のテンプレートから好みのデザインを選び、ドラッグ&ドロップで簡単にフォームを作成できるサービスです。HTMLやCSSの知識がなくても、プロが作成したような美しいフォームを短時間で作成できます。また、EFO対策やアクセス解析機能も充実しており、フォームの改善に役立てることができます。

使いやすい問い合わせフォームのデザインを目指そう

入力必須項目の明記、プレースホルダーの活用、住所自動入力、半角/全角自動変換、レスポンシブ対応、リアルタイムバリデーションなど、EFO対策を適切に実装することで、ユーザーの離脱を防ぎ、コンバージョン率を向上できます。「formrun」を利用すれば、これらのEFO対策を簡単に実装できます。

デザインのポイント

効果的なフォームデザインのために考慮すべきポイントを以下の表にまとめました。

ポイント	説明
簡潔なラベル	各入力フィールドに明確で簡潔なラベルを提供します。
インラインバリデーション	リアルタイムでエラーメッセージを表示し、ユーザーが即座に修正できるようにします。
視覚的なヒント	プレースホルダーやヒントテキストを使用して、ユーザーが入力方法を理解できるようにします。

よくある質問 (QA)

Q1: フォームデザインの最も重要な要素は何ですか？
A1: ユーザーにとっての使いやすさが最も重要です。ラベルの明瞭さ、フィールドの配置、バリデーションが非常に重要です。

Q2: モバイルデバイス向けのフォームデザインに何か特別な配慮が必要ですか？
A2: はい、タッチで操作しやすいサイズのフィールドやボタン、スクロールしやすいレイアウトが必要です。

Q3: フォームにどれくらいの情報を求めるべきですか？
A3: 必要最低限の情報に抑え、ユーザーが気軽に入力できるようにすることが重要です。

その他の参考記事:html 入力フォーム