آموزش ساخت فرم تماس با ما در المنتور [طراحی فرم حرفه‌ ای]

آموزش ساخت فرم تماس حرفه ای در المنتور

حالا به سراغ ساخت فرم می رویم. در این آموزش یک فرم استاندارد طراحی می کنیم که شامل نام و نام خانوادگی، ایمیل، شماره تماس، موضوع و متن پیام است. اگر درباره تفاوت نسخه رایگان و حرفه ای المنتور مطمئن نیستید، پیشنهاد می کنیم راهنمای المنتور پرو یا رایگان؟ را نیز بررسی کنید.

مرحله اول: ایجاد یا ویرایش صفحه تماس با ما

ابتدا از پیشخوان وردپرس وارد برگه ای شوید که می خواهید فرم تماس در آن قرار بگیرد. اگر هنوز صفحه ای برای تماس با ما ندارید، یک برگه جدید ایجاد کنید و آن را با المنتور ویرایش کنید. در صفحه می توانید ابتدا ساختار کلی را ایجاد کنید؛ برای مثال یک بخش دو ستونه که در یک طرف اطلاعات تماس و در طرف دیگر فرم قرار داشته باشد. برای ایجاد ساختارهای مدرن در المنتور، استفاده از Container نیز بسیار کاربردی است. اگر با این ساختار آشنا نیستید، آموزش کار با کانتینر در المنتور را ببینید.

مرحله دوم: اضافه کردن ویجت Form

پس از ورود به ویرایشگر المنتور، در پنل سمت راست یا چپ صفحه، عبارت Form را جستجو کنید. ویجت Form را با روش کشیدن و رها کردن روی صفحه قرار دهید. پس از قرار دادن این ویجت، المنتور یک فرم اولیه در اختیار شما قرار می دهد که می توانید فیلدهای آن را مطابق نیاز خود تغییر دهید. در حالت استاندارد، می توان فرم را با فیلدهای نام، ایمیل و پیام شروع کرد و سپس موارد موردنیاز را به آن اضافه کرد.

مرحله سوم: تنظیم نام فرم

قبل از اینکه سراغ طراحی ظاهری بروید، بهتر است یک نام مشخص برای فرم تعیین کنید. نام فرم به شما کمک می کند اگر بعدها چند فرم مختلف در سایت داشتید، آنها را راحت تر از یکدیگر تشخیص دهید. برای مثال می توانید نام فرم را Contact Form یا «فرم تماس با ما» قرار دهید.

مرحله چهارم: ایجاد فیلد نام و نام خانوادگی

برای ارتباط با کاربر، داشتن نام یکی از ساده ترین و کاربردی ترین فیلدهاست. روی فیلد نام کلیک کنید و تنظیمات آن را باز کنید. در تنظیمات فیلد، گزینه های مختلفی مانند نوع فیلد، Label، Placeholder، Required و Column Width در اختیار شما قرار می گیرد. برای یک فرم فارسی می توانید تنظیمات را به شکل زیر در نظر بگیرید:

در فرم های حرفه ای بهتر است Labelها را حذف نکنید، حتی اگر از Placeholder برای راهنمایی کاربر استفاده می کنید. Label علاوه بر کمک به فهم ساختار فرم، در اطلاعات ارسالی فرم نیز اهمیت دارد.

مرحله پنجم: اضافه کردن فیلد ایمیل

برای دریافت ایمیل، یک فیلد جدید به فرم اضافه کنید و نوع آن را روی Email قرار دهید. استفاده از نوع Email بهتر از استفاده از یک فیلد متنی معمولی است، زیرا فرم می تواند ورودی را از نظر ساختار ایمیل بررسی کند. پیشنهاد می شود این فیلد را در صورت نیاز اجباری کنید و Placeholder مناسبی مانند «ایمیل خود را وارد کنید» برای آن قرار دهید. برای مثال:

مرحله ششم: اضافه کردن شماره تماس

اگر هدف فرم دریافت درخواست مشاوره یا پیگیری تلفنی است، بهتر است فیلد شماره تماس نیز به فرم اضافه شود. برای این کار یک فیلد جدید بسازید و نوع آن را Tel انتخاب کنید. عنوان آن می تواند «شماره تماس» باشد. اجباری کردن شماره تلفن به نوع فرم و هدف شما بستگی دارد. اگر بدون شماره تلفن نیز امکان پاسخگویی به درخواست کاربر وجود دارد، بهتر است کاربر را مجبور به وارد کردن اطلاعاتی نکنید که واقعاً برای پاسخگویی ضروری نیست.

مرحله هفتم: اضافه کردن موضوع پیام

در فرم های تماس حرفه ای، دریافت موضوع می تواند به تیم پشتیبانی کمک کند تا قبل از مطالعه کامل پیام، متوجه شود درخواست کاربر مربوط به چه موضوعی است. اگر تعداد موضوعات محدود است، می توانید به جای Text از یک فیلد Select استفاده کنید. برای نمونه:

• مشاوره
• پشتیبانی
• خرید
• همکاری
• پیشنهاد و انتقاد
• سایر موارد

مرحله هشتم: اضافه کردن فیلد متن پیام

برای اینکه کاربر بتواند درخواست خود را توضیح دهد، یک فیلد Textarea به فرم اضافه کنید. برای Placeholder می توانید از عبارتی مانند «پیام یا درخواست خود را بنویسید» استفاده کنید. اگر پیام بخش اصلی درخواست کاربر است، بهتر است این فیلد را اجباری کنید تا فرم بدون توضیح قابل استفاده ارسال نشود.

مرحله نهم: تنظیم عرض فیلدها

همه فیلدها الزاماً نباید در یک عرض و یک ردیف قرار بگیرند. در فرم های دسکتاپ می توان فیلدهای کوتاه تر مانند نام و ایمیل را کنار هم قرار داد و برای پیام، عرض کامل در نظر گرفت. برای مثال:

البته این مقادیر قطعی نیستند و باید با توجه به اندازه صفحه، نوع فرم و طراحی سایت تنظیم شوند.

مرحله دهم: طراحی دکمه ارسال فرم

دکمه ارسال یکی از مهم ترین عناصر فرم است. متن آن باید دقیقاً مشخص کند که پس از کلیک چه اتفاقی می افتد. به جای متن های مبهم، می توانید از عبارت هایی مانند:

• ارسال پیام
• ارسال درخواست
• ثبت درخواست مشاوره
• ارسال فرم تماس

استفاده کنید. برای طراحی دکمه نیز می توانید رنگ، اندازه، فاصله داخلی، تایپوگرافی و حالت Hover را تنظیم کنید. اگر می خواهید کنترل بیشتری روی عناصر تعاملی سایت داشته باشید، آموزش ویجت دکمه در المنتور را نیز مطالعه کنید.

مرحله یازدهم: تنظیم فیلدهای اجباری

یکی از اشتباهات رایج در طراحی فرم این است که همه فیلدها اجباری شوند. اجباری بودن فیلد باید بر اساس نیاز واقعی کسب وکار تعیین شود. برای یک فرم تماس معمولی، معمولاً اطلاعاتی مانند نام، ایمیل و متن پیام اهمیت بیشتری دارند؛ اما اگر قرار است تیم شما حتماً با مشتری تماس تلفنی داشته باشد، شماره تماس نیز می تواند ضروری باشد. هرچه اطلاعات بیشتری را بدون ضرورت از کاربر بخواهید، احتمال رها کردن فرم نیز می تواند افزایش پیدا کند.

آموزش تصویری ساخت فرم تماس حرفه ای در المنتور

تنظیم ایمیل فرم تماس در المنتور

ساخت ظاهری فرم تنها نیمی از کار است. فرم باید طوری تنظیم شود که اطلاعات ارسال شده به مقصد مشخصی برسد. در ویجت Form، بخش Actions After Submit برای تعیین اقداماتی استفاده می شود که پس از ارسال فرم انجام خواهند شد. از جمله این اقدامات می توان به ارسال ایمیل، ذخیره اطلاعات، ارسال ایمیل تأیید برای کاربر و انتقال به صفحه دیگر اشاره کرد. برای یک فرم تماس ساده، معمولاً باید بخش Email را تنظیم کنید.

تنظیم آدرس دریافت کننده

در قسمت مربوط به ایمیل، آدرس مقصد را وارد کنید؛ یعنی ایمیلی که می خواهید پیام های کاربران را دریافت کند. برای سایت المنتور ایران، بر اساس اطلاعات ارائه شده، آدرس ارتباطی مجموعه info@elementor-iran.ir است.

تنظیم موضوع ایمیل

موضوع ایمیل بهتر است به شکلی باشد که تشخیص پیام های فرم تماس از سایر ایمیل ها آسان شود. برای مثال می توانید موضوع را به صورت زیر تنظیم کنید:

درخواست جدید از فرم تماس سایت

اگر فرم دارای فیلد موضوع باشد، می توان اطلاعات آن را نیز در ساختار ایمیل استفاده کرد.

تنظیم محتوای ایمیل

محتوای ایمیل باید اطلاعات اصلی فرم را در اختیار شما قرار دهد. بنابراین بهتر است مشخص باشد که هر مقدار مربوط به کدام فیلد است. ساختار پیشنهادی:

• نام و نام خانوادگی: اطلاعات کاربر
• ایمیل: آدرس ایمیل کاربر
• شماره تماس: شماره واردشده
• موضوع: موضوع انتخاب شده
• پیام: متن درخواست

در تنظیمات Form می توانید از شناسه فیلدها برای انتقال مقادیر آنها به ایمیل استفاده کنید. دقت به شناسه هر فیلد مهم است؛ زیرا اگر شناسه ها به درستی استفاده نشوند، ممکن است اطلاعات موردنظر در ایمیل نمایش داده نشود.

طراحی فرم تماس برای موبایل

فرم تماس باید در موبایل نیز به درستی قابل استفاده باشد. قرار دادن تعداد زیادی فیلد کنار یکدیگر در دسکتاپ ممکن است قابل قبول باشد، اما همان ساختار روی صفحه کوچک موبایل خوانایی مناسبی نخواهد داشت. در حالت موبایل بهتر است:

• فیلدهای کنار هم را در صورت نیاز به یک ستون تبدیل کنید.
• اندازه فونت Labelها را خوانا نگه دارید.
• دکمه ارسال عرض مناسبی داشته باشد.
• فاصله بین فیلدها کافی باشد.
• متن Placeholder بیش از حد طولانی نباشد.
• کاربر برای لمس دکمه ها و فیلدها فضای کافی داشته باشد.

برای کنترل دقیق تر فاصله عناصر در المنتور می توانید از راهنمای آموزش مارجین و پدینگ در المنتور استفاده کنید.

فرم تماس المنتور بهتر است چه فیلدهایی داشته باشد؟

پاسخ این سؤال به هدف صفحه بستگی دارد. برای یک فرم تماس عمومی، ساختار زیر معمولاً نقطه شروع مناسبی است:

اگر فرم برای دریافت سفارش، مشاوره تخصصی یا درخواست همکاری ساخته می شود، ممکن است فیلدهای بیشتری لازم باشد. با این حال بهتر است هر فیلد بر اساس یک نیاز واقعی اضافه شود.

آیا می توان فرم تماس المنتور را سفارشی سازی کرد؟

بله. پس از ساخت ساختار اولیه فرم، می توانید ظاهر آن را از بخش Style المنتور شخصی سازی کنید. تغییر رنگ فیلدها، تایپوگرافی، فاصله ها، حاشیه ها، Radius، دکمه و پیام های مختلف از جمله مواردی هستند که می توان متناسب با طراحی سایت تنظیم کرد. اگر به سفارشی سازی بیشتر نیاز دارید، می توانید از قابلیت های CSS المنتور نیز استفاده کنید. برای آشنایی بیشتر با این بخش، آموزش افزودن CSS سفارشی به المنتور را ببینید.

همچنین اگر می خواهید ظاهر فرم با سایر بخش های سایت هماهنگ باشد، بهتر است فونت، رنگ اصلی، فاصله ها و سبک دکمه ها را با سیستم طراحی کلی سایت یکسان نگه دارید. برای مدیریت فونت های سفارشی نیز می توانید آموزش افزودن فونت به المنتور را بررسی کنید.

سؤالات متداول درباره ساخت فرم تماس در المنتور

جمع بندی

ساخت فرم تماس با ما در المنتور فقط به اضافه کردن چند فیلد و یک دکمه ارسال محدود نمی شود. یک فرم استاندارد باید از ابتدا با هدف مشخص طراحی شود؛ یعنی بدانید چه اطلاعاتی از کاربر نیاز دارید، این اطلاعات به کجا ارسال می شوند، بعد از ارسال چه اتفاقی برای کاربر رخ می دهد و چگونه باید از فرم در برابر ارسال های ناخواسته محافظت کرد. برای یک فرم عمومی، می توانید با فیلدهای نام، ایمیل و پیام شروع کنید و در صورت نیاز شماره تماس و موضوع را نیز اضافه کنید. سپس در بخش Actions After Submit، ارسال ایمیل، پاسخ خودکار یا Redirect را تنظیم کنید و در پایان حتماً فرم را در دسکتاپ و موبایل آزمایش کنید.

اگر هدف شما ساخت یک سایت حرفه ای با المنتور است، فرم تماس تنها یکی از اجزای این مسیر است. امکاناتی مانند ساخت جدول در المنتور، ویجت تصویر، ساخت لایت باکس و افزودن فهرست مطالب در المنتور نیز می توانند در تکمیل صفحات سایت کاربرد داشته باشند. اگر هنوز المنتور را تهیه نکرده اید، می توانید از صفحه خرید المنتور پرو حرفه ای شروع کنید و در ادامه از آموزش های تخصصی المنتور ایران برای توسعه و بهینه سازی سایت خود استفاده کنید.