تبلیغات

از درج هرگونه تبلیغات و مطالب هرز معذوریم

فرم تماس با ما وردپرس بدون افزونه

۵
وردپرس
محمد همتی
یکشنبه ۳۱ تیر ۱۳۹۷

هر سایتی که راه اندازی می کنیم باید فرم تماس با ما داشته باشد. افزونه های زیادی برای ایجاد فرم تماس با ما وردپرس وجود دارد که در سایت پردیس متین بعضی از این افزونه ها رو هم معرفی کردیم مثل ایجاد فرم تماس با ما وردپرس با افزونه Contact Form by BestWebSoft که با این افزونه می توانید یک فرم تماس با مای زیبا بسازید. حالا بعضی وقت ها می خواهیم در سایتمون فرم تماس با ما وردپرس بدون افزونه داشته باشیم. در این مقاله میخواهیم نحوه ساخت فرم تماس با ما وردپرس بدون افزونه رو به صورت کامل آموزش دهیم و تمام کدهایی که باید استفاده شود رو برای شما قرار دهیم.

فرم تماس با ما وردپرس بدون افزونه

فرم تماس با ما وردپرس بدون افزونه

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

مرحله یک: ساخت فایل contact-page.php

در مرحله اول یکی فایل php برای صفحه ارتباط با ما بسازید. نام این صفحه می تواند هر چیزی باشد که در اینجا ما نام آن را contact-page.php قرار میدهیم و این فایل رو در داخل فایل های قالب در هاست قرار میدهید. در این فایل باید کدهای زیر قرار بگیرد:


این کد یک قالب جدید برای برگه های وردپرس درست می کند.

مرحله دو: ساخت فایل فرم 

در مرحله بعدی ساخت فرم تماس با ما وردپرس بدون افزونه ، باید فرم خود را طراحی کنید. در اینجا فرمی که برای شما قرار داده ام نمونه ساده ای است که باید داخل فایل contact-page.php و داخل div که مربوط به محتوا هست قرار می دهید. این کد در فایل قبلی جاگذاری می شود.


اگر نمیتوانید فایل رو بسازید در بخش زیر فایل contact-page.php به همراه سورس کد را قرار داده ایم که می توانید دانلود کنید. 

مرحله سه: درج کدهای پردازش فرم

تا این لحظه فرم رو ساختیم اما این فرم به تنهایی کاری نمی کند و باید در این مرحله کدهای لازم برای ارتباط Ajax و کدهای PHP جهت پردازش درخواست را اضافه کنید. بدین صورت که فرم ارسالی کاربر به ایمیلی که در پنل ادمین معرفی شده است ارسال خواهد شد. 

برای این کار کدهای زیر را به فایل functions.php اضافه می کنیم:


تابع اول یعنی wpschool_contact_scripts جهت ثبت اسکریپت در وردپرس و انتقال پارامترهای لازم به اسکریپت تعریف شده است.
تابع دوم یعنی wpschool_ajax_contact برای اعتبارسنجی اطلاعات ارسالی از طریق Ajax و سپس ارسال ایمیل از طریق فرم ارتباط با ما ایجاد شده است.

توجه: بجای wpsho.com نام دامین وب سایت خود را در کد وارد کنید.

مرحله چهار: ساخت فایل اسکریپت

در ادامه آموزش ساخت فرم تماس با ما وردپرس بدون افزونه، باید برای برقراری ارتباط از طریق Ajax با سرور ، فایل اسکریپت ajax-contact-script.js در پوشه قالب خود (twentyseventeen) ایجاد کرده و کدهای زیر را به آن اضافه می کنیم:


اگر نمیتوانید فایل رو بسازید در بخش زیر فایل ajax-contact-script.js به همراه سورس کد را قرار داده ایم که می توانید دانلود کنید. 

مرحله پنج: افزودن استایل های CSS

برای زیباتر جلوه دادن فرم ارتباط با ما استایل های CSS زیر را به فایل style.css اضافه کنید:


مرحله شش: ایجاد برگه ارتباط با ما

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

آدرس URL صفحه رو روی contact-us قرار دهید و در بخش انتخاب قالب برگه، قالب ارتباط با ما رو انتخاب کنید و در نهایت برگه رو ذخیره کنید مانند تصویر زیر:

ایجاد برگه ارتباط با ما

کافیه خروجی رو ببینید به فرمی شبیه تصویر زیر میرسید:

خروجی فرم تماس با ما وردپرس بدون افزونه

توجه: به دلیل استفاده اکثر وب سایت ها از هاست های اشتراکی ایمیل های ارسالی به پوشه اسپم (Spam) وارد می شوند، هنگام تست حتما پوشه اسپم را چک کنید.

نکته مهم: به نظرم به جای ساخت فرم تماس با ما وردپرس بدون افزونه ، از افزونه های فرم ساز استفاده کنید تا تسلط بیشتری به فرم ها داشته باشید.