ساخت فرم تماس در المنتور و ویژوال کامپوزر

ساخت فرم تماس در المنتور و ویژوال کامپوزر
  • 1401/4/15
  • گویا آی تی
  • 5

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

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

ساخت فرم تماس در المنتور

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

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

تنظیمات ساخت فرم با المنتور

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

  • تغییر نام فرم
  • ایجاد و ویرایش فیلد فرم
  • تغییر اندازه فیلد فرم
  • نمایش یا عدم نمایش لیبل فیلد و Place holder
  • ویرایش تنظیمات دکمه ارسال شامل سایز، متن، ترازبندی، جایگاه، متن و عرض دکمه
  • عملیات بعد از ارسال فرم مانند ایمیل اطلاع رسانی به افراد
  • ثبت ایمیل ارسال فرم مانند ایمیل دریافتی و ارسایل، موضوع و متن ایمیل

ساخت فرم ثبت ایمیل

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

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

ویرایش عکس و متن وردپرس

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

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

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

ساخت فرم تماس با ویژوال کامپوزر

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

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

المان فرم تماس ۷ در ویژوال کامپوزر

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

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

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

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

تنظیمات فرم تماس ۷ در ویژوال کامپوزر

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

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

ویژوال کامپوزر

تنظیمات ساخت فرم در ویژوال کامپوزر

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

فیلدها: در بخش اول می توانید فیلد جدید اضافه کنید. فیلدها را ویرایش کرده، نوع آنها را تغییر داده و برای آنها برجسب، عنوان و حتی آیکن قرار دهید.

دکمه: در این بخش متن دکمه، حالت و اندازه آن همچنین موقعیت دکمه را مشخص کنید.

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

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

آموزش وردپرس

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

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

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

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

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

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

      موفق باشید

نشانی ایمیل شما منتشر نخواهد شد.