【コピペで䜿える】お問い合わせフォヌムのテンプレヌトずカスタマむズ方法

formlab線集郚
フォヌム䜜成

お問い合わせフォヌムは顧客ずの重芁なコミュニケヌション手段のため、最埌たで入力しおもらえるようなナヌザヌが䜿いやすいデザむンを心がけなければなりたせん。
本蚘事では、カスタマむズのしやすい基本構造のテンプレヌトからデザむン迷った方に向けおそのたたコピペしお䜿えるテンプレヌトをご玹介したす。

はじめおフォヌムを䜜成する方でもこれを読めば、自分でお問い合わせフォヌムを䜜成できるようになりたす。最埌にHTML䞍芁で䜜成するサヌビスも玹介したすので、ぜひ参考にしおください。

â–Œ フロント゚ンド開発だけでフォヌムが䜿えるformrunの掻甚がおすすめ
formrunでフォヌムを䜜成するず、開発が面倒な回答デヌタの管理やメヌル送信などの豊富なバック゚ンド機胜ずセキュリティ察策の開発が䞍芁になるため時間ずコストを削枛するこずができたす。フォヌムも豊富なテンプレヌトから甚途に応じたものを遞び、テキストを入力するだけで簡単に䜜成するこずができたす。ぜひご掻甚ください。

formrunに぀いお詳しく芋る

お問い合わせフォヌムの基本的な構造

お問い合わせフォヌムは、ナヌザヌからの質問やフィヌドバックを受け取るための重芁な手段です。基本的なお問い合わせフォヌムは、以䞋の芁玠で構成されたす。

  • フォヌムタグフォヌムの開始ず終了を瀺すタグです。<form>タグで囲みたす。
  • 入力フィヌルドナヌザヌが情報を入力するためのフィヌルドです。䟋えば、名前、メヌルアドレス、メッセヌゞなどの入力フィヌルドがありたす。
  • 送信ボタンナヌザヌが入力した情報を送信するためのボタンです。

基本的なテンプレヌトHTML

こちらのHTMLをもずにデザむンや必芁な機胜の蚭定しおいきたしょう。

<form action="/submit_form" method="post">
<label for="name">名前:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">メヌルアドレス:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="message">メッセヌゞ:</label><br>
<textarea id="message" name="message" rows="4" cols="50" required></textarea><br><br>
<input type="submit" value="送信">
</form>

HTML/CSSのカスタマむズ方法

次に、フォヌムのデザむンをカスタマむズしお、より魅力的なものにする方法玹介したす。

基本的なCSSの远加

CSSを䜿甚しお、フォヌムの芋た目を改善したす。以䞋のコヌドを参考にHTMLファむルの<head>タグ内に远加しおください。お奜みのカラヌコヌドやフォントに倉曎するこずで、サむトに合ったデザむンに修正するこずができたす。

各スタむル蚭定の詳现はコメントで説明しおいたす。

<style>
body {
font-family: Arial, sans-serif; /* 党䜓のフォントを蚭定 */
background-color: #f2f2f2; /* 背景色を蚭定 */
padding: 20px; /* ペヌゞ党䜓のパディングを蚭定 */
}
form {
background-color: #fff; /* フォヌムの背景色を蚭定 */
padding: 20px; /* フォヌムの内偎の䜙癜を蚭定 */
border-radius: 5px; /* 角を䞞める */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 圱を远加しお立䜓感を出す */
}
label {
display: block; /* ラベルをブロック衚瀺にするこずで、次の芁玠ず分ける */
margin-top: 10px; /* 䞊に䜙癜を远加 */
}
input[type="text"], input[type="email"], textarea {
width: 100%; /* 入力フィヌルドの幅を100%に蚭定 */
padding: 10px; /* 入力フィヌルドの内偎の䜙癜を蚭定 */
margin: 5px 0; /* 入力フィヌルドの䞊䞋に䜙癜を蚭定 */
border: 1px solid #ccc; /* 入力フィヌルドの枠線を蚭定 */
border-radius: 5px; /* 入力フィヌルドの角を䞞める */
}
input[type="submit"] {
background-color: #4CAF50; /* 送信ボタンの背景色を蚭定 */
color: white; /* 送信ボタンの文字色を蚭定 */
padding: 10px 20px; /* 送信ボタンの内偎の䜙癜を蚭定 */
border: none; /* 送信ボタンの枠線をなしに蚭定 */
border-radius: 5px; /* 送信ボタンの角を䞞める */
cursor: pointer; /* カヌ゜ルをポむンタヌに蚭定 */
}
</style>

おしゃれなお問い合わせフォヌムのテンプレヌト䟋

フィヌムのデザむンは、䌁業の第䞀印象に倧きく圱響したす。そのため、ナヌザヌが快適に入力できるデザむンを意識するこずが倧切です。

ここでは、デザむンにこだわったフォヌムのテンプレヌトを玹介したす。

䟋1シンプルで盎感的なテンプレヌト

  See the Pen   contact form by Tim (@TimQuincey)   on CodePen.

圢状が真四角なフォヌムは無機質な印象を䞎えがちです。
真四角の角を䞞くするこずで優しい雰囲気のお問い合わせフォヌムができあがりたす。

䟋2必須項目が明確化されたテンプレヌト

  See the Pen   お問い合わせFormコピペ by Yuya (@yuyaphotograph)   on CodePen.

入力必須項目のアむコンにあえお緑を䜿った事䟋です。

必須項目は、ほずんどのお問い合わせフォヌムでは赀や黄色ずいった譊告色を䜿っおいたす。譊告色はナヌザヌに焊燥感を䞎えおしたいかねたせん。

色圩心理孊で「癒し」や「安心」ずいった意味合いがある緑をあえお利甚するこずで焊燥感に駆られるこずなく、入力完了たで誘導できたす。

他にもデザむン性の高いフォヌムのテンプレヌトは、以䞋の蚘事でご玹介しおいたす。合わせおご芧ください。
>> 問い合わせフォヌムのデザむン9遞コピペで䜿えるhtmlずCSSを玹介

申し蟌み率を䞊げるバリデヌション機胜の蚭定方法

バリデヌション機胜を远加するこずで、ナヌザヌが正しい情報を入力しやすくなりたす。
顧客管理をしやすくするために蚭定を行うこずをオススメしたす。

バリデヌション機胜には以䞋のような皮類がありたす。

䞻なバリデヌション機胜

  1. 必須フィヌルド入力が必須であるこずを確認したす。
  2. メヌルアドレス圢匏メヌルアドレスの圢匏が正しいかどうかを確認したす。
  3. 文字数制限入力されたテキストの長さを制限したす。

これらのバリデヌション機胜の基本的なJavaScriptの䟋を掲茉したす。

<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>お問い合わせフォヌム</title>
<style>
/* ここにCSSスタむルを远加 */
</style>
<script>
function validateForm() {
let name = document.getElementById("name").value;
let email = document.getElementById("email").value;
let message = document.getElementById("message").value;

// 必須フィヌルドのバリデヌション
if (name === "" || email === "" || message === "") {
alert("すべおのフィヌルドを入力しおください。");
return false;
}

// メヌルアドレス圢匏のバリデヌション
let emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
if (!emailPattern.test(email)) {
alert("正しいメヌルアドレスを入力しおください。");
return false;
}

// メッセヌゞの文字数制限バリデヌション
if (message.length > 500) {
alert("メッセヌゞは500文字以内で入力しおください。");
return false;
}

return true;
}
</script>
</head>
<body>
<form action="/submit_form" method="post" onsubmit="return validateForm()">
<h2>お問い合わせフォヌム</h2>
<label for="name">名前:</label>
<input type="text" id="name" name="name" required>
<label for="email">メヌルアドレス:</label>
<input type="email" id="email" name="email" required>
<label for="message">メッセヌゞ:</label>
<textarea id="message" name="message" rows="4" required></textarea>
<input type="submit" value="送信">
</form>
</body>
</html>

簡単にバリデヌション機胜を蚭定したい堎合、EFOツヌルがおすすめです。
おすすめのEFOツヌルに぀いおは、以䞋の蚘事でご玹介しおいたす。合わせおご芧ください。
>> EFOずは入力フォヌム最適化の重芁性や効果的な斜策、おすすめツヌルを詳しく解説

スマホ察応のレスポンシブデザむンの蚭定方法

珟代では、倚くのナヌザヌがスマヌトフォンからアクセスしたす。モバむル察応のレスポンシブデザむンを蚭定するこずで、お問い合わせフォヌムがスマヌトフォンやタブレットなどの異なるデバむスで適切に衚瀺されるようにしたす。

メディアク゚リによるレスポンシブ蚭定

メディアク゚リを䜿甚しお、特定のデバむスサむズに応じたスタむルを蚭定したす。
以䞋の䟋では、幅600px以䞋のデバむスに察するスタむルを定矩しおいたす。

メディアク゚リによるレスポンシブデザむンのCSSは、HTMLファむルの<head>タグ内にある<style>タグの䞭に远加したす。

<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>お問い合わせフォヌム</title>
    <style>
          /* ここにCSSスタむルを远加 */
       }
        /* メディアク゚リでスマホ察応のスタむルを蚭定 */
        @media (max-width: 600px) {
            form {
                padding: 15px;
                width: 90%;
            }
            input[type="text"], input[type="email"], textarea {
                padding: 8px;
            }
            input[type="submit"] {
                padding: 10px;
            }
        }
    </style>
    <script>
             /* ここにバリデヌション蚭定を远加 */
    </script>
</head>
<body>
    <form action="/submit_form" method="post" onsubmit="return validateForm()">
        <h2>お問い合わせフォヌム</h2>
        <label for="name">名前:</label>
        <input type="text" id="name" name="name" required>
        <label for="email">メヌルアドレス:</label>
        <input type="email" id="email" name="email" required>
        <label for="message">メッセヌゞ:</label>
        <textarea id="message" name="message" rows="4" required></textarea>
        <input type="submit" value="送信">
    </form>
</body>
</html>

HTMLをアップロヌドする際の泚意点

初めおHTMLをアップロヌドする方のために、泚意点を玹介したす。
初心者の方でもこれらのポむントを抌さえるこずで、安党か぀効率的にりェブサむトを運営するこずができたす。

1. ファむル名ず拡匵子

ファむル名は半角英数字ずハむフン-やアンダヌスコア_のみを䜿甚し、スペヌスや特殊文字は避けたしょう。ファむルの拡匵子が.htmlであるこずを確認しおください。

2. 文字゚ンコヌディング

HTMLファむルの文字゚ンコヌディングはUTF-8を䜿甚するこずが掚奚されたす。これにより、倚くの文字セットが正しく衚瀺されたす。

HTMLファむルの<head>セクションに以䞋のメタタグを含めおください。

<meta charset="UTF-8">

3. サヌバヌぞの接続情報

サヌバヌぞの接続には、必ずセキュアなFTPSFTPやFTPSを䜿甚しおください。これにより、デヌタの転送が暗号化され、セキュリティが向䞊したす。ホスティングサヌビスから提䟛されたFTPアカりント情報ホスト名、ナヌザヌ名、パスワヌド、ポヌト番号を䜿甚しお接続したす。

4. ディレクトリの堎所

HTMLファむルはサヌバヌの公開ディレクトリ䟋: public_html、wwwにアップロヌドしおください。これにより、りェブブラりザからアクセス可胜になりたす。

ディレクトリの階局構造を把握し、必芁なファむルを正しい堎所に配眮するこずが重芁です。

5. ファむルの暩限蚭定

アップロヌドしたファむルの暩限を確認し、適切に蚭定したす。䞀般的には、HTMLファむルの暩限は644所有者が読み曞き、その他は読み取りのみに蚭定したす。FTPクラむアントを䜿甚しおファむルの暩限を蚭定できたす。

6. バックアップの䜜成

HTMLファむルやその他の関連ファむルを線集する前に、必ずバックアップを取っおおきたしょう。これにより、䞇が䞀のトラブル時にも元の状態に戻すこずができたす。

ホスティングサヌビスが提䟛するバックアップ機胜を利甚するこずも有効です。

7. SSL/TLSの蚭定

りェブサむトがHTTPSで提䟛されおいるこずを確認しおください。SSL/TLS蚌明曞をむンストヌルし、りェブサむトの通信を暗号化するこずで、デヌタの安党性を確保できたす。

ホスティングサヌビスが無料のSSL蚌明曞を提䟛しおいる堎合、それを利甚するのも良いでしょう。

8. テストずデバッグ

本番環境にアップロヌドする前に、ロヌカル環境やテスト環境でファむルの動䜜を確認しおください。これにより、䞍具合を事前に発芋し、修正するこずができたす。

たた、りェブブラりザのデベロッパヌツヌルを䜿甚しお、HTML、CSS、JavaScriptの゚ラヌや譊告をチェックしたしょう。

9. 䞀貫性のある呜名芏則

ファむル名、フォルダ名、クラス名、ID名などは、䞀貫した呜名芏則に埓うようにしたしょう。これにより、コヌドの可読性ず保守性が向䞊したす。

10. ドキュメントの敎合性

HTML文曞の敎合性を確認するために、W3Cのバリデヌションツヌルを䜿甚しお、文法゚ラヌや譊告をチェックしたしょう。これにより、クロスブラりザ互換性が向䞊し、りェブペヌゞの衚瀺や動䜜が安定したす。

以䞊の泚意点を守るこずで、HTMLファむルのアップロヌドがスムヌズに行え、セキュリティやパフォヌマンスも向䞊したす。

â–Œ ずにかく早く簡単にフォヌムを䜜成したいならformrunがおすすめ
formrunは、専門的な知識なしにビゞュアル豊かなフォヌムを䜜成できるツヌルです。豊富なテンプレヌトから甚途に応じたものを遞び、テキストを入力するだけで簡単にフォヌムを線集・蚭眮できたす。無料でも利甚できるのでたずは詊しにフォヌムを䜜成しおみおください。

formrunに぀いお詳しく芋る

【䞊玚線】お問い合わせフォヌムの最適化

曎に高品質なフォヌム䜜成を行いたい堎合、䞋蚘の蚭定も進めたしょう。

ナヌザビリティの向䞊

ナヌザビリティを向䞊させるためには、フォヌムの䜿いやすさを重芖するこずが重芁です。

以䞋のポむントに泚意したしょう。

  • 自動補完機胜自動補完機胜を利甚するこずで、ナヌザヌが入力を簡単に行えるようにしたす。
  • 芖芚的なフィヌドバック入力内容に゚ラヌがある堎合、芖芚的にフィヌドバックを提䟛するこずで、ナヌザヌが修正しやすくなりたす。

セキュリティの匷化

セキュリティは、お問い合わせフォヌムの重芁な芁玠です。

以䞋の方法でセキュリティを匷化したしょう。

  • CAPTCHAの導入自動スパムボットからの攻撃を防ぐために、CAPTCHAを远加したす。
  • 入力デヌタのサニタむズサヌバヌ偎で入力デヌタを適切にサニタむズし、SQLむンゞェクションやクロスサむトスクリプティングXSSなどの攻撃を防ぎたす。

サポヌト䜓制の改善

お問い合わせに迅速に察応するこずは、顧客満足床を高めるために重芁です。以䞋の方法でサポヌト䜓制を改善したしょう。

  • 自動返信機胜お問い合わせを受け取ったこずを自動で返信する機胜を远加したす。
  • FAQの敎備よくある質問に察する回答を事前に甚意しおおくこずで、お問い合わせの件数を枛らすこずができたす。
  • チケットシステムの導入お問い合わせをトラッキングし、察応状況を管理するためのチケットシステムを導入したす。

お問い合わせフォヌムの最適化はformrunがおすすめ

『formrunフォヌムラン』は、䜿いやすいフォヌムを䜜成できるだけでなく、お問い合わせ管理たで䞀貫しお行えるのが特城です。蚭眮したフォヌムからお問い合わせがきたら、お問い合わせの進捗をカンバン方匏で管理したす。案件ごずに担圓者の蚭定も可胜です。

reCAPTCHA機胜やSSL/TLSによるデヌタ暗号化、サヌバヌは24時間䜓制で管理するなどセキュリティ䜓制も充実しおいたす。倧切な顧客デヌタを安心しお扱えたす。

たた、面倒な自動補完機胜や自動返信メヌルの蚭定もクリックだけで簡単に完了したす。

無料のプランを甚意しおいるので、ぜひ1床フォヌムを䜜っおみおください。

formrunに぀いお詳しく芋る

たずめ

デザむン性の高いお問い合わせフォヌムは、顧客満足床の向䞊に繋がりたす。基本構造のテンプレヌトから始めお、CSSでのカスタマむズ、バリデヌション機胜の远加、レスポンシブデザむンの蚭定を行うこずで、䜿いやすく魅力的なフォヌムを䜜成するこずができたす。

たた、HTMLやCSSの知識がなくおも、formrunのようなツヌルを䜿えば、簡単に高機胜なフォヌムを䜜成し、管理するこずができたす。無料プランも提䟛されおいるので、ぜひ䞀床詊しおみおください。

formrunに぀いお詳しく芋る