【HP作成】お問い合わせフォームを作る方法とは？
お問い合わせフォームは、ユーザーとサイト管理者をつなぐ重要なコミュニケーション手段です。
ユーザーが簡単に質問や意見、要望を送信できるようにすることで、サイトの信頼性が向上し、ビジネスチャンスや顧客満足度の向上につながります。
この記事では、WordPressやHTMLを用いてお問い合わせフォームを作成する方法について、初心者にも分かりやすく解説していきます。
WordPressでお問い合わせフォームを作成する方法
WordPressでは、お問い合わせフォームを簡単に作成できるプラグインが多く存在します。
ここでは、代表的なプラグインである「Contact Form 7」を使ったフォームの作成手順を説明します。
(1) Contact Form 7 プラグインをインストールする
1. WordPressの管理画面にログインします。
2. 「プラグイン」メニューから「新規追加」を選択します。
3. 検索バーに「Contact Form 7」と入力し、プラグインを検索します。
4. 見つかったら「今すぐインストール」をクリックし、その後「有効化」をクリックします。(2) 新しいお問い合わせフォームを作成する
1. プラグインのインストールが完了したら、管理画面の左メニューに「お問い合わせ」という項目が追加されます。
2. 「お問い合わせ」→「新規追加」を選択し、新しいフォームを作成します。
3. デフォルトのテンプレートを使用するか、カスタムフォームを作成することも可能です。例えば、以下のようなフィールドを追加できます。
• 名前
• メールアドレス
• 電話番号
• メッセージ
4. 必要な項目を入力し終えたら、フォームのタイトルを設定し、「保存」をクリックします。(3) 作成したフォームをページに挿入する
1. 保存したフォームの上部に「ショートコード」が表示されます（例：[contact-form-7 id=“1234” title=“お問い合わせフォーム”]）。
2. このショートコードをコピーします。
3. お問い合わせページや、設置したい場所の投稿または固定ページにショートコードを貼り付けます。
4. ページを公開または更新すると、そのページにお問い合わせフォームが表示されます。(4) フォームのデザインをカスタマイズする
フォームのデザインやスタイルをカスタマイズしたい場合、CSSを使ってフォームの見た目を変更することができます。
例えば、以下のようなCSSを使用してフォームのボタンをカスタマイズできます。
.wpcf7-submit {
background-color: #4CAF50; /* ボタンの背景色 / color: white; / ボタンの文字色 / padding: 10px 20px; / ボタンの内側の余白 / border: none; / ボーダーを削除 / cursor: pointer; / カーソルをポインタに変更 */
}
これにより、ユーザーの視覚的な体験を向上させることができます。
HTMLでお問い合わせフォームを作成する方法
WordPressを使用していないサイトや、自分でカスタマイズしたフォームを作成したい場合には、HTMLとCSS、そしてPHPを用いてお問い合わせフォームを作成することもできます。
(1) HTMLを使った基本的なフォームの作成
以下のコードを使用して、基本的なHTMLフォームを作成できます。
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>お問い合わせフォーム</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
padding: 0;
background-color: #f4f4f4;
}
form {
max-width: 500px;
margin: auto;
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.form-control {
margin-bottom: 15px;
}
.form-control label {
display: block;
margin-bottom: 5px;
}
.form-control input,
.form-control textarea {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
.form-control textarea {
height: 100px;
resize: none;
}
.form-control button {
background-color: #28a745;
color: white;
border: none;
padding: 10px 15px;
cursor: pointer;
border-radius: 5px;
}
</style>
</head>
<body>
<h2>お問い合わせフォーム</h2>
<form action=”send_mail.php” method=”post”>
<div class=”form-control”>
<label for=”name”>名前</label>
<input type=”text” id=”name” name=”name” required>
</div>
<div class=”form-control”>
<label for=”email”>メールアドレス</label>
<input type=”email” id=”email” name=”email” required>
</div>
<div class=”form-control”>
<label for=”message”>メッセージ</label>
<textarea id=”message” name=”message” required></textarea>
</div>
<div class=”form-control”>
<button type=”submit”>送信する</button>
</div>
</form>
</body>
</html>
このフォームは、名前、メールアドレス、メッセージの入力フィールドを備えたシンプルな構造です。
(2) PHPでメールを送信するスクリプトの作成
フォームから送信されたデータを受け取り、メールで送信するためには、PHPを使用します。
「send_mail.php」という名前で以下のコードを作成し、フォームのaction属性に指定します。
<?php
if ($_SERVER[“REQUEST_METHOD”] == “POST”) {
// フォームから送信されたデータを取得
$name = htmlspecialchars($_POST[‘name’]);
$email = htmlspecialchars($_POST[‘email’]);
$message = htmlspecialchars($_POST[‘message’]);
// メールの宛先と件名を設定
$to = “your-email@example.com”; // 自分のメールアドレスに置き換える
$subject = “お問い合わせフォームからのメッセージ”;
// メールの本文を作成
$body = “名前: $name\nメールアドレス: $email\n\nメッセージ:\n$message”;
// メールのヘッダーを設定
$headers = “From: $email”;
// メールを送信
if (mail($to, $subject, $body, $headers)) {
echo “メッセージが送信されました。ありがとうございます。”;
} else {
echo “メッセージの送信に失敗しました。再度お試しください。”;
}
}
?>
このスクリプトでは、フォームから送信されたデータ（名前、メールアドレス、メッセージ）を取得し、指定されたメールアドレス宛にメールを送信します。
注意点として、サーバー環境によっては、mail() 関数が使用できない場合もあるため、その際は「PHPMailer」などの外部ライブラリを使用することを検討しましょう。
(3) フォームのデザインとバリデーションの設定
HTMLとCSSを使用してフォームのデザインをカスタマイズすることができます。
また、JavaScriptを使って、フォーム送信前に入力内容をバリデーション（チェック）し、必須項目が空欄でないか、メールアドレスが正しい形式かなどを確認することも重要です。
例えば、以下のようなJavaScriptを追加して、簡単なバリデーションを行うことができます。
document.querySelector(“form”).addEventListener(“submit”, function(event) {
var email = document.getElementById(“email”).value;
if (!email.includes(“@”)) {
alert(“正しいメールアドレスを入力してください。”);
event.preventDefault(); // フォームの送信を中止する
}
});
まとめ
お問い合わせフォームは、ユーザーとサイト管理者をつなぐ重要なツールであり、適切なフォームの作成はユーザー体験やビジネスの信頼性を向上させます。
WordPressでは「Contact Form 7」などのプラグインを使用することで、手軽にフォームを作成できる一方、HTMLとPHPを組み合わせることで独自のフォームを作成することも可能です。
目的に応じて最適な方法を選択し、使いやすいお問い合わせフォームを作成して、ユーザーからの問い合わせを効果的に受け付けられるようにしましょう。
✨【3名様限定キャンペーン】無料ブログ記事作成サービス開始！✨
🌟 miraizがお届けする特別キャンペーン🌟
無料でSEOのプロがブログ記事を一本ライティングします✨
SEO対策にも強い、質の高い記事をお届けします‼️
miraizのブログサービスは、
🚀 速い納品、高い品質
SEO対策済みの高品質な記事をスピーディーに納品。
ブログの更新頻度を上げたい方、SEO対策に伴う大量の記事が必要な方、100記事作成するのにもぴったりです❗️
大量発注にも対応し、品質は常にトップクラスを保証。
⏫検索上位表示対策済みの記事制作
ユーザーが何を求めているか徹底分析し、それに応える情報をライティング。
SEOの専門知識を駆使して、あなたの記事がGoogleなどの検索エンジンで
上位に表示されるように作成いたします✨
📸画像制作もサポート
文章だけでなく、ご希望があれば必要な画像も全て作成します。
- 本キャンペーン終了後、ご契約を締結する義務は一切ございません⭕️
- 本キャンペーン終了後の追加営業は一切行わないことをお約束します🙏
- 万が一、本キャンペーン終了後、ご契約されない場合でも、預かりした情報は責任をもって破棄いたしますので安心してお申し込みできます✨
また、他社のサービスにご満足いただけなかった方も、ぜひ一度miraizへご相談ください。
👉申し込みは今すぐ！この機会をお見逃しなく！
