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

آموزش افزونه WPForms

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

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

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

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

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

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

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

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

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

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

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

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

آموزش افزونه WPForms

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

آموزش افزونه WPForms

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

آموزش افزونه WPForms

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

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

آموزش افزونه WPForms

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

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

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

آموزش افزونه WPForms

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

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

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

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

آموزش افزونه WPForms

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

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

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

آموزش افزونه WPForms

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

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

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

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

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

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

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

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

آموزش افزونه WPForms

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

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

آموزش افزونه 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 را در نوشته ها و برگه های سایت خود قرار دهید.

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

آموزش افزونه WPForms

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

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

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

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

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

آموزش افزونه WPForms

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

آموزش افزونه WPForms

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

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

آموزش افزونه WPForms

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

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

آموزش افزونه WPForms

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

آموزش افزونه WPForms

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

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

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

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

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

آموزش افزونه WPForms

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

آموزش افزونه WPForms

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

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

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

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

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

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

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

آموزش افزونه WPForms

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

آموزش افزونه WPForms

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

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

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

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

آموزش افزونه WPForms

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

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

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

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

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

آموزش افزونه WPForms

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

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

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

آموزش افزونه WPForms

این قسمت لیستی را نشان می دهد که تمام فیلدهای ایمیل موجود در فرم شما را نشان می دهد. با انتخاب قسمت ایمیل یک 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 اضافی بروید.

آموزش افزونه WPForms

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

آموزش افزونه WPForms

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

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

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

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

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

آموزش افزونه WPForms

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

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

آموزش افزونه WPForms

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

<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;
}

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

آموزش افزونه WPForms

در ادامه آموزش کدهای 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 مراجعه کنید.

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

دانلود فایل
صفحه-افزونه

 

درباره ی مینا قدسی

مطلب پیشنهادی

WP Shopify

اتصال فروشگاه اینترنتی شاپیفای به وردپرس با افزونه WP Shopify

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

۱۳ دیدگاه

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

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

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

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

    • الان دوباره تست کردیم، مشکلی نیست…
      بهتره قسمت notification آموزش رو دوباره مطالعه بفرمائید.

  3. سلام
    این پیام های رو که کاربر در فیلد ها وارد میکنه یه کجا ارسال میشه..
    ایا ارسال میشه به ایمیل من ؟

    یا در سایتی در جای نشون داده میشه

    ممنون میشم در مورد توضیح بدید

    • مینا قدسی

      سلام دوست عزیز..فرمی که کاربر ارسال می کنه به صورت پیش فرض به ایمیل ادمین سایت ارسال می شه..تنظیمات مربوط به این قسمت رو میشه در بخش Notifications و فیلد Sent to Email Address تغییر داد. اگر با وجود تنظیمات درست اعلان های ایمیل برای شما ارسال نمیشه توسعه دهندگان افزونه استفاده از افزونه های SMTP رو توصیه می کنند.

      • سلام رو ز بخیر
        توسعه دهندگان افزونه استفاده از افزونه های SMTP رو توصیه می کنند.

        چی کار کنم ؟
        افزونه ی خاصی رو نصب کنم ؟

        • مینا قدسی

          سلام … WP Mail SMTP رو امتحان کنید. تیم توسعه دهنده هر دو افزونه یکی هست احتمال اینکه هماهنگی بیشتری با هم داشته باشند بیشتره. آموزش افزونه WP Mail SMTP توی سایت هست.

  4. من چطوری ازتون تشکر کنم؟

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

  6. سلام من رنگ فونت فیلدی که کاربر وارد میکنه رو چطوری میشه تغییر داد ؟

دیدگاهتان را بنویسید

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