5 گام ساخت فرم تماس HTML حرفه‌ای بدون وردپرس

چرا این مقاله متفاوت است؟

فرم تماس HTML در بیشتر آموزش‌ها به شکل خیلی ساده و ابتدایی معرفی می‌شود. اما در این مقاله ما یک فرم تماس HTML حرفه‌ای را بررسی می‌کنیم که علاوه بر ظاهر شیک، امنیت، ضداسپم، تجربه کاربری (UX) و تحویل مطمئن ایمیل را هم پوشش می‌دهد.

ویژگی‌های فرم نهایی شما:

RTL-first (کاملاً فارسی و راست‌چین)
ریسپانسیو برای موبایل و تبلت
بدون رفرش صفحه (AJAX)
سازگار با Core Web Vitals و سئو
ضداسپم چندلایه (honeypot + محدودسازی نرخ + امکان reCAPTCHA)
تحویل مطمئن ایمیل با تنظیمات SPF/DKIM/DMARC

اصول کلیدی پیش از شروع ساخت فرم تماس HTML

برچسب واقعی (label) به جای placeholder ← خوانایی و دسترس‌پذیری بهتر.
autocomplete و inputmode ← تجربه تایپ راحت‌تر در موبایل.
اعتبارسنجی دولایه ← مرورگر (HTML/JS) + سرور (PHP).
ضداسپم چندلایه ← honeypot، محدودسازی نرخ، reCAPTCHA.
تحویل مطمئن ایمیل ← SMTP + رکوردهای SPF/DKIM/DMARC.
UX حرفه‌ای ← نمایش «در حال ارسال»، پیام موفقیت یا خطا.
حریم خصوصی ← تیک رضایت و لینک به Privacy Policy.

۱. HTML (فرم تماس HTML با لوگو و سلکت اختصاصی)


<section class="contact-section" dir="rtl" lang="fa">
  <!-- لوگو -->
  <div class="contact-logo">
    <img 
    src="https://rtlhtml.com/wp-content/uploads/2025/09/logonomy-1757538595425.png"
    alt="لوگو سایت" />
  </div>

  <h2 class="contact-title">فرم تماس HTML</h2>
  <p class="contact-subtitle">سوال یا پیشنهادی داری؟ فرم زیر رو پر کن.</p>

  <!-- فرم تماس HTML -->
  <form id="contactForm" class="contact-form" novalidate>
    <!-- Honeypot (برای ربات‌ها) -->
    <div class="hp-field" aria-hidden="true">
      <label for="website">وب‌سایت (پر نکنید)</label>
      <input type="text" id="website" name="website" tabindex="-1" autocomplete="off">
    </div>

    <div class="form-row">
      <label for="name">نام و نام خانوادگی</label>
      <input id="name" name="name" type="text" required autocomplete="name" minlength="2" />
    </div>

    <div class="form-row">
      <label for="email">ایمیل</label>
      <input id="email"
       name="email" 
       type="email" 
       required autocomplete="email" inputmode="email" />
    </div>

    <div class="form-row">
      <label for="phone">شماره تماس (اختیاری)</label>
      <input id="phone" name="phone" type="tel" autocomplete="tel" inputmode="tel" />
    </div>

    <!-- سلکت اختصاصی -->
    <div class="form-row">
      <label for="topic">موضوع</label>
      <div class="custom-select-wrapper">
        <select id="topic" name="topic" required>
          <option value="" selected disabled>انتخاب کنید…</option>
          <option value="support">پشتیبانی قالب</option>
          <option value="custom">سفارشی‌سازی</option>
          <option value="partnership">همکاری</option>
          <option value="other">سایر</option>
        </select>
      </div>
    </div>

    <div class="form-row">
      <label for="message">پیام</label>
      <textarea id="message" name="message" rows="6" required minlength="10"></textarea>
    </div>

    <div class="form-row consent-row">
      <label class="checkbox">
        <input type="checkbox" id="consent" name="consent" required>
        <span>با 
          <a href="/privacy" target="_blank" rel="noopener">سیاست حفظ حریم خصوصی</a> 
          موافقم.
        </span>
      </label>
    </div>

    <button type="submit" id="submitBtn" class="btn-primary" aria-live="polite">
      ارسال پیام
    </button>

    <p id="formStatus" class="form-status" role="status" aria-live="polite"></p>
  </form>
</section>

<img

src="https://rtlhtml.com/wp-content/uploads/2025/09/logonomy-1757538595425.png"

alt="لوگو سایت" />

</div>

<p class="contact-subtitle">سوال یا پیشنهادی داری؟ فرم زیر رو پر کن.</p>

<label for="website">وب‌سایت (پر نکنید)</label>

</div>

<label for="name">نام و نام خانوادگی</label>

</div>

<label for="email">ایمیل</label>

<input id="email"

name="email"

type="email"

required autocomplete="email" inputmode="email" />

</div>

<label for="phone">شماره تماس (اختیاری)</label>

</div>

<label for="topic">موضوع</label>

<option value="" selected disabled>انتخاب کنید…</option>

<option value="support">پشتیبانی قالب</option>

<option value="custom">سفارشی‌سازی</option>

<option value="partnership">همکاری</option>

</select>

</div>

</div>

<span>با

<a href="/privacy" target="_blank" rel="noopener">سیاست حفظ حریم خصوصی</a>

موافقم.

</span>

</label>

</div>

ارسال پیام

</button>

</form>

</section>

۲. CSS (استایل لایت مود + فونت فارسی + سلکت اختصاصی)


/* فونت فارسی Vazirmatn از Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;700&amp;display=swap');

/* استایل های فرم تماس HTML */
:root {
  --bg: #f9f9f9;
  --card: #ffffff;
  --text: #222222;
  --muted: #555555;
  --primary: #8e51ff;
  --primary-hover: #6d38cc;
  --danger: #e53935;
  --ok: #2e7d32;
  --border: #dddddd;
  --shadow: 0 6px 20px rgba(0,0,0,.08);
  --radius: 12px;
  --focus: 0 0 0 3px rgba(142,81,255,.25);
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Vazirmatn', sans-serif;
}

.contact-section {
  max-width: 780px;
  margin: 48px auto;
  padding: 0 16px;
}

.contact-logo {
  text-align: center;
  margin-bottom: 16px;
}

.contact-logo img {
  max-height: 70px;
}

.contact-title {
  font-size: 28px;
  text-align: center;
  margin-bottom: 6px;
}

.contact-subtitle {
  color: var(--muted);
  text-align: center;
  margin-bottom: 24px;
}

.contact-form {
  background: var(--card);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

label {
  font-size: 14px;
}

/* ورودی‌ها */
input, select, textarea {
  background: #fff;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  transition: .2s;
  outline: none; /* حذف اوت‌لاین پیش‌فرض */
}

input:focus, select:focus, textarea:focus {
  border-color: var(--primary);
  box-shadow: var(--focus);
}

/* دکمه */
.btn-primary {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 12px 18px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: .2s;
  width: 100%;
}

.btn-primary:hover {
  background: var(--primary-hover);
}

/* پیام وضعیت */
.form-status.ok { color: var(--ok); }
.form-status.err { color: var(--danger); }

.hp-field { position: absolute; left: -9999px; }

/* سلکت اختصاصی */
.custom-select-wrapper {
  position: relative;
}

.custom-select-wrapper select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 40px;
  cursor: pointer;
  width: 100%;
}

/* آیکون فلش سفارشی */
.custom-select-wrapper::after {
  content: "▾";
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  color: var(--primary);
  pointer-events: none;
  font-size: 14px;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

/* فونت فارسی Vazirmatn از Google Fonts */

@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;700&display=swap');

/* استایل های فرم تماس HTML */

:root {

--bg: #f9f9f9;

--card: #ffffff;

--text: #222222;

--muted: #555555;

--primary: #8e51ff;

--primary-hover: #6d38cc;

--danger: #e53935;

--ok: #2e7d32;

--border: #dddddd;

--shadow: 0 6px 20px rgba(0,0,0,.08);

--radius: 12px;

--focus: 0 0 0 3px rgba(142,81,255,.25);

}

body {

background: var(--bg);

color: var(--text);

font-family: 'Vazirmatn', sans-serif;

}

.contact-section {

max-width: 780px;

margin: 48px auto;

padding: 0 16px;

}

.contact-logo {

text-align: center;

margin-bottom: 16px;

}

.contact-logo img {

max-height: 70px;

}

.contact-title {

font-size: 28px;

text-align: center;

margin-bottom: 6px;

}

.contact-subtitle {

color: var(--muted);

text-align: center;

margin-bottom: 24px;

}

.contact-form {

background: var(--card);

border-radius: var(--radius);

padding: 24px;

box-shadow: var(--shadow);

}

.form-row {

display: flex;

flex-direction: column;

gap: 8px;

margin-bottom: 16px;

}

label {

font-size: 14px;

}

/* ورودی‌ها */

input, select, textarea {

background: #fff;

color: var(--text);

border: 1px solid var(--border);

border-radius: 8px;

padding: 12px 14px;

transition: .2s;

outline: none; /* حذف اوت‌لاین پیش‌فرض */

}

input:focus, select:focus, textarea:focus {

border-color: var(--primary);

box-shadow: var(--focus);

}

/* دکمه */

.btn-primary {

display: inline-flex;

justify-content: center;

align-items: center;

padding: 12px 18px;

background: var(--primary);

color: #fff;

border: none;

border-radius: 8px;

cursor: pointer;

font-weight: 600;

transition: .2s;

width: 100%;

}

.btn-primary:hover {

background: var(--primary-hover);

}

/* پیام وضعیت */

.form-status.ok { color: var(--ok); }

.form-status.err { color: var(--danger); }

.hp-field { position: absolute; left: -9999px; }

/* سلکت اختصاصی */

.custom-select-wrapper {

position: relative;

}

.custom-select-wrapper select {

appearance: none;

-webkit-appearance: none;

-moz-appearance: none;

padding-right: 40px;

cursor: pointer;

width: 100%;

}

/* آیکون فلش سفارشی */

.custom-select-wrapper::after {

content: "▾";

position: absolute;

top: 50%;

right: 14px;

transform: translateY(-50%);

color: var(--primary);

pointer-events: none;

font-size: 14px;

}

۳. JS (ارسال AJAX و تجربه روان)


<script>
(function() {
  const form = document.getElementById('contactForm');
  const statusEl = document.getElementById('formStatus');
  const btn = document.getElementById('submitBtn');

  function setStatus(msg, ok = false) {
    statusEl.textContent = msg;
    statusEl.className = 'form-status ' + (ok ? 'ok' : 'err');
    statusEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
  }

  form.addEventListener('submit', async (e) => {
    e.preventDefault();
    btn.disabled = true;
    btn.textContent = 'در حال ارسال…';

    const fd = new FormData(form);

    try {
      const res = await fetch('/send.php', { method: 'POST', body: fd });
      const data = await res.json();

      if (data?.ok) {
        setStatus('پیام شما با موفقیت ارسال شد ✅', true);
        form.reset();
      } else {
        setStatus(data?.error || 'ارسال ناموفق بود.');
      }
    } catch {
      setStatus('خطای ارتباط با سرور.');
    } finally {
      btn.disabled = false;
      btn.textContent = 'ارسال پیام';
    }
  });
})();
</script>

(function() {

const form = document.getElementById('contactForm');

const statusEl = document.getElementById('formStatus');

const btn = document.getElementById('submitBtn');

function setStatus(msg, ok = false) {

statusEl.textContent = msg;

statusEl.className = 'form-status ' + (ok ? 'ok' : 'err');

statusEl.scrollIntoView({ behavior: 'smooth', block: 'center' });

}

form.addEventListener('submit', async (e) => {

e.preventDefault();

btn.disabled = true;

btn.textContent = 'در حال ارسال…';

const fd = new FormData(form);

try {

const res = await fetch('/send.php', { method: 'POST', body: fd });

const data = await res.json();

if (data?.ok) {

setStatus('پیام شما با موفقیت ارسال شد ✅', true);

form.reset();

} else {

setStatus(data?.error || 'ارسال ناموفق بود.');

}

} catch {

setStatus('خطای ارتباط با سرور.');

} finally {

btn.disabled = false;

btn.textContent = 'ارسال پیام';

}

});

})();

</script>

۴. PHP (send.php)


<?php
header('Content-Type: application/json; charset=utf-8');

if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
  http_response_code(405);
  echo json_encode(['ok' => false, 'error' => 'Method not allowed']);
  exit;
}

session_start();
$now = time();
if (isset($_SESSION['last_send']) && ($now - $_SESSION['last_send']) < 20) {
  echo json_encode(['ok' => false, 'error' => 'ارسال بیش از حد.']);
  exit;
}

$name    = trim($_POST['name'] ?? '');
$email   = trim($_POST['email'] ?? '');
$message = trim($_POST['message'] ?? '');
$hp      = trim($_POST['website'] ?? '');

if ($hp !== '') { echo json_encode(['ok' => true]); exit; }
if (mb_strlen($name) < 2 || !filter_var($email, FILTER_VALIDATE_EMAIL) || mb_strlen($message) < 10) {
  echo json_encode(['ok' => false, 'error' => 'اطلاعات معتبر نیست.']);
  exit;
}

require __DIR__ . '/lib/PHPMailer/src/PHPMailer.php';
require __DIR__ . '/lib/PHPMailer/src/SMTP.php';
require __DIR__ . '/lib/PHPMailer/src/Exception.php';

$mail = new PHPMailer\PHPMailer\PHPMailer(true);

try {
  $mail->isSMTP();
  $mail->Host       = 'smtp.yourdomain.com';      // سرور SMTP
  $mail->SMTPAuth   = true;
  $mail->Username   = 'no-reply@yourdomain.com';  // ایمیل فرستنده
  $mail->Password   = 'YOUR_SMTP_PASSWORD';       // رمز عبور SMTP
  $mail->SMTPSecure = PHPMailer\PHPMailer\PHPMailer::ENCRYPTION_STARTTLS;
  $mail->Port       = 587;

  $mail->CharSet = 'UTF-8';
  $mail->setFrom('no-reply@yourdomain.com', 'Website Contact');
  $mail->addAddress('support@yourdomain.com');    // گیرنده اصلی
  $mail->addReplyTo($email, $name);               // پاسخ مستقیم به کاربر

  $mail->isHTML(true);
  $mail->Subject = 'پیام جدید از فرم تماس';
  $mail->Body    = nl2br(htmlspecialchars($message));

  $mail->send();
  $_SESSION['last_send'] = $now;
  echo json_encode(['ok' => true]);
} catch (Exception $e) {
  echo json_encode(['ok' => false, 'error' => 'ارسال ایمیل ناموفق بود.']);
}

<?php

header('Content-Type: application/json; charset=utf-8');

if ($_SERVER['REQUEST_METHOD'] !== 'POST') {

http_response_code(405);

echo json_encode(['ok' => false, 'error' => 'Method not allowed']);

exit;

}

session_start();

$now = time();

if (isset($_SESSION['last_send']) && ($now - $_SESSION['last_send']) < 20) {

echo json_encode(['ok' => false, 'error' => 'ارسال بیش از حد.']);

exit;

}

$name = trim($_POST['name'] ?? '');

$email = trim($_POST['email'] ?? '');

$message = trim($_POST['message'] ?? '');

$hp = trim($_POST['website'] ?? '');

if ($hp !== '') { echo json_encode(['ok' => true]); exit; }

if (mb_strlen($name) < 2 || !filter_var($email, FILTER_VALIDATE_EMAIL) || mb_strlen($message) < 10) {

echo json_encode(['ok' => false, 'error' => 'اطلاعات معتبر نیست.']);

exit;

}

require __DIR__ . '/lib/PHPMailer/src/PHPMailer.php';

require __DIR__ . '/lib/PHPMailer/src/SMTP.php';

require __DIR__ . '/lib/PHPMailer/src/Exception.php';

$mail = new PHPMailer\PHPMailer\PHPMailer(true);

try {

$mail->isSMTP();

$mail->Host = 'smtp.yourdomain.com'; // سرور SMTP

$mail->SMTPAuth = true;

$mail->Username = 'no-reply@yourdomain.com'; // ایمیل فرستنده

$mail->Password = 'YOUR_SMTP_PASSWORD'; // رمز عبور SMTP

$mail->SMTPSecure = PHPMailer\PHPMailer\PHPMailer::ENCRYPTION_STARTTLS;

$mail->Port = 587;

$mail->CharSet = 'UTF-8';

$mail->setFrom('no-reply@yourdomain.com', 'Website Contact');

$mail->addAddress('support@yourdomain.com'); // گیرنده اصلی

$mail->addReplyTo($email, $name); // پاسخ مستقیم به کاربر

$mail->isHTML(true);

$mail->Subject = 'پیام جدید از فرم تماس';

$mail->Body = nl2br(htmlspecialchars($message));

$mail->send();

$_SESSION['last_send'] = $now;

echo json_encode(['ok' => true]);

} catch (Exception $e) {

echo json_encode(['ok' => false, 'error' => 'ارسال ایمیل ناموفق بود.']);

}

۵. همه‌چیز آماده است: آخرین مراحل پیاده‌ سازی فرم تماس HTML

لوگو ← فایل لوگو را در مسیر images/logo.png آپلود کن و در HTML آدرس src را تغییر بده.
HTML فرم ← کد فرم را در فایل contact.html یا هر صفحه‌ای که می‌خواهی فرم نمایش داده شود قرار بده.
CSS ← استایل را در فایل style.css پروژه‌ات اضافه کن و مطمئن شو در <head> لود می‌شود.
JS ← کد جاوااسکریپت را قبل از بسته شدن تگ </body> اضافه کن.
send.php ← فایل send.php را در ریشه هاستت (/public_html/send.php) قرار بده.
SMTP ← در کد PHP، اطلاعات سرور ایمیل واقعی خودت را وارد کن (Host, Username, Password, addAddress).
DNS رکوردها ← برای جلوگیری از رفتن پیام‌ها به اسپم، باید رکوردهای SPF، DKIM و DMARC رو در DNS دامنه‌تون تنظیم کنید. اگر با این مفاهیم آشنا نیستید، Cloudflare Email Security یکی از بهترین منابع برای شروعه.
تست ← فرم را تست کن: