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

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

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

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

افزونه WPForms  برای ساختن فرم های چند مرحله ای بسیار مناسب است و باعث خستگی کاربر نمی شود. فرم های چند مرحله ای به فرم هایی می گویند که کاربر بعد از وارد کردن اطلاعات در مرحله اول وارد مرحله بعدی می شود و اطلاعات مورد نظر را تکمیل می کند .

WPForms به سه دلیل یکی از بهترین افزونه های فرم ساز وردپرس برای ایجاد فرم های تماس با ما است:

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

۲- WPForms Lite صد در صد رایگان است و می توانید از آن برای ساختن فرم های ساده ارتباط با ما استفاده کنید.

۳- وقتی برای ویژگی های قدرتمند دیگر آن آماده شدید می توانید آن را به WPForms Pro ارتقا دهید.

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

آموزش ساخت فرم در افزونه WPForms

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

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

در این صفحه می توانید ویدئوی آموزشی که نحوه ساخت یک فرم تماس با ما را نشان می دهد را مشاهده کنید. در غیر این صورت روی دکمه “Create Your First Form” کلیک کنید. همچنین می توانید با رفتن به مسیر WPForms » Add New اولین فرم تماس خود را بسازید.

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

ابتدا برای فرم تماس خود یک نام انتخاب کنید. سعی کنید یک نام معنادار و مرتبط انتخاب کنید که در آینده به شما در شناسایی فرم کمک می کند.

سپس قالب فرم را انتخاب کنید می توانید از قالب های از پیش ساخته شده یا از یک قالب خالی استفاده کنید. بهتر است به جای فرم خالی (Blank) فرم تماس با ما ساده (simple) را انتخاب کنید.  این فرم شامل نام، ایمیل و فیلد گذاشتن پیام به شکل زیر است.

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

• طبق تصویر بالا می توانید تنظیمات فیلد ” نام ” را در ستون سمت چپ مشاهده کنید. می توانید آن ها را برای خود فارسی کنید مثلا برای لیبل می توانید متن را از انگلیسی به فارسی تغییر دهید.
• در قسمت Format سه گزینه وجود دارد. شما می توانید نام را تنها در یک فیلد نمایش دهید یا اینکه نام و نام خانوادگی را نمایش دهید یا اینکه نام و نام وسطی و نام خانوادگی را به نمایش بگذارید. در صورت انتخاب هر کدام برای هر مورد یک فیلد ایجاد می شود که همه در یک خط می باشند.
• گزینه ی Required مربوط به مهم بودن آن گزینه یا فیلد می باشد که با فعال کردن آن کاربر باید حتما آن فیلد را تکمیل کند.
• قسمت Advanced Options مربوط به تنظیمات اضافه تر از جمله پنهان کردن لیبل، محدود کردن طول متن براساس تعداد کاراکترها یا لغات، سایز فیلد، مقادیر پیش فرض نمایشی فیلدها و… می باشد. هر فیلد دارای گزینه های پیشرفته مخصوص به خود است.

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

فیلدهای قرار گرفته در این قسمت شامل سه قسمت Standard و Fancy و Payment هستند. فیلدهای موجود در قسمت Standard در نسخه رایگان افزونه قابل دسترسی است اما برای دسترسی به فیلدهای موجود در قسمت Fancy و Payment باید نسخه Pro افزونه را خریداری کنید.

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

آموزش تنظیمات فرم تماس در افزونه WPForms

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

همانطور که مشاهده می کنید تنظیمات در سه بخش General (عمومی)، Notification (اعلان) و Confirmation (تأیید) گروه بندی می شوند. در ادامه آموزش به بررسی این تب ها در صفحه تنظیمات افزونه WPForms می پردازیم.

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

در قسمت General می توانید تنظیمات عمومی افزونه را پیکربندی کنید.

از طریق تنظیمات عمومی می توانید عنوان و توضیحات فرم را ویرایش کنید ، متن دکمه ارسال را تغییر دهید و ویژگی anti-spam honeypot را فعال کنید. فعال کردن این ویژگی باعث می شود کاربران یک فیلد captcha را پر کنند و به این ترتیب به شما کمک می کند تا تعداد درخواست های اسپمی که دریافت می کنید را کاهش دهید.

در قسمت setting » general می توانید متن دکمه submit را به ارسال و sending.. را به در حال ارسال… یا هر متن دلخواه دیگری تغییر دهید.

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

حال که با استفاده از افزونه WPForms فرم تماس را در سایت خود ایجاد کرده اید لازم است که اطلاعیه ها و تاییدیه های فرم را به درستی تنظیم کنید.

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

آموزش تنظیمات اعلان های ایمیل در افزونه WPForms

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

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

Form Notification یا اعلان فرم، ایمیلی است که پس از ارسال فرم تماس در سایت وردپرس از طریق ایمیل دریافت می کنید.

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

Send To Email Address: در این فیلد می توانید آدرس ایمیل مورد نظر خود را به عنوان گیرنده اضافه کنید.

به طور پیش فرض Send To Email Address روی admin_email} Smart Tag} تنظیم می شود که ایمیل ادمین سایت را از تنظیمات وردپرس خارج کرده و در این فیلد قرار می دهد. اگر بخواهید اطلاعیه ها برای شخص دیگری ارسال شود می توانید آن را تغییر دهید. اگر مایل باشید اطلاعیه ها برای چندین نفر ارسال شود کافی است آدرس های ایمیل را وارد کرده و آنها را با کاما از یکدیگر جدا کنید.

Email Subject: هنگامی که فرم جدیدی ایجاد می کنید ، موضوع ایمیل به طور پیش فرض “New Entry” و به دنبال آن نام فرم قرار می گیرد.

اگر می خواهید این مورد را تغییر دهید ، می توانید متن و همچنین Smart Tag های مورد نظر خود را اضافه کنید. کافی است روی عبارت Show Smart Tags کلیک کنید و گزینه مورد نظر خود را انتخاب نمایید.

From Name: در اکثر فرم ها این قسمت به صورت پیش فرض با یک Smart Tag تنظیم می شود که قسمت Name را از ورودی فرم بیرون می کشد.
اما در صورت ارسال اطلاعیه به شخصی که فرم را پر کرده است می توانید این مورد را به نام شرکت خود تغییر دهد.

From Email: به صورت پیش فرض فرم های شما فیلد From Email را روی {admin_email} Smart Tag تنظیم می کنند.

اگر برای اطمینان از ارسال ایمیل از یک افزونه SMTP مانند افزونه WP Mail SMTP استفاده می کنید، فیلد from Email باید با ایمیلی که برای راه اندازی SMTP استفاده کرده اید مطابقت داشته باشد.

Reply-To: آدرس ایمیل وارد شده در این قسمت به عنوان گیرنده هرگونه پاسخ به ایمیل ارسال شده استفاده خواهد شد. به عنوان مثال اگر در فیلد From Email آدرس ایمیل خود را قرار داده باشید می توانید فیلد Reply-To را روی Smart Tag ی تنظیم کنید که ایمیل کاربر را از ورودی بیرون بکشد.
اگر این فیلد را خالی بگذارید به صورت پیش فرض با ایمیلی که در قسمت “From Email” وارد کرده اید پر می شود.

Message: مرحله آخر تنظیم پیام اعلان یا بدنه پیام است. به طور پیش فرض ، پیام حاوی {all_fields} Smart Tag خواهد بود که تمام فیلدهای پر شده توسط کاربر (بعلاوه فیلدهای پنهان) و برچسب های آنها را نشان می دهد. اگر مایل هستید محتوای اعلان را شخصی سازی کنید ، می توانید متن دیگری را اضافه کنید یا از Smart Tag ها استفاده کنید. حتی از HTML یا CSS نیز می توانید در این قسمت استفاده کنید.

تنظیمات تأییدیه فرم تماس

در قسمت Confirmation می توانید تنظیمات تأییدیه فرم های تماس را مشاهده کنید.

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

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

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

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

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

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

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

در شورت کد بالا اگر می خواهید عنوان و توضیحات فرم نشان داده شود، عبارت های false را به true تبدیل کنید.

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

در ویرایشگر کلاسیک وردپرس روی دکمه افزودن فرم (Add Form) در بالای صفحه کلیک کنید.

فرم مورد نظر برای اضافه کردن را انتخاب کنید. شورت کد فرم تماس با ما به محتوای صفحه شما اضافه خواهد شد.

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

در ویرایشگر گوتنبرگ وردپرس روی آیکون + که مربوط به اضافه کردن بلوک ها است کلیک کنید. بلوک WPForms را جستجو کرده و روی آن کلیک کنید.

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

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

بعد از زدن دکمه ارسال پیام زیر برای شما نمایش داده خواهد شد.

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

ساخت اعلان پاسخ به همه با استفاده از فیلد CC

اگر می خواهید اعلان های فرم ایمیل شما دارای ویژگی پاسخ به همه باشند می توانید از ویژگی Carbon Copy یا CC email افزونه WPForms استفاده کنید. در ادامه آموزش نحوه استفاده از این ویژگی را توضیح خواهیم داد.

برای افزودن فیلد CC به اعلان های فرم در پیشخوان وردپرس به مسیر WPForms » Settings بروید و روی تب Email کلیک کنید.

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

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

توجه داشته باشید که هنگام استفاده از قسمت CC حتماً فقط یک ایمیل را در قسمت Send To Email Address وارد کنید. در غیر این صورت ، هر ایمیل اضافی در این فیلد منجر به کپی شدن اعلان ارسال شده به هر آدرس در قسمت CC می شود.

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

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

سوئیچ کردن به ایمیلهای متن ساده

به طور پیش فرض ، تمام ایمیل ها با فرمت HTML هستند زیرا این فرمت اجازه استایل دهی و تصویر سازی را می دهد.

اگر ترجیح می دهید به اعلان های متنی ساده بروید ، باید در پیشخوان وردپرس به مسیر WPForms  » Settings بروید و برگه ایمیل را انتخاب نمایید.

از صفحه ایمیل ، می توانید اعلان های Plain Text را انتخاب کرده و تنظیمات خود را ذخیره کنید.

در تصویر زیر می توانید نمونه ای از ظاهر یک ایمیل متنی ساده را مشاهده کنید.

آموزش قرار دادن تصویر یا لوگو در هدر ایمیل

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

برای اضافه کردن تصویر هدر یا لوگو به اعلان ایمیل در پیشخوان وردپرس به مسیر WPForms » Settings بروید و تب ایمیل را باز کنید.

به بخش Header Image اسکرول کنید. در این بخش می توانید یک فایل تصویری را بارگذاری کنید.

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

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

تغییر رنگ پس زمینه ایمیل

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

اگر می خواهید این رنگ را تغییر دهید می توانید در پیشخوان وردپرس به مسیر WPForms » Settings بروید و تب ایمیل را باز کنید. در آنجا گزینه‌ای با عنوان Background Color را مشاهده خواهید کرد. با کلیک کردن در این زمینه یک انتخابگر رنگی باز می شود یا می توانید مقدار هگزا را تایپ کنید.

آموزش ایمیل زدن به شخص پر کننده فرم در افزونه WPForms

ارسال ایمیل به کاربری که فرم را ارسال کرده است روش بسیار سریع و خوبی برای اعلام دریافت ایمیل است.

برای تنظیم این گزینه ، سازنده فرم خود را باز کرده و به تب Settings »Notifications بروید. سپس در قسمت Send To Email Address روی Show Smart Tags کلیک کنید.

این قسمت لیستی را نشان می دهد که تمام فیلدهای ایمیل موجود در فرم شما را نشان می دهد. با انتخاب قسمت ایمیل یک Smart Tag به صورت خودکار به قسمت Send To Email Address اضافه می شود.

با ارسال ایمیل ، این Smart Tag به طور خودکار ایمیلی که کاربر در فرم وارد کرده است را بیرون می کشد.

تست ایمیل های اعلان

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

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

برای تست این موضوع بهترین کار این است که فرم را ارسال کنید. سپس بررسی کنید تا مطمئن شوید که ایمیل ارسال شده است.

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

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

شما می توانید فرم های ساخته شده با افزونه WPForms را از طریق افزونه CSS Hero که یک افزونه پرمیوم است و همچنین افزونه Styler for WPForms که یک افزونه رایگان است و می توانید آن را از مخزن وردپرس دانلود کنید، سفارشی سازی نمایید.

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

افزونه WPForms برای هر فرم یک کد ایجاد می کند تا توسط آن بتوانید فرم خود را از طریق کدهای CSS استایل دهی کنید. در این افزونه دو روش برای استایل دهی فرم ها از طریق CSS وجود دارد:

• استایل دهی تمام فرم ها
• استایل دهی یک فرم جدای از بقیه فرم ها

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

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

تمام فرم های ساخته شده با افزونه WPForms از کلاس wpforms-form. در تگ HTML فرم استفاده می کنند. شما می توانید از این کلاس CSS برای استایل دهی تمام فرم های ساخته شده با افزونه WPForms بدون اینکه بقیه فرم های موجود در سایت شما (مانند فرم اشتراک کامنت در زیر پست ها) را تحت تأثیر قرار دهد، استفاده کنید.

هر المان داخل فرم (فیلدها، دکمه ها و …) نیز یک ID و کلاس CSS دارد که با استفاده از آنها می توانید هدف گذاری دقیق تری انجام دهید.

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

/** WPFORMS WPFORMSLABEL **/
.wpforms-form label{
 color:rgb(8, 152, 166)!important; 
}
 
/** WPFORMS Input Textarea **/
.wpforms-form input, .wpforms-form textarea{
 background-color:rgba(8, 152, 166, 0.39)!important; 
}
 
/** WPFORMS BUTTON COLOR **/
.wpforms-form button{
 background-color:rgb(8, 152, 166)!important; 
}
 
/** WPFORMS SUBMIT BUTTON **/
button.wpforms-submit{
 color:#FFFFFF!important; 
 background-color:rgb(242, 163, 8)!important; 
}
 
/** WPFORMS SUBMIT BUTTON Hover **/
button.wpforms-submit:hover{
 color:rgb(255, 255, 255)!important; 
 background-color:rgb(8, 168, 191)!important; 
}

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

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

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

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

راه سوم استفاده از افزونه Simple Custom CSS می باشد.

استایل دهی فرم های تماس به صورت جداگانه

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

یکی از صفحاتی که حاوی فرم مورد نظر شما برای تغییر و ویرایش است را باز کنید. موس خود را روی فیلد اول فرم قرار داده و روی آن کلیک راست کنید. سپس گزینه Inspect Element را انتخاب کنید.

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

در سورس کد، خط شروع کد فرم را پیدا کنید.

همانطور که در تصویر بالا مشاهده می کنید، کد فرم تماس ما با خط زیر شروع می شود:

<div id="wpforms-231" class="wpforms-container wpforms-container-full">

ID فرم ما id=”wpforms-231″ است که توسط افزونه WPForms مخصوص این کد تولید شده است. از این ID در کد CSS بالا برای استایل دهی فرم مورد نظر خود استفاده می کنیم. به این ترتیب باقی فرم های ساخته شده با افزونه WPForms تحت تأثیر قرار نمی گیرند.

کافی است در کد بالا به جای wpforms. از wpforms-231 # به صورت زیر استفاده کنیم.

/**Form Background Color**/
 
div#wpforms-231 {background-color: rgb(242, 163, 8) !important}
 
/** WPFORMS WPFORMSLABEL **/
.wpforms-form label{
color:rgb(8, 152, 166)!important;
}
 
/** WPFORMS Input Textarea **/
.wpforms-form input, .wpforms-form textarea{
background-color:rgba(8, 152, 166, 0.39)!important;
}
 
/** WPFORMS BUTTONCOLOR **/
.wpforms-form button{
background-color:rgb(8, 152, 166)!important;
}
 
/** WPFORMS SUBMITBUTTON **/
button.wpforms-submit{
color:#FFFFFF!important;
background-color:rgb(242, 163, 8)!important;
}
 
/** WPFORMS SUBMITBUTTON Hover **/
button.wpforms-submit:hover{
color:rgb(255, 255, 255)!important;
background-color:rgb(8, 168, 191)!important;
}

کد بالا یک پس زمینه نارنجی به این فرم اضافه می کند و روی بقیه فرم ها تأثیری ندارد.

در ادامه آموزش کدهای CSS ی که بیشترین کاربرد را برای استایل دهی فرم های ساخته شده با افزونه WPForms شما دارند را در اختیارتان قرار می دهیم.

نمونه کدهای CSS برای استایل دهی فرم ها

رنگ فونت عنوان

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

div.wpforms-container-full .wpforms-form .wpforms-title {
    color: #007acc;
}

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

اندازه فونت عنوان

برای اینکه اندازه فونت عنوان تمام فرم های موجود در سایت خود را عوض کنید، از کد زیر استفاده کنید.

div.wpforms-container-full .wpforms-form .wpforms-title {
    font-size: 35px;
}

رنگ پس زمینه فرم

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

.wpforms-form {
    background-color: #eee;
}

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

رنگ پس زمینه فیلدهای فرم

از کد زیر برای تغییر رنگ پس زمینه فیلدها استفاده کنید.

.wpforms-form input, .wpforms-form textarea{
 background-color:rgba(8, 152, 166, 0.39)!important; 
}

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

پدینگ (Padding)

فاصله بین المان های فرم با یکدیگر و با کادر دور فرم را با استفاده از کد زیر تغییر دهید.

.wpforms-form {
    background-color: #eee;
    padding: 20px 15px;
}

در کد بالا رنگ پس زمینه فرم به رنگ خاکستری روشن در آمده و المان های فرم از بالا و پایین به اندازه 20px و از چپ و راست به اندازه 15px از کادر دور فرم فاصله می گیرند. شما می توانید این اعداد را به دلخواه خود عوض کنید.

مرز

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

.wpforms-form {
    background-color: #eee;
    padding: 20px 15px;
    border: 3px solid #666;
}

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

گرد کردن گوشه های مرز

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

.wpforms-form {
    background-color: #eee;
    padding: 20px 15px;
    border: 3px solid #666;
    border-radius: 20px;
}

امیدواریم آموزش افزونه WPForms در سایت مدیر وردپرس به شما کمک کرده باشد یک فرم تماس با ما برای وب سایت وردپرسی خود بسازید. ساختن فرم چند مرحله ای با این افزونه نیازمند نصب نسخه Pro آن است. اما اگر می خواهید یک فرم چند مرحله ای با یک افزونه رایگان بسازید به راهنمای ما در مورد نصب و آموزش فرم تماس چندمرحله ای با Contact Form 7 Multi-Step Forms مراجعه کنید.

دانلود افزونه WPForms