ساخت فرم تماس حرفه ای با Contact Form 7 + استایل جذاب

جمعه ۱۷ مهر ۱۳۹۴

ساخت فرم تماس حرفه ای با Contact Form 7 + استایل جذابReviewed by جواد نبوی on Oct 9Rating: 5.0

سلام دوستان عزیز؛ امیدوارم حالتون خوب باشه. اگر یک سایت وردپرسی دارید و نیاز دارید که فرم تماس با ما برای سایتتون بسازید, حتما با افزونه ها و آموزش های مختلفی برخوردید و شاید ازشون استفاده کرده باشید و یا نکرده باشید. اما اگه خیلی با css آشنا نباشید, چیزی که به احتمال زیاد خیلی شما رو اذیت کرده, طرح و استایل فرم هاست. اکثر افزونه های موجود فرم ساز وردپرس دارای استایل شکیل و زیبایی نیستند و این امر باعث بدشکل شدن صفحه ی تماس با ما میشه. اما اگر css بلد نبودیم راهکار چیه؟ چطور میتونیم یک فرم تماس زیبا داشته باشیم؟ امروز در سایت وب تستر برای شما دوستان عزیز وردپرسی افزونه ای رو آماده کردم که اگه این افزونه رو به همراه استایل آماده ای که بهتون میدم نصب کنید, یک فرم تماس با ما ی بسیار زیبا خواهید داشت. با ما همراه باشید.

ساخت فرم تماس حرفه ای با Contact Form 7

خب دوستان آماده اید؟ پس اول از همه از لینک زیر افزونه Contact Form 7 رو دانلود و روی سایتتون نصبش کنید.

این افزونه کاملا فارسی هست و به راحتی میتونید فرم هاتون رو توش ایجاد کنید. اما برای محکم کاری آموزش کار با افزونه رو اینجا میزارم.

آموزش ساخت فرم تماس با Contact Form 7

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

ساخت فرم تماس با Contact Form 7

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

ساخت فرم تماس با Contact Form 7

در این صفحه, در فیلد بزرگ زیر عبارت “اضافه کردن فرم تماس جدید”, باید نام فرمتون رو بنویسید. مثلا بنویسید “تماس با ما”.

در بخش پایینتر, ۴ تب وجود داره. در تب اول یعنی تب “فرم” شما باید فرم تماس با ما رو ایجاد کنید. یعنی مثلا فیلد ها رو بسازید و ترتیبشون رو تعیین کنید و … . در تب دوم یعنی تب ایمیل, باید قالب ایمیلی که به شما فرستاده میشه رو بسازید. البته از کلمه ی قالب نترسید. منظور, ایجاد یک فرمت ساده برای انتقال پیام کاربر به ایمیل شما هست. چون وقتی یک کاربر, از طریق فرم تماس با مای شما اقدام به ارسال پیام میکنه, این پیام به ایمیل شما فرستاده میشه. همچنین در این تب, قالب ایمیل خودکاری که به کاربر بعد از ثبت پیام فرستاده میشه رو میتونید تعیین کنید.

در تب سوم (پیام) میتونید عبارت پیام هایی که فرم به کاربر نمایش میده رو تعیین کنید. و در نهایت در تب چهارم یه سری تنظیمات اضافی هست که به درد شما نمیخوره.

حالا یک یکی تب ها رو بررسی میکنیم:

ایجاد فرم:

در تب اول, کادر بزرگی وجود داره که یه سری کد توش هست. این کد ها درواقع سازنده ی فرم نهایی شما هستن. این کادر از زبان html پشتیبانی میکنه و همونطور که میبینید خود افزونه به طور پیشفرض یک سری تگ html مثل تگ <p> و … استفاده کرده. شما هم برای ایجاد فرم میتونید از این تگها استفاده کنید. این کادر به صورت پیشفرض یک فرم عادی تماس با ما داره که شامل فیلد های نام, ایمیل, موضوع و کادر متن میشه. اما اگه میخواید فیلد های دیگه ای به فرمتون اضافه کنید کافیه کد زیر رو کپی کنید و در محل دلخواه از کادر قرار بدید و به ویرایش اون بپردازید.

Html
<p>متن<br />
    فیلد </p>

وقتی کد بالا رو وارد کادر کردید کافیه به جای عبارت “متن”, یک عبارت دلخواه مثلا “آدرس سایت” وارد کنید. این عبارت قبل از فیلد قرار میگیره و تعیین میکنه که درون فیلد باید از چه چیزی پر بشه. و در مرحله ی بعد, عبارت فیلد رو حذف کنید و درحالی که نشانگر تایپ موس در اونجا قرار داره, با توجه به نوع فیلدی که نیاز دارید روی یکی از دکمه های بالای صفحه مثلا “آدرس اینترنتی” کلیک کنید. با کلیک روی دکمه ی مورد نظرتون, یک کادر باز میشه که میتونید تنظیمات اون فیلد رو توش انجام بدید. رایجترین گزینه های این کادر اینا هستن:

  • نوع زمینه: با تیکدار کردن این گزینه به عنوان زمینه الزامی, فیلد مورد نظر شما طوری تنظیم میشه که حتما باید توسط کاربر پر بشه و اگه پر نشه فرم به کاربر پیغام خطا نشون میده.
  • نام: نام دلخواهتون رو برای این فیلد میتونید انتخاب کنید.
  • مقدار پیشفرض: مقداری که از قبل درون فیلد وجود داره رو میتونید تعیین کنید. اگر گزینه “این متن به عنوان نگه دارنده در زمینه استفاده می شود” رو فعال کنید, مقدار پیشفرض به حالت کمرنگ در فیلد نمایش داده میشه و با کلیک روی فیلد از بین میره. اما در غیر اینصورت مقدار پیشفرض به صورت یک متن عادی قابل ویرایش درون فیلد قرار میگیره.
  • ویژگی شناسه (id): با انتخاب یک آی دی در این قسمت میتونید از ویژگی های آی دی ها در html و css استفاده کنید. (یک مقدار پیشرفته تره)
  • ویژگی کلاس: با انتخاب یک کلاس برای فیلد, میتونید به این فیلد تو css استایل اختصاصی بدید.
  • و …

موارد بالا پرکاربردترین تنظیمات مربوط به فیلد ها بودند. البته تنظیمات دیگه ای هم برای فیلد های خاص تر (مثلا فیلد فهرستها و …) وجود داره که چون فارسی هست فکر نمی کنم مشکلی باهاشون داشته باشید.

بعد از انجام تنظیمات, روی دکمه ی “گذاشتن برچسب” کلیک کنید. خب حالا این فیلد به فرمتون اضافه شد. به دو عکس زیر توجه کنید:

ساخت فرم تماس با Contact Form 7

ساخت فرم تماس با Contact Form 7

 

بعد از انجام تمامی تغییرات, روی دکمه ی ذخیره در پایین صفحه کلیک کنید.

تب ایمیل

در این تب تمامی تنظیمات مربوط به ایمیل ارسالی به شما و کاربر انجام میشه. این بخش شامل دو قسمت هست. قسمت اول که با عنوان “ایمیل” مشخص شده, مربوط به ایمیل ارسالی از طرف کاربر به شما هست. و قسمت دوم که با عنوان “ایمیل۲” مشخص شده, فقط در صورت نیاز میتونید اون رو فعال کنید تا ایمیلی به صورت خودکار به منظور تایید دریافت پیام به کاربر ارسال بشه.

در قسمت اول یعنی قسمت “ایمیل” تنظیماتی رو باید انجام بدید تا ایمیلی که به عنوان پیام کاربر به شما ارسال میشه با اون تنظیمات به شما ارسال بشه. عکس زیر تک تک قسمت ها رو توضیح میده:

ساخت فرم تماس وردپرس

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

خب بعد از انجام تمامی تنظیمات و تغییرات این فرم, روی دکمه ذخیره کلیک کنید. حالا برای قرار دادن این فرم در یک صفحه, کافیه از تولبار سمت راست وردپرس, روی گزینه فرم تماس ۷ کلیک کنید. سپس در صفحه باز شده, جلوی نام فرم مورد نظرتون یک کد کوتاه وجود داره که اونرو باید کپی کنید. حالا به قسمت برگه های وردپرس برید و یک برگه جدید با عنوان “تماس با ما” ایجاد کنید و کد کپی شده رو توش وارد کنید و برگه رو ذخیره کنید. این برگه میشه صفحه ی تماس با ما ی شما.

استایل سفارشی فرم تماس با ما

برای ساخت فرم تماس حرفه ای باید استایل حرفه ای هم داشته باشید. اگه استایل پیشفرض این فرم زیاد شما رو راضی نمیکنه میتونید از استایل دیگه ای که ما براتون آماده کردیم استفاده کنید. برای استفاده از این استایل (که استایل اختصاصی فرم تماس قالب قبلی وب تستر هم هست!) کافیه به روش زیر عمل کنید:

۱- ابتدا از تولبار سمت راست روی گزینه “فرم تماس ۷” کلیک کنید. درصفحه باز شده, موس رو روی فرم مورد نظرتون بیارید و روی گزینه ویرایش کلیک کنید.

۲- در صفحه جدید و در کادر بزرگ موجود در تب فرم, ابتدای همه ی کد ها, کد زیر رو اضافه کنید:

Html
<div class="formstyle">

و در انتهای همه ی کد ها هم کد زیر رو وارد کنید:

Html
</div>

۳- روی دکمه ی “ذخیره” کلیک کنید.

۴- از تولبار سمت راست وردپرس در قسمت “نمایش” روی گزینه ویرایشگر کلیک کنید.

۵- در صفحه باز شده کد زیر رو به انتهای فایل style.css قالبتون اضافه کنید:

CSS
.formstyle input{
background: #F8F8F8;
padding: 4px 8px;
border: 1px solid #D8D8D8;
width:50%;
transition:all 0.35s;
-webkit-transition:all 0.35s;
-ms-transition:all 0.35s;
-o-transition:all 0.35s;
-moz-transition:all 0.35s;
}
.formstyle input:focus{
background: #fff;
border: 1px solid #AACFDA;
}
.formstyle input[type="submit"] {
    background: #4DB6F0;
    padding: 4px 8px;
border-right: 8px solid #29A4E9;
border-top:none;
border-bottom:none;
border-left:none;
transition:all 0.35s;
-webkit-transition:all 0.35s;
-ms-transition:all 0.35s;
-o-transition:all 0.35s;
-moz-transition:all 0.35s;
    max-width: 35%;
min-width: 15%;
width: auto;
    border-radius: 5px;
}
.formstyle input[type="submit"]:hover {
background: #6FC2F0;
border-right: 8px solid #59B2E6;
}
.formstyle textarea{
background: #F8F8F8;
padding: 4px 8px;
border: 1px solid #D8D8D8;
width:100%;
font-family: BYekan,tahoma;
transition:all 0.35s;
-webkit-transition:all 0.35s;
-ms-transition:all 0.35s;
-o-transition:all 0.35s;
-moz-transition:all 0.35s;
}
span.wpcf7-not-valid-tip {
    color: #F00;
    font-size: 1em;
    display: inline;
    padding: 3.9px 8px;
    border-bottom: 1px solid rgba(227, 150, 150, 0.52);
    float: right;
    font-family: BYekan,tahoma;
    width: 50%;
    background: rgba(246, 206, 206, 0.33);
    height: 33px;
    border-right: 5px solid #E06A6A;
}
div.wpcf7-validation-errors {
font-family: BYekan,tahoma;
width: 90%;
float: right;
color: #8A8D07;
margin: 10px 0px 3px;
padding: 5px 6.6% 7px 5px;
font-size: 15px;
border-top: 1px dashed #CCC;
border-bottom: 1px dashed #CCC;
background-color: #F8FBCF;
border-right: 4px solid #EFDE2E;
border-left:none;
}
div.wpcf7-mail-sent-ok {
    border-right: 4px solid rgba(57, 143, 20, 0.8);
    font-family: BYekan,tahoma;
    width: 90%;
    float: right;
    color: #125F0D;
    margin: 10px 0 3px 0;
    padding: 5px 6.6% 7px 5px;
    font-size: 15px;
    border-top: 1px dashed #ccc;
    border-bottom: 1px dashed #CCC;
    background-color: aliceblue;
border-left:none;
}

۶- روی دکمه “بروزرسانی پرونده” کلیک کنید.

۷- تموم شد! به همین راحتی!

اگه با css هم آشنایی داشته باشید به راحتی میتونید استایل های دلخواهتون رو ایجاد کنید. فقط کافیه رنگ و سایر ویژگی های کد بالا رو تغییر بدید.

باز هم سوالی بود حتما در قسمت نظرات بپرسید.

لينک دانلود:

تبلیغات

نویسنده (مدیر سایت)

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

22 دیدگاه برای “ساخت فرم تماس حرفه ای با Contact Form 7 + استایل جذاب”

  1. mo گفت:

    دمت گرم دنبال ي چيزي بودم پيداش كردم
    ايول داري.
    آموزشه خوبي بود. دمت گرم
    آموزشت نسبت به سايت هاي ديگه بهتره

    1. جواد نبوی گفت:

      خواهش می کنم دوست عزیز
      موفق باشید

  2. محسن شفیعی گفت:

    بسیار آموزش مرتب و تمیزی ارائه کردید. مشخصه وقت صرف کرده و کیفیت براتون مهمه. عالیه.
    از آموزش شما فرم خوبی تونستم توی سایت بزارم یه سوال؟
    من فیلد تلفن هم به فرمم اضافه کردم و خیلی خوب نمایش داده میشه اما داخل موبایل فیلد تلفن وسط چین هست و با بقیه که راست چین شده هماهنگ نمیشه؟
    ایا راهی هست
    ممنون
    موفق باشید

    1. جواد نبوی گفت:

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

    2. سارا گفت:

      سلام چطوری فیلد تلفن اضافه کردین
      لطفا راهنمایی کنید

  3. سارا گفت:

    سلام
    لطفا بگین فیلد شماره تلفن رو چطور اضافه کنم کدش چی میشه
    و اینکه میخوام بطور پیش فرض ۰۹ داخل کادر قرار داشته باشه
    با تشکر

    1. جواد نبوی گفت:

      سلام
      از کد زیر استفاده کنید:

      شماره موبایل
      [tel tel-178 “09”]

      یا اینکه در تب فرم, روی دکمه “تلفن” کلیک کنید و در کادر باز شده توی فیلد “مقدار پیشفرض” عبارت ۰۹ رو قرار بدید و بعد روی “گذاشتن برچسب” کلیک کنید.

    2. جواد نبوی گفت:

      البته باید قبل و بعد از عبارت “شماره موبایل” تگ باز و بسته p رو قرار بدید.

  4. سارا گفت:

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

    1. جواد نبوی گفت:

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

  5. مهجور گفت:

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

    ارادتمندشما

    1. جواد نبوی گفت:

      سلام دوست من
      خواهش میکنم. تا چند روز دیگه استایل بخش دیدگاه ها رو هم در یک مطلب جداگانه قرار میدم
      تشکر از شما

    2. آتیل گفت:

      میشه به منم خبر بدید اگه استایل نظرات خودتونو گذاشتید؟ یا بهترشو
      ممنون

    3. جواد نبوی گفت:

      چشم حتما خبر میدیم. به زودی این مطلب قرار داده میشه.

  6. حامد گفت:

    سلام و عرض خسته نباشید
    آموزش شما بسیار کار آمد و بسیار مفید بود بسیار ممنون …
    فقط فیلد ایمیل رو چه جوری میشه بزرگ کرد ؟؟
    مانند : فیلد وب سایت فرم تماس سایت خودتان
    ممنون میشم راهنماییم کنید

    1. جواد نبوی گفت:

      سلام دوست من
      خواهش می کنم
      من دقیق متوجه سوال شما نشدم. فیلد های فرم تماس سایت ما همه به یک اندازه هستند. اگر میخواید یکی از فیلد ها بزگتر از بقیه باشد کافیه زمانی که دارید یک فیلد ایجاد می کنید, در قسمت “ویژگی کلاس” عبارت contact-site-url رو وارد کنید. سپس به قسمت ویرایشگر قالبتون برید و کد زیر رو اضافه کنید:
      .contact-site-url{
      width:60%;
      }
      کافیه به جای مقدار ۶۰%, سایز دلخواه خودتون رو وارد کنید. یا اینکه به جای درصد از واحد پیکسل استفاده کنید.
      امیدوارم مفید بوده باشه
      با آرزوی موفقیت

  7. milad گفت:

    سلام . بنده در فرم ها قابلیت ارسال فابل گذاشتم.. ولی در ایمیلی که ارسال میشه فقط اسم فایل های ارسالی نوشته شده… نه خود فایل… ممنون میشم راهنمایی کنین.

    1. جواد نبوی گفت:

      درود
      در تب “تنظیمات” صفحه ویرایش فرم تماس، به قسمت “فایل های پیوست فایل” رفته و شرت کد زمینه فایل رو اونجا وارد کنید. با اینکار فایلی که فرستاده می شه به صورت ضمیمه شده برای ایمیل شما ارسال می شه
      موفق باشید

  8. azi گفت:

    همین حالت تایم لاین درختی دیدگاه ها رو چه طور ایجاد کردید؟

    1. جواد نبوی گفت:

      توسط css استایل دهی کردیم.

  9. علیرضا گفت:

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

    1. جواد نبوی گفت:

      سلام دوست عزیز
      این مقاله دقیقا در همین مورد هست. شما مراحل انجام کار رو به ترتیب انجام بدید باید درست بشه. اگر نشد احتمالا به خاطر اینه که با قالب شما همخوانی نداره.
      با یک قالب دیگه امتحان کنید ببینید همچنان مشکل هست؟

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *