w3designw3design
  • صفحه اصلی
  • وبلاگ
  • خدمات ما
    • طراحی سایت
    • سئو و بهینه سازی سایت
    • کارت ویزیت آنلاین
    • پنل پیامکی
  • نمونه کارها
  • درباره ما
  • تماس با ما
Search
  • صفحه اصلی
  • وبلاگ
  • خدمات ما
    • طراحی سایت
    • سئو و بهینه سازی سایت
    • کارت ویزیت آنلاین
    • پنل پیامکی
  • نمونه کارها
  • درباره ما
  • تماس با ما
  • درباره ما
  • وبلاگ

آموزش افزونه Contact Form 7 | فرم تماس 7 و ساخت فرم تماس با ما در وردپرس

support2021-01-26T18:12:48+03:30
By support آموزش وردپرس, طراحی سایت

آموزش افزونه Contact Form 7

در این مقاله از سری آموزشات صفر تا صد طراحی سایت به آموزش افزونه Contact Form 7 که یکی از قدیمی ترین و محبوب ترین افزونه های فرم تماس با ما و جزء بهترین افزونه های فرم ساز وردپرس است، می پردازیم. بنابراین تا انتها با w3design همراه باشید.

افزونه Contact Form 7 یا همان فرم تماس ۷ یکی از افزونه های قدیمی، پرکاربرد و رایگان برای سیستم مدیریت محتوا وردپرس است که بیش از ۵ میلیون نصب فعال دارد. با استفاده از این افزونه به راحتی می توانید انواع فرم های تماس و دیگر فرم های ارتباطی همچون فرم های استخدام و فرم های نظرسنجی را طراحی کنید و در سایت خودتان قرار دهید. از دیگر ویژگی های افزونه Contact Form 7 می توان به موارد زیر اشاره کرد:

  • ایجاد و مدیریت چندین فرم تماس
  • سفارشی سازی آسان فیلدهای فرم
  • استفاده از نشانه گذاری ساده برای تغییر محتوای ایمیل
  • وارد کردن فرم ها به هر برگه و نوشته با استفاده از شورت کد
  • پشتیبانی از فیلتر کردن هرزنامه ها، ارسال آژاکس و CAPTCHA

در ادامه این آموزش افزونه Contact Form 7 را مورد بررسی قرار داده و نحوه درست کردن فرم های تماس با آن را توضیح خواهیم داد.

ساخت فرم تماس -افزونه Contact Form 7

ساخت فرم تماس با ما توسط افزونه Contact Form 7

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

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

ساخت فرم تماس

در این صفحه می توانید تمام فرم های تماس ساخته شده با این افزونه را مشاهده کرده و آنها را مدیریت کنید. به محض نصب و فعال سازی افزونه Contact Form 7 یک فرم تماس پیش فرض به نام “فرم تماس 1” ساخته می شود. شما می توانید این فرم را ویرایش کرده و آن را در نوشته ها و برگه های وردپرس وارد کنید.

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

 

ساخت فرم تماس -افزونه Contact Form 7

همچنین با استفاده از افزونه Contact Form 7 می توانید یک فرم تماس جدید بسازید. نحوه ساخت فرم تماس جدید با ویرایش فرم تماس موجود مشابه یکدیگر است. در ادامه آموزش به شما نشان خواهیم داد که چگونه یک فرم تماس جدید با افزونه Contact Form 7 بسازید.

ساخت فرم تماس

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

همچنین می توانید در صفحه فرم های تماس روی دکمه “افزودن جدید” کلیک کنید.

سازنده فرم تماس با ما به صورت زیر باز می شود.

برای فرم تماس خود یک نام بگذارید. این نام تنها برای بخش مدیریتی و پیدا کردن آسان فرم های تماس است و در فرانت اند سایت ظاهر نمی شود.

ساخت فرم تماس -افزونه Contact Form 7

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

 ساخت فرم

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

ساخت فرم تماس

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

به عنوان مثال اگر بخواهید فیلد تلفن را بعد از ایمیل قرار دهید باید ابتدا روی برچسب تلفن کلیک کنید.

ساخت فرم تماس -افزونه Contact Form 7

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

ساخت فرم تماس

نوع زمینه: اگر گزینه “زمینه الزامی” را تیک بزنید، پر کردن این فیلد الزامی شده و کاربر تا وقتی که شماره تلفن اش را وارد نکند نمی تواند فرم را ارسال نماید.

نام: قسمت نام مربوط به نام فیلد است که می توانید یک نام دلخواه مانند your-phone-number برای آن انتخاب کنید.

مقدار پیش فرض: اگر قسمت مقدار پیش فرض را پر کنید در فیلد شماره تلفن فرم، مقداری که وارد کرده اید به صورت پیش فرض قرار می گیرد.

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

اگر با CSS آشنایی دارید می توانید برای قسمت id و class نامی انتخاب کرده و در فایل style.css یا در مسیر نمایش » سفارشی سازی، در استایل فرم تغییراتی ایجاد کنید.

سپس بر روی دکمه “گذاشتن برچسب” کلیک کنید.

اگر می خواهید فیلد شما عنوان داشته باشد باید برای آن لیبل بگذارید. به این صورت که در صفحه ویرایشگر فرم، تگ باز و بسته لیبل <label></label> را تایپ کرده و عنوان و فیلد تلفن را میان آن قرار دهید. صفحه فرم شما به صورت زیر خواهد شد.

ساخت فرم تماس -افزونه Contact Form 7

آموزش تنظیمات ایمیل در افزونه Contact Form 7

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

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

ساخت فرم تماس -افزونه Contact Form 7

قالب ایمیلی که پس از ارسال یک فرم تماس برای شما ارسال می شود به صورت فوق است.

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

توجه داشته باشید که برچسب های فرم و برچسب های ایمیل متفاوت از یکدیگر هستند. به عنوان مثال می توانید از برچسب [text* your-name] در فرم و از برچسب [your-name] در ایمیل استفاده کنید. هر کدام سینتکس متفاوتی دارند.

در قسمت “به”، صحت آدرس ایمیل را بررسی کنید. تمام ایمیل های مربوط به فرم های تماس به آدرس ایمیلی که در این قسمت قرار دارد، ارسال می شوند. (فرم تماس 7 به طور پیش فرض ایمیلی که به وب سایت شما لینک داده شده است را اضافه می کند).

به قسمت “محتوای پیام” اسکرول کنید و برچسب های اضافی که در قسمت فرم اضافه کرده بودید را در این قسمت نیز اضافه کنید. به این ترتیب مطمئن می شوید که وقتی ایمیل را از طریق فرم تماس خود دریافت می کنید، تمام اطلاعاتی که از فرستنده خواسته بودید را نمایش می دهد.

ایمیل (2) یک قالب ایمیل اضافی است که اغلب به عنوان یک پاسخ دهنده خودکار استفاده می شود، اما می توانید برای هر منظور دیگری نیز از آن استفاده کنید. ایمیل (2) فقط هنگامی ارسال می شود که ایمیل اصلی با موفقیت ارسال شده باشد.

در پایین قسمت ایمیل بخش ایمیل۲ را فعال کنید و ایمیل مورد نظر خود را وارد کنید.

ساخت فرم تماس -افزونه Contact Form 7

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

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

آموزش سفارشی سازی پیام ها در افزونه Contact Form 7

این بخش شامل سفارشی سازی پیام‌هایی است که کاربر می‌تواند مشاهده کند مانند پیام های خطا یا موفق بودن ارسال پیام. شما می‌توانید این پیام‌ها را به دلخواه خود ویرایش یا فارسی‌سازی کنید.

ساخت فرم تماس

تنظیمات اضافی افزونه Contact Form 7

در این بخش می‌توانید یک سری تنظیمات یا ویژگی‌های خاص را با استفاده از کد اسنیپت به فرم تماس خود اضافه کنید.

ساخت فرم تماس -افزونه Contact Form 7

افزونه Contact Form 7 به صورت پیش فرض از انواع تنظیمات زیر پشتیبانی می کند:

حالت فقط مشترکین (Subscribers-only)

CSS
1
<span style="font-family: iransans;">subscribers_only: true</span>

اگر می خواهید مطمئن شوید که فقط کاربران وارد شده می توانند فرم تماس را ارسال کنند، از حالت Subscribers-only استفاده کنید. در این حالت، کاربرانی که در سایت لاگین نکرده اند، نمی توانند فرم تماس را ارسال کنند و پیامی را مشاهده می کنند که به آنها اطلاع می دهد که برای ارسال فرم لازم است لاگین کنند. توجه داشته باشید که در این حالت هیچ گونه تأیید ضد هرزنامه ای برای فرم های تماس ارائه نمی شود.

حالت نسخه ی نمایشی (Demo)

CSS
1
<span style="font-family: iransans;">demo_mode: on</span>

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

حالت صرف نظر کردن از ایمیل (Skipping mail)

CSS
1
<span style="font-family: iransans;">skip_mail: on</span>

حالت skip_mail تقریباً به همان روش demo_mode کار می کند ، اما skip_mail فقط از ارسال ایمیل صرف نظر می کند و بر فعالیتهای دیگر مانند ذخیره پیام با Flamingo تأثیر نمی گذارد.

حالت پذیرش به عنوان اعتبار سنجی (Acceptance as validation)

1
<span style="font-family: iransans;">acceptance_as_validation: on</span>

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

حالت ذخیره نکردن پیام (Do not store)

CSS
1
<span style="font-family: iransans;">do_not_store: true</span>

این تنظیمات به ماژول های ذخیره پیام، مانند Flamingo می گوید که پیام های این فرم تماس را ذخیره نکنند.

حالا که تنظیمات را انجام داده اید روی دکمه ذخیره (save) کلیک کنید. به محض کلیک کردن پیامی حاوی شورت کد برای شما نشان داده می شود. شورت کد داده شده را کپی کنید.

ساخت فرم تماس

اضافه کردن فرم تماس در نوشته ها و برگه ها با افزونه contact form 7

حال که فرم تماس با ما را با افزونه contact form 7 تنظیم کرده اید زمان آن فرارسیده است که آن را در یک صفحه قرار دهید. اگر شورت کد را در مرحله قبل کپی نکرده اید می توانید به بخش فرم‌های تماس بروید و از آنجا شورت‌‌کد فرم‌ تماسی که ساخته‌اید را کپی کنید:

ساخت فرم تماس

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

ساخت فرم تماس

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

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

اگر ایمیل‌ها را در اسپم ایمیل خود مشاهده کردید، ایمیل دریافتی را یک بار no spam کنید تا دفعات بعدی در inbox آنها را دریافت کنید.

سفارشی سازی افزونه Contact Form 7

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

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

اضافه کردن CSS به استایل شیت قالب خود (این روش به هیچ عنوان توصیه نمی شود مگر اینکه از یک قالب فرزند برای سایت خود استفاده کنید).

اضافه کردن CSS به فیلد CSS اضافی در سفارشی ساز وردپرس (این روش توصیه شده است)

استفاده از افزونه های ویرایش قالب وردپرس مانند افزونه Simple Custom CSS. همچنین می توانید از افزونه هایی که مختص استایل دهی افزونه Contact Form 7 توسعه داده شده است مانند افزونه Contact Form 7 Skins و افزونه WOW Styler استفاده کنید.

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

برای این کار در پیشخوان وردپرس به مسیر نمایش » سفارشی سازی بروید و روی تب CSS اضافی کلیک کنید.

ساخت فرم تماس -افزونه Contact Form 7

سفارشی سازی پس زمینه و لبه های فرم

کد CSS زیر پس زمینه تمام فرم های ساخته شده با افزونه Contact Form 7 در سایت وردپرس شما را تغییر می دهد:

CSS
1
2
3
4
5
6
7
8
<span style="font-family: iransans;">/* Contact Form 7 Form Background And Border CSS
-----------------------------------------------*/
.wpcf7 {
     background: #A3A3A3;
     border: 10px solid #494949;
     width: 700px;
     padding: 20px 20px 20px 50px !important;
}</span>

کافی است کد را در قسمت CSS اضافی در فیلد مربوطه قرار دهید. کد بالا باعث ایجاد یک پس زمینه خاکستری روشن همراه با لبه های خاکستری تیره در اطراف فرم می شود. شما می توانید عدد هگزای رنگ مورد نظر خود را در کد بالا قرار دهید.

ساخت فرم تماس

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

کد CSS زیر به اندازه فونت، فیلد های ورودی فرم، منطقه متنی، رنگ پس زمینه، رنگ فونت، عرض فرم و پدینگ را استایل دهی می کند.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
<span style="font-family: iransans;">/* Contact Form 7 Input CSS
---------------------------*/
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
textarea {
     font-size: 16px;
     background-color: #f5f5f5;
     border: none;
     width: 95%;
     padding: 2%;
}</span>

اگر از کد بالا بدون هیچ تغییری استفاده کنید، فیلد های فرم را به رنگ خاکستری روشن مشاهده کنید.

ساخت فرم تماس

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

کد CSS زیر دکمه ارسال موجود در فرم تماس ساخته شده با افزونه Contact Form 7 را سفارشی سازی می کند.

در این کد سه قانون وجود دارد که عبارتند از:

input – وضعیت دکمه قبل از اینکه اقدامی روی آن صورت گیرد.

input: hover – وضعیت دکمه وقتی ماوس کاربر روی آن قرار می گیرد.

input: active – وضعیت دکمه وقتی کاربر روی دکمه کلیک می کند.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<span style="font-family: iransans;">/* Contact Form 7 Submit Button
-------------------------------*/
.wpcf7 input[type="submit"] {
     color: #ffffff;
     font-size: 18px;
     font-weight: 700;
     background: #E2272E;
     padding: 15px 25px 15px 25px;
     border: none;
     border-radius: 5px;
     width: auto;
     text-transform: uppercase;
     letter-spacing: 5px;
}
.wpcf7 input:hover[type="submit"] {
     background: #494949;
     transition: all 0.4s ease 0s;
}
.wpcf7 input:active[type="submit"] {
     background: #000000;
}</span>

اگر از کد بالا بدون هیچ تغییری استفاده کنید، باید یک دکمه قرمز را ببینید و هنگامی که مکان نمای موس خود را روی آن قرار می دهید، به رنگ خاکستری تغییر داده شود.

ساخت فرم تماس -افزونه Contact Form 7

سفارشی سازی چک باکس ها در افزونه Contact Form 7

کد CSS زیر را می توانید برای استایل دهی چک باکس ها استفاده کنید. این کد چک باکس ها را کمی بزرگ تر کرده و لیبل متنی آنها را با بقیه المان های موجود در صفحه تراز می کند.

CSS
1
2
3
4
5
6
7
8
9
10
11
<span style="font-family: iransans;">/* Checkbox CSS
----------------*/
input[type="checkbox"] {
    transform: scale(1.3);
    margin-left: 5px;
}
 
span.wpcf7-list-item {
margin: 0;
padding-bottom: 20px;
}</span>

Share this post

Facebook Twitter LinkedIn Google + Email

Author

support

دیدگاهتان را بنویسید لغو پاسخ

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


Related Posts

تفاوت سایت وردپرس با کدنویسی

تفاوت سایت وردپرس با کدنویسی

تفاوت سایت وردپرس با کدنویسی 🔹سایت های وردپرسی با سایت های عادی دارای تفاوت های چشمگیری هستند. شما با داشتن... read more

فعالیت کاربران

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

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

افزونه Code Snippets

آموزش افزونه Code Snippets برای اضافه کردن کدهای سفارشی

در این مقاله افزونه Code Snippets که یکی از بهترین افزونه های اضافه کردن کد اسنیپت ها یا قطعه کدهای سفارشی... read more

انتقال نوشته به برگه در وردپرس

انتقال نوشته به برگه در وردپرس

انتقال نوشته به برگه در وردپرس وردپرس به صورت ناباورانه ای می تواند برای شما امکان ساخت یک وبسایت را... read more

Addon Domain

Addon Domain را چطور در cpanel اضافه کنیم؟

اضافه کردن Addon Domain به سی پنل در این آموزش نحوه ایجاد ادان دامین یا Addon Domain در هاست سی... read more

کار با برگه ها در وردپرس

کار با برگه ها در وردپرس

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

افزونه MailChimp

آموزش نصب و راه اندازی افزونه MailChimp

MC4WP: Mailchimp for WordPress افزونه ارسال خبرنامه وردپرس افزونه MailChimp یکی از بهترین سرویس های ایمیل مارکتینگ جهان است که... read more

نمایش کد در مطالب وردپرس

نمایش کد در مطالب وردپرس 🔹هر بار که نوشته خود را ذخیره یا منتشر می‌کنید، وردپرس محتوای شما را از... read more

افزونه OptinMonster

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

معرفی افزونه optinmonster افزونه OptinMonster یک افزونه حرفه ای و کاربردی برای وردپرس می باشد که توسط آن قادر به... read more

حالت تعمیر وردپرس

آموزش ایجاد حالت تعمیر و به زودی در وردپرس

روش های فعال‌سازی حالت تعمیر در وردپرس در این سری از مقالات آموزش رایگان صفر تا صد طراحی سایت قصد... read more

جستجو

Follow Us

Facebook Pinterest Instagram Linkedin Telegram

آخرین مطالب

بسته نصبی قالب وردپرس
آموزش راه اندازی بسته نصبی قالب وردپرس در هاست دایرکت ادمین
افزونه ShortPixel
افزونه ShortPixel و بهینه سازی تصاویر وردپرس
افزونه‌ WPFront user Role
افزونه‌ WPFront user Role برای مدیریت نقش های کاربری در وردپرس
آموزش ساخت بسته نصب آسان در وردپرس
آموزش ساخت بسته نصب آسان در وردپرس
افزونه Ninja Forms
افزونه Ninja Forms
افزونه EWWW Image Optimizer
افزونه EWWW Image Optimizer
افزونه User Role Editor
افزونه User Role Editor و مدیریت نقش و سطح دسترسی کاربر در وردپرس
نصب وردپرس روی ساب فولدر
آموزش نصب وردپرس روی ساب فولدر دایرکت ادمین
افزونه Master Slider
افزونه Master Slider
افزونه Formidable Forms
افزونه Formidable Forms

دسته‌ها

  • آموزش
  • آموزش وردپرس
  • بازاریابی محتوا
  • برنامه نویسی
  • تبلیغات
  • دسته‌بندی نشده
  • سئو
  • سئو خارجی
  • شبکه
  • طراحی اپلیکیشن
  • طراحی سایت
  • کامپیوتر و لپ تاپ
  • گرویتی فرم
  • لینک سازی
  • نرم افزار

بایگانی‌ها

  • فوریه 2021
  • ژانویه 2021
  • دسامبر 2020
  • نوامبر 2020
  • اکتبر 2020
  • سپتامبر 2020

دسترسی سریع

  • خانه
  • وبلاگ
  • نمونه کارها
  • درباره ما
  • طراحی سایت
  • سئو و بهینه سازی
  • کارت ویزیت آنلاین
  • پنل پیامکی

عضویت در خبرنامه

    ۹۱۰۰-۱۰۱۱(۰۱۳) info@w3design.ir
    تمامی حقوق مادی و معنوی این سایت برای تیم w3design محفوظ است.