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

معرفی

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

  1. ایجاد فرم های یک / چند صفحه ای

  2. ایجاد فیلدهای سفارشی

  3. ایجاد فیلدهای نمونه

  4. ساخت فرم های موجود

  5. سفارشی سازی ویژگی های فیلد

  6. تأیید فیلدها و فیلدهای سفارشی

  7. ثبت داده فرمی در جدول پایگاه داده

  8. ایجاد مدل فرم


1.ایجاد فرم های یک / چند صفحه ای

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


ویرایش و پیکربندی فرم

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

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

2.1.1.   گزینه های فرم

گزینه های فرم ساز: می توانید فرم جدیدی ایجاد کرده و یا از فرم های موجود استفاده کنید.

  1. گزینه های عملیات سرور : می توانید عملیات سرور جدیدی ایجاد کرده و یا از فرم های موجود استفاده کنید.

  2. نام فرم: این یک فیلد ضروری است که بدون آن نمی توانید ادامه دهید. این نام فرم شماست.

  3. صفحه پیام تشکر: این یک فیلد اجباری است که باید URL را در آن وارد کنید تا هنگام ثبت فرم نمایان شود.( نکته: صفحه قدردانی باید URL از پیش تعیین شده ای داشته باشد در غیر اینصورت خطای 404: صفحه ای یافت نشد رخ خواهد داد.)

  4. صفحه کل: این فیلد تعیین می کند که فرم شما تک یا چند صفحه ای خواهد بود. با وارد کردن عدد 1 فرم شما تک صفحه ای خواهد بود.

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

2.2.  ایجاد فرم چند صفحه ای

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

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

گام دوم: حال صفحه ای را که می خواهید در آن فیلد اضافه کنید انتخاب کنید.

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

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


3.   ایجاد فیلدهای رایج

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

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

3.1.   فیلدهای متن

1. متن: این فیلد به شما کمک می کند تا بتوانید هرگونه متنی را اعم از نام و یا متون کوتاه وارد کنید.

2. ناحیه متنی: این فیلد به شما کمک می کند تا بتوانید متون طولانی را که روزانه با آن ها مواجه هستید مانند آدرس، وارد کنید زیرا ویژگی هایی دارد که می تواند متون را طولانی تر کند.

3. شماره: در این فیلد تنها قادر خواهید بود تا شماره وارد کنید و ورود الفبا در آن ممکن نیست.

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

5. ایمیل: این فیلد با فیلد ایمیل داخلی html5 تأیید شده است که امکان این را می دهد تا داده ای که کاربر در فیلد وارد می کند، تنها محدود به فرمت ایمیل باشد. 

6. رمز عبور: این فیلد به شما اجازه می دهد رمز عبور خود را وارد و با ورود مجدد رمز، آن را تأیید کنید. در این حالت چنانچه کاربر رمزهای وارد شده را عین هم وارد نکرده باشد فیلد خطا  داده و فرم تأیید نخواهد شد.

7. URL: این فیلد به کاربر اجازه می دهد تا بتواند تنها داده های حاوی URL را وارد کند.

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

9.  تاریخ و زمان: این فیلد امکان انتخاب زمان را نیز مانند تاریخ می دهد.

10. بارگذاری فایل: این فیلد به شما اجازه می دهد تا بتوانید فایل خود را در سرور پایگاه داده نوع بیس 64 بارگذاری کنید. 

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

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

3.2. فیلدهای انتخابی

1. رادیویی: دکمه رادیویی امکان این را فراهم می کند تا از بین گزینه های موجود تنها یک گزینه را بتوان انتخاب کرد. مثلاً در مورد جنسیت، نمی توان چندین جنسیت را انتخاب کرد.

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

3. بولین: این فیلد به مشتری امکان می دهد تا بین دو گزینه (مثلاً: بله/خیر، درست/ نادرست و...) انتخاب کند.

4.  ایجاد فیلدهای الگو

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

برای افزودن فیلد الگو، مراحل زیر را دنبال کنید:

گام 1: وارد اسنیپت و سپس سفارشی سازی » افزودن فیلد الگو (M20/M2m) شوید. 

گام 2: می توانید در الگوی پاپاپ مدل پایگاه داده خود را انتخاب کنید.

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

 

گام 4: روی ذخیره کلیک کنید و از این پس می توانید داده های مختلف را از لیست داده ها انتخاب کنید.

5.  ساخت فرم موجود

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

برای ساخت از فرم موجود مراحل زیر را دنبال کنید:

گام 1: وارد وب سایت » ویرایش شده، اسنیپت فرم ساز را انتخاب کرده و درگ و دراپ کنید. 

گام 2: از بین گزینه های فرم ساز، گزینه استفاده از فرم موجود را انتخاب کنید.

گام 3: فرمی را که می خواهید از بین گزینه ها تبدیل کنید، انتخاب نمایید.

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

6.  سفارشی سازی مشخصه های فیلدها 

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

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


گزینه های رایج ورود عناصر

  1. نام: این مشخصه برای ورود نام مشخصه به کار می رود.

  2. متن راهنما: از این مشخصه می توان برای تنظیم ویژگی عنوان استفاده کرد.

  3. کلاس: با کمک ویژگی کلاس، می توانید هر کلاسی برای css ایجاد کنید.

  4. مقدار: با ویژگی مقدار، می توانید برای هر عنصر مقدار تنظیم کنید.

  5. تأیید سفارش: این ویژگی به شما اجازه می دهد تا بتوانید الگویی را که عموماً به شکلی با قاعده نوشته می شود، اضافه کنید و بنابراین می توانید هر یک از فیلدهای سفارشی را تأیید کنید. مثلا: کد پستی، محدوده سنی، شماره تلفن و غیره.

  6. نگه دارنده فضای متن: نگه دارنده فضای متن، متنی است که هنگامی ظاهر می شود که فیلد هیچ مقداری ندارد.

  7. مکس: این ویژگی حداکثر طول متن فیلد را مشخص می کند و تعداد کارکترهای ورودی در فیلد را محدود می کند.

  8. فقط خواندنی: این ویژگی باعث می شود فیلد تنها قابل خواندن باشد و امکان تغییر مقدار آن را نمی دهد.

  9. اجباری: این ویژگی، پر کردن فیلد را اجباری می کند و کاربر نمی تواند بدون پر کردن آن وارد مرحله بعدی شود.

  10. سرعنوان: این ویژگی فیلد را مخفی می کند و اگر به درستی تنظیم شود، برای کابر قابل رؤیت نخواهد بود.

  11. حاشیه چپ: حاشیه سمت چپ هر عنصر را تنظیم می کند. شما می توانید مقادیری بین 0px, 2px, 4px, 8px, 16px, 32px, 64px, 128px را تنظیم کنید.

  12. حاشیه بالا: حاشیه بالای هر عنصر را تنظیم می کند. شما می توانید مقادیری بین 0px, 2px, 4px, 8px, 16px, 32px, 64px, 128px را تنظیم کنید.

  13. حاشیه راست: حاشیه سمت راست هر عنصر را تنظیم می کند. شما می توانید مقادیری بین 0px, 2px, 4px, 8px, 16px, 32px, 64px, 128px را تنظیم کنید.

  14. حاشیه پایین: حاشیه پایین هر عنصر را تنظیم می کند. شما می توانید مقادیری بین 0px, 2px, 4px, 8px, 16px, 32px, 64px, 128px را تنظیم کنید.

گزینه های ناحیه متنی:

  1. ردیف ها: ردیف های ناحیه متنی را به منظور ورود متون طولانی تنظیم کنید. 

گزینه های شماره:

  1. کمینه: تنظیم ویژگی حداقلی فیلد عدد، مقدار حداقلی هر عنصر را مشخص می کند.

  2. بیشینه: تنظیم ویژگی حداکثری فیلد عدد، مقدار حداکثری هر عنصر را مشخص می کند.

  3. مرحله: تنظیم ویژگی مرحله ای فیلد عدد، فواصل عددی قانونی را مشخص می کند.

گزینه های انتخاب فیلد:

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

7.  تأیید فیلد و فیلد سفارشی

1.اجباری: برای تنظیم تأیید اجباری وارد قسمت سفارشی سازی » گزینه ها » تیک زدن گزینه اجباری شوید.

2. فقط خواندنی: برای تنظیم تأیید فقط خواندنی وارد قسمت سفارشی سازی » گزینه ها » تیک زدن فقط خواندنی شوید.

3. پنهان: برای تنظیم تأیید پنهان وارد قسمت سفارشی سازی » گزینه ها » تیک زدن مخفی شوید.

4. تأییدیه سفارش: برای تنظیم تأیید سفارش وارد قسمت سفارشی سازی » گزینه ها » ورود حالت با قاعده تأییدیه سفارش شوید.

8.  ثبت داده فرم در جدول پایگاه داده

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

9.  ایجاد مدل فرم 

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

گام 1: روی ایجاد مدل که در زیر نشان داده شده کلیک کنید.

گام 2: برای نشان دادن مدل، منو ایجاد کنید. روی ایجاد منو کلیک کنید.

گام 3: برای منو نامی انتخاب کرده و مسیر منو را انتخاب کنید. روی ایجاد منو کلیک کنید.

10. ایجاد عملیات سرور

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

گام 1: روی ایجاد عمل مانند عکس پایین کلیک کنید.

گام 2: یک مدل بالا خواهد آمد. جزئیان آن را پر کنید.

گام 3: روی ذخیره کلیک کنید. تمام تنظیمات انجام شد. می توانید از ایجاد فرم ها لذت ببرید.