Contact Contact 7 یک افزونه است وردپرس فوق العاده برای ایجاد فرم های تماس محبوب است. این امکان را به شما می دهد تا فرم هایی را بدون کدگذاری HTML ایجاد کنید. اینها اشکال می تواند ویژگی هایی مانند CAPTCHA، بارگیری فایل ها ، زمینه های نظرسنجی و غیره ...

اگرچه سبک پیش فرض Contact 7 برای اکثر فرمهای تماس با ما کافی است ، اما اغلب شما نیاز به تغییر آن دارید.

این تغییر ساختار فرم پیش فرض را برای دسترسی بیشتر آن تغییر می دهد. او همچنین اضافه می کند کد کوتاه [ریسپانسیو] بالای فرم به گونه ای که در صورت بروز خطا هنگام ارسال فرم ، روی فرم مشخص شود.

اگر هرگز وب سایت وردپرس ایجاد نکرده اید ، این موضوع را بیابید نحوه نصب یک وبلاگ وردپرس با مشتری FTP

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

[پاسخ] نام شما (الزامی) [متن * شناسه نام شما: نام شما ] نامه الکترونیکی شما (الزامی) [ایمیل * شناسه ایمیل خود: ایمیل خود] موضوع خود [متن شناسه موضوع خود: متن خود را بنویسید] پیام شما [textarea شناسه پیام شما: پیام شما] [ارسال "ارسال"]

برخی از پلاگین ها برای سفارشی فرم تماس 7

1. فرم تماس با سبک 7

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

لیست سبک های تماس با 6برای کاربران با موضوع بیست پانزده نیز یک سبک سازگار وجود دارد.

برای اعمال یک سبک ، به " سبک های تماس> ویرایش سریع فرم مورد نظر را برای استفاده از سبک بررسی کنید ، سپس روی " به روز رسانی '.

نمونه فرم تماس با وردپرس2. فرم تماس با پوست 7

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

شما می توانید مدل های اختصاص داده شده به اشکالévénements، ثبت نام و اخطار.

فرم تماس با وردپرس صفحه فرم

این همان چیزی است که فرم نظرسنجی با سبک Topaz با استفاده از تم بیست و پانزده به نظر می رسد.

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

3. طراحی مواد برای فرم تماس

این سبک ها بر اساس سبک است مواد طراحی.

این افزونه پیشنهاد می کند که فرم پیش فرض را حذف کرده و از کد کوتاه آن استفاده کنید.

در اینجا مثالی با موضوع Hestia آورده شده است. وقتی نشانگر به فیلدی از فرم منتقل می شود ، به برچسب شناور توجه کنید.

فرم تماس با نمونه 7تماس با فرم 7 تست در برخی مضامین وردپرس

فرم تماس با موضوع ColorMag WordPress

بیشتر اوقات ، فرم تماس با 7 سبک مضمون وردپرس شما را به ارث می برد. این موضوع با موضوع است مرجانی تیره.

فرم تماس تیره مرجانی

فرم تماس با موضوع وردپرس ColorMag

در اینجا فرم بدون سبک سفارشی است. او رنگ دکمه آبی را به ارث می برد موضوع ColorMag وردپرس.

فرم تماس با موضوع colormagمن با بارگذاری یک عکس شروع کردم تا به عنوان تصویر پس زمینه برای فرم استفاده شود و کد برچسب های فرم را از خاکستری به سفید با سایه آبی روی متن تغییر دهید.

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

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

GIF هنگام ارسال فرم به درستی نشان داده نمی شود ، من یک گزینه برای Loading.io پیدا کردم و با CSS به آن اشاره کردم.

فرم نتیجه:

نتیجه سفارشی سازی فرم تماس 7این کد است:

div.wpcf7 {حاشیه: 0؛ padding: 1.5em؛ پس زمینه: url ('your_background_image_url_here')؛ -webkit-border-radius: 3px؛ -moz-border-radius: 3px؛ مرز-شعاع: 3px؛ } برچسب .wpcf7، .wpcf7-submit {color: white؛ متن سایه: 1px 1px 0px rgba (40، 157، 204، 1)؛ } .wpcf7 .wpcf7-form-control {10px 0 20px 0؛ } .wpcf7 .wpcf7-submit: hover {background: #186d8e؛ } .wpcf7-form-control: focus {border: 2px solid #289dcc؛ } div.wpcf7-response-output {background: #F8F8F8؛ متن خط: مرکز؛ عرض: 92.5٪؛ حاشیه: 1em 0em 1em 0em؛ -webkit-border-radius: 3px؛ -moz-border-radius: 3px؛ مرز-شعاع: 3px؛ } span.wpcf7-not-valid-tip {background: #F8F8F8؛ نمایش: inline-block؛ عرض: خودکار؛ padding: 1٪؛ -webkit-border-radius: 3px؛ -moz-border-radius: 3px؛ مرز-شعاع: 3px؛ } div.wpcf7. ajax-loader {background-image: url ('your_loading_image_url_here')؛ عرض: 50px؛ ارتفاع: 50px؛ }

اگر نیازی به خط نوشتن کد نیستید ، پیشنهاد می کنیم حتماً با ما تماس بگیرید افزونه های 10 WordPress برای ایجاد یک فرم تماس در وبلاگ خود

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

1. فرم تماس W8

فرم تماس W8 یکی از افزونه های این است فرم تماس محبوب ترین در وردپرس ویژگی های زیادی مانند ارسال به چندین گیرنده، پشتیبانی از انیمیشن ها، ایجاد فرم نامحدود، سبک های مختلف و طیف گسترده ای از گزینه های سفارشی سازی اضافی را ارائه می دهد.

W8 فرم تماس با ما وردپرس پلاگین فرم تماس با ما

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

دانلود | نسخه ی نمایشی | میزبانی وب

2. فرم تماس با ما

Contact Us Form یک افزونه پاسخگو وردپرس و ابزاری ساده اما غنی از گزینه های سفارشی سازی است که به شما امکان می دهد یک فرم شفاف و دلگرم کننده نمایش دهید ، بازدید کنندگان می توانند با گذاشتن پیام خود با آن تماس بگیرند

فرم پلاگین فرم تماس با وردپرس با ما تماس بگیرید

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

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

دانلود | نسخه ی نمایشی | میزبانی وب

3. نرم افزار پنجره ی صاف

Slick Popup Pro یک افزونه وردپرس بسیار ساده و سبک است که هر فرم ایجاد شده توسط افزونه را تبدیل می کند فرم تماس با 7 در یک پنجره او از فرم استفاده می کند و آن را به یک ظاهر زیبا و کاملا پاسخگو تبدیل می کند.WordPress plugup popup slick popup pro

فرم پنجره می تواند چندین کاربرد داشته باشد از جمله: فرم جمع آوری اطلاعات ، الف فرم تماس، فرم ثبت نام ، فرم نقل قول ، فرم پیشنهاد / شکایت و موارد دیگر.

دانلود | نسخه ی نمایشی | میزبانی وب

منابع پیشنهادی

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

نتیجه

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

با این حال، شما همچنین می توانید با ما مشورت کنید ressourcesاگر برای اجرای پروژه های ایجاد سایت های اینترنتی به عناصر بیشتری احتیاج دارید ، با مشورت راهنمای ما در مورد ایجاد وبلاگ وردپرس.

در ضمن ، در مورد خودتان به ما بگویید نظر و پیشنهادات در بخش اختصاصی

...