صفحهی «تماس با ما» یکی از مهمترین بخشهای هر وبسایت است. این صفحه به بازدیدکنندگان امکان میدهد موقعیت شما را روی نقشه ببینند و بدون نیاز به دانستن ایمیل، پیام خود را از طریق فرم ارسال کنند. در این درس یاد گرفتیم چطور یک صفحهی تماس کامل و حرفهای بسازیم.
🎯 اهداف اصلی
- افزودن نقشهی تعاملی گوگل به صفحه
- افزودن فرم تماس با فیلدهای استاندارد (نام، ایمیل، موضوع، پیام)
🗺️ افزودن نقشهی گوگل
- وارد Google Maps شوید و آدرس دفتر خود را جستجو کنید.
- روی گزینهی اشتراکگذاری → Embed Map کلیک کنید.
- کد HTML ارائهشده را کپی کنید.
- در وردپرس، یک بلوک HTML سفارشی اضافه کنید و کد را در آن قرار دهید.
- ذخیره کنید و نتیجه را در سایت مشاهده کنید.
🔹 حالا بازدیدکنندگان میتوانند روی نقشه کلیک کنند، زوم کنند و مسیر خود را دریافت کنند.
📩 افزودن فرم تماس
- افزونهی Contact Form 7 را نصب و فعال کنید.
- فرم پیشفرض افزونه شامل فیلدهای نام، ایمیل، موضوع و پیام است.
- در برگهی «تماس با ما»، یک بلوک فرم تماس 7 اضافه کنید.
- فرم ظاهر میشود و پیامها به ایمیل مدیر سایت ارسال خواهند شد.
⚙️ سفارشیسازی فرم تماس
افزودن فیلد جدید (منوی کشویی علاقهمندیها)
- در بخش ویرایش فرم، بعد از فیلد موضوع، یک فیلد جدید اضافه کنید:
<label>به چه چیزی علاقهمند هستید؟[select interested-in “عکاسی” “تبلیغات” “طراحی گرافیک”]
</label>
- ذخیره کنید و صفحه را رفرش کنید. حالا منوی کشویی جدید نمایش داده میشود.
نمایش دادهها در ایمیل
- در تب Mail افزونه، در بخش متن پیام اضافه کنید:
علاقهمند به: [interested-in]
- ذخیره کنید تا پاسخ انتخابی کاربر در ایمیل دریافتی شما نمایش داده شود.
🧪 تست فرم تماس
- در محیط لوکال میتوانید از ابزار MailHog برای مشاهدهی ایمیلهای تستی استفاده کنید.
- در هاست واقعی، پیامها به ایمیل مدیر سایت ارسال میشوند.
✨ جمعبندی
با این مراحل، صفحهی «تماس با ما» شما شامل:
- یک نقشهی گوگل تعاملی
- یک فرم تماس حرفهای با قابلیت سفارشیسازی
خواهد بود. این صفحه تجربهی کاربری بهتری ایجاد میکند و ارتباط با مخاطبان را سادهتر میسازد.