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

این گزینه های محبوب عبارتند از:

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

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

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

آشنایی با React Form Builders

فرم سازهای React ایجاد و مدیریت فرم ها را در برنامه های React آسان می کنند. از جمله ویژگی هایی که ارائه می دهند عبارتند از:

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

مدیریت حالت های فرم

فرآیند اعتبار سنجی

ارسال داده های فرم

فرم سازها مزایای مختلفی را ارائه می دهند، مانند:

باعث می شود روند توسعه سریعتر شود زیرا کدنویسی و مدیریت وضعیت کمتری وجود دارد

ارائه تعاملات براق، اعتبار سنجی واضح، و طراحی کاربر پسند

انجام کارهای روزمره مانند اعتبار سنجی

ارائه آپشن های دسترس‌پذیری برای قابل استفاده‌تر کردن فرم‌ها

فرم سازها ویژگی های مختلفی را به توسعه دهندگان ارائه می دهند، مانند:

انتخاب سازنده و پیروی از راهنمای ادغام آن

ادغام فرم بر اساس رابط سازنده (اعم از کشیدن و رها کردن یا مبتنی بر کد)

ایجاد عناصر و تعریف قوانین اعتبار سنجی، برچسب ها و انواع داده ها

نحوه واکنش فرم به تعاملات کاربر را شرح دهد

ویژگی های مختلفی که سازندگان فرم ممکن است ارائه دهند عبارتند از:

کشیدن و رها کردن، که برای کاربران غیر فنی قابل دسترسی است

سفارشی سازی کد

ترکیبی از ویرایش کد و قابلیت کشیدن و رها کردن

SurveyJS Form Builder یک کامپوننت UI منبع باز در React است که کاملاً با هر سیستم باطنی ترکیب می شود و این فرصت را می دهد که بسیاری از فرم های HTML پویا را در یک برنامه React ایجاد و سبک دهید.

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

ویژگی های SurveyJS

یک رابط کاربری گرافیکی اختصاصی برای قوانین شرطی

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

پشتیبانی از TypeScript

ادغام با هر فریم ورک باطنی (مثالی برای PHP، Node.js و ASP.NET شامل)

ایجاد تعاریف فرم JSON (شماها) در زمان واقعی

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

در بخش‌های زیر، روش‌های گام به گام برای شروع کار با مؤلفه سازنده فرم SurveyJS در یک برنامه React را پوشش خواهیم داد.

نصب SurveyJS

بسته npm survey-creator-react را نصب کنید. اولین کار این است که بسته npm survey-creator-react (کد رندر) را با استفاده از دستور زیر نصب کنید:

 npm install survey - creator - react -- save

دستور بالا مطمئن می شود که بسته survey-creator-core به طور خودکار به عنوان یک وابستگی نصب شده است.

پیکربندی استایل های SurveyJS

مرحله بعدی وارد کردن شیوه نامه Survey Creator و SurveyJS Form Library به شرح زیر است:

 import "survey-core/defaultV2.min.css" ; import "survey-creator-core/survey-creator-core.min.css" ;

پیکربندی سازنده نظرسنجی

مرحله بعدی پیکربندی مولفه Survey Creator است. کد زیر برای پیکربندی مولفه Survey Creator با مشخص کردن آپشن های آن در یک شیء پیکربندی استفاده می‌شود:

 const creatorOptions = { showLogicTab : true , isAutoSave : true } ;

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

showLogicTab زبانه منطق را در پانل تب نمایش می دهد

isAutoSave به طور خودکار طرح JSON نظرسنجی را در هر تغییر ذخیره می کند

اکنون، همانطور که در کد زیر نشان داده شده است، باید شی پیکربندی را به سازنده SurveyCreator ارسال کنیم تا Survey Creator را نمونه سازی کنیم و سپس نمونه تولید شده را به یک ثابت اختصاص دهیم که بعداً برای رندر کامپوننت استفاده می شود:

 import { SurveyCreator } from "survey-creator-react" ; export function SurveyCreatorWidget ( ) { const creator = new SurveyCreator ( creatorOptions ) ; }

رندر Survey Creator

برای رندر کردن Survey Creator، تنها چیزی که نیاز است وارد کردن SurveyCreatorComponent است، آن را در قالب قرار دهید و نمونه‌ای را که در مرحله قبل ایجاد کردیم به ویژگی creator کامپوننت ارسال کنید:

 import { SurveyCreatorComponent , SurveyCreator } from "survey-creator-react" ; export function SurveyCreatorWidget ( ) { const creator = new SurveyCreator ( creatorOptions ) ; return ( < SurveyCreatorComponent creator = { creator } / > ) }

ذخیره و بارگیری طرحواره های مدل نظرسنجی

به‌طور پیش‌فرض، Survey Creator طرح‌واره‌های مدل نظرسنجی را به‌عنوان اشیاء JSON می‌سازد، که ماندگاری اشیاء روی سرور، ذخیره به‌روزرسانی‌ها و بازیابی طرحواره‌های ذخیره‌شده قبلی را آسان می‌کند.

تنها چیزی که برای ذخیره یک شی JSON نیاز است پیاده سازی تابع saveSurveyFunc است که دو آرگومان را می پذیرد:

saveNo این یک عدد افزایشی از تغییر فعلی است.

callback . این یک تابع تماس است. هنگام فراخوانی، saveNo باید به عنوان اولین آرگومان ارسال شود، در حالی که آرگومان دوم بر اساس اعمال یا رد تغییر توسط سرور، روی true یا false تنظیم می شود.

کد زیر نحوه استفاده از تابع saveSurveyFunc را برای ذخیره طرح مدل نظرسنجی در یک حافظه محلی یا یک سرویس وب نشان می دهد:

 export function SurveyCreatorWidget ( ) { creator . saveSurveyFunc = ( saveNo , callback ) => { window . localStorage . setItem ( "survey-json" , creator . text ) ; callback ( saveNo , true ) ; saveSurveyJson ( "https://your-web-service.com/" , creator . JSON , saveNo , callback ) ; } ; } function saveSurveyJson ( url , json , saveNo , callback ) { }

جزئیات بیشتر در مورد نحوه بارگیری طرح‌واره مدل نظرسنجی JSON در Survey Creator و نحوه تحلیل طرح‌واره JSON نظرسنجی قبل از ذخیره آن هنگام اجرای سرور Node.js را می‌توانید در اینجا بیابید.

مدیریت آپلود تصاویر در SurveyJS

اضافه کردن یک لوگو یا پس زمینه به نظرسنجی یک نیاز رایج است. هنگام ایجاد نظرسنجی می‌توانیم آنها را در سرصفحه نظرسنجی یا در سؤالات Image and Image Picker اضافه کنیم، و SurveyJS انجام این کار را آسان کرده است. تنها چیزی که لازم است این است که آنها را در نظرسنجی و طرح‌واره‌های JSON به عنوان URLهای Base64 جاسازی کنید.

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

کد زیر نحوه استفاده از رویداد onUploadFile را نشان می دهد. پارامتر options.files تصاویر ارسال شده به سرور را ذخیره می کند:

 export function SurveyCreatorWidget ( ) { creator . onUploadFile . add ( ( _ , options ) => { const formData = new FormData ( ) ; options . files . forEach ( file => { formData . append ( file . name , file ) ; } ) ; fetch ( "https://example.com/uploadFiles" , { method : "post" , body : formData } ) . then ( response => response . json ( ) ) . then ( result => { options . callback ( "success" , "https://example.com/files?name=" + result [ options . files [ 0 ] . name ] ) ; } ) . catch ( error => { options . callback ( 'error' ) ; } ) ; } ) ; }

رویداد onUploadFile برای پیاده سازی آپلود تصویر استفاده می شود. پارامتر options.files آن تصاویری را که باید به سرور خود ارسال کنیم ذخیره می کند. هنگامی که سرور پیوند تصویری را برمی گرداند، روش options.callback(status, imageLink) با success به عنوان پارامتر status و پیوندی به تصویر آپلود شده به عنوان پارامتر imageLink فراخوانی می شود.

حال برای مشاهده اپلیکیشن باید npm run start در خط فرمان اجرا کنیم و http://localhost:3000/ در مرورگر باز کنیم.

سایر پیوندهای مفید SurveyJS

همچنین ممکن است این منابع SurveyJS را مفید بیابید:

کد منبع سازنده نظرسنجی در اینجا در GitHub در دسترس عموم است.

FormBuilder

FormBuilder یک کتابخانه فرم ساز React با کشیدن و رها کردن برای ایجاد فرم های وب با یک رابط وب ساده اما قدرتمند است.

در اینجا یک نسخه ی نمایشی سریع برای تجربه تمام ویژگی های FormBuilder بدون نیاز به یکپارچه سازی وجود دارد.

بسته های npm زیر FormBuilder را تشکیل می دهند:

ویژگی های FormBuilder

یک رابط وب با قابلیت کشیدن و رها کردن

طرح تطبیقی

اعتبار سنجی فرم

اجزای وب داخلی مبتنی بر کتابخانه React Suite

ادغام آسان اجزای سفارشی

فرم صادرات به JSON و فرم واردات از JSON

بین المللی سازی قدرتمند

اقدامات سفارشی

خواص قابل محاسبه

قالب ها (فرم ها در یک فرم)

ایجاد یک دمو فرم ساده با FormBuilder

برای ایجاد یک فرم آزمایشی ساده، دستورالعمل‌های بخش Getting Started در اسناد FormBuilder را دنبال می‌کنیم.

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

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

برخلاف SurveyJS – که حتی به افراد غیرتکنولوژیکی نیز اجازه می‌دهد تا تمام پیکربندی‌های فرم، از جمله رفتارشان را بدون خط کد تنظیم کنند، FormBuilder نیاز به گفت ن دستی کد برای اعمال دارد، همانطور که در تصویر زیر نشان داده شده است.

گفت ن کامپوننت FormViewer

اکنون می‌توانیم مؤلفه FormViewer را که مسئول نمایش فرم در FormBuilder است، اضافه کنیم.

FormBuilder از مؤلفه FormViewer برای نمایش فرم در پانل مرکزی استفاده می کند.

اما ابتدا باید بسته را با استفاده از این دستور نصب کنیم:

 npm install @react - form - builder / core @react - form - builder / components - rsuite

اکنون، می‌توانیم از مؤلفه FormViewer با عناصر کتابخانه React Suite برای رندر کردن فرم Application با چسباندن کد زیر در فایل App.js استفاده کنیم:

 import React from 'react' import { view } from '@react-form-builder/components-rsuite' import { FormViewer } from '@react-form-builder/core' const form = ` { "form": { "key": "Screen", "type": "Screen", "props": {}, "children": [ { "key": "RsInput 1", "type": "RsInput", "props": {} } ] } } ` function App ( ) { return < FormViewer view = { view } getForm = { _ => form } / > } export default App

 import { FormViewer , IFormViewer } from '@react-form-builder/core' import { useEffect , useRef } from 'react' import { view } from '@react-form-builder/components-rsuite' const FormJSON = ` { "version": "1", "actions": { "logValue": { "body": "console.log('FirstName', e.data.name, 'LastName', e.data.lastname)", "params": {} } }, "tooltipType": "RsTooltip", "errorType": "RsErrorMessage", "form": { "key": "Screen", "type": "Screen", "props": {}, "children": [ { "key": "RsHeader 1", "type": "RsHeader", "props": { "content": { "value": "Application Form" } }, "css": { "any": { "object": { "textAlign": "center" } } } }, { "key": "name", "type": "RsInput", "props": { "label": { "value": "First Name" }, "placeholder": { "value": "First Name" } }, "schema": { "validations": [ { "key": "required" }, { "key": "min", "args": { "limit": 3 } } ] }, "events": { "onChange": [ { "name": "validate", "type": "common" }, { "name": "logValue", "type": "code" } ] } }, { "key": "lastname", "type": "RsInput", "props": { "label": { "value": "Last Name" }, "placeholder": { "value": "Last Name" } }, "events": { "onChange": [ { "name": "validate", "type": "common" }, { "name": "logValue", "type": "code" } ] }, "schema": { "validations": [ { "key": "required" }, { "key": "min", "args": { "limit": 3 } } ] } }, { "key": "RsButton 1", "type": "RsButton", "props": { "children": { "value": "Submit" } }, "events": { "onClick": [ { "name": "validate", "type": "common" }, { "name": "logValue", "type": "code" } ] } } ] }, "localization": {}, "languages": [ { "code": "en", "dialect": "US", "name": "English", "description": "American English", "bidi": "ltr" } ], "defaultLanguage": "en-US" } ` const formName = 'Example' async function getFormFn ( name ? : string ) { if ( name === formName ) return FormJSON throw new Error ( ` Form ' ${ name } ' is not found. ` ) } function App ( ) { const ref = useRef < IFormViewer > ( null ) useEffect ( ( ) => { if ( ref . current ) { console . log ( 'Viewer' , ref . current ) } } , [ ] ) return ( < FormViewer view = { view } getForm = { getFormFn } formName = { formName } initialData = { ( { } ) } viewerRef = { ref } / > ) } export default App

در مرحله بعد باید با مراجعه به localhost:3000 در مرورگر، فرم را تأیید کنید تا فرم درخواست را مشاهده کنید.

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

تریپتو

Tripetto یک ابزار فرم است که راه حلی کامل و منحصر به فرد برای ایجاد و اجرای فرم ها و نظرسنجی ها ارائه می دهد.

Tripetto به عنوان یک برنامه SaaS، دقیقاً مانند Typeform و SurveyMonkey ارائه می شود.

عملیات اجرایی Tripetto از سه ستون اصلی تشکیل شده است:

یک فرم ساز بصری برای ایجاد فرم ها (طراح فرم)

دوندگان برای اجرای آن فرم ها (و جمع آوری پاسخ ها)

بلوک ها (انواع سوال) برای استفاده در فرم ها

یک چیز خوب در مورد Tripetto این است که ستون های در حال اجرا در بالا به عنوان اجزای کاملاً سمت مشتری در دسترس هستند.

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

همچنین، آزادی کامل در مدیریت داده هایی که Tripetto تولید یا مصرف می کند، می دهد.

Backend نیز می تواند هر چیزی که ما قصد داریم باشد.

ویژگی های تریپتو

تریپتو چگونه کار می کند

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

از جمله گزینه های موجود عبارتند از:

اما ما از برنامه وب Tripetto Studio برای ایجاد یک فرم و توضیح نحوه استفاده از Tripetto runner برای اجرای آن استفاده خواهیم کرد.

برنامه وب Tripetto Studio به هر کسی که به فرم یا نظرسنجی نیاز دارد اجازه می دهد. چه آنها به فرمی برای یک وب سایت نیاز داشته باشند یا بخواهند نظرسنجی ایجاد کنند که بتوان آن را با استفاده از یک پیوند مستقیم به اشتراک گذاشت، همه اینها با استودیو امکان پذیر است.

ایجاد یک فرم آزمایشی ساده با Tripetto

برای ایجاد یک فرم ساده، تنها کاری که باید انجام دهیم این است که به tripetto.app رفته و شروع به ساخت فرم خود کنیم.

در اینجا، ما بدون ایجاد حساب کاربری با پیروی از راهنمای اسناد، یک فرم درخواست ایجاد کرده‌ایم.

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

اکنون که فرم خود را ساخته‌ایم، آن را اجرا می‌کنیم و فرم را به گونه‌ای گسترش می‌دهیم که انواع سؤالات بیشتری را شامل شود. در اینجا اطلاعات بیشتری در مورد انجام این کار در مستندات وجود دارد.

Form.io

Form.io توسعه برنامه های کاربردی وب مترقی مبتنی بر فرم را امکان پذیر می کند. این به توسعه دهندگان اجازه می دهد تا با استفاده از رابط سازنده فرم بدون دردسر، فرم ها را به سرعت ایجاد کنند. ایجاد این فرم ها یک طرحواره JSON ایجاد می کند تا فرم ها را در برنامه پیش رونده به صورت پویا ارائه کند و به طور خودکار API را برای دریافت داده ها هنگام ارسال فرم ایجاد کند.

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

ویژگی های Form.io

برخی از ویژگی های مهم Form.io در زیر آمده است:

ارائه دهندگان OAuth

فرم های پویا

افزایش ویژگی آسان

مدیریت کاربر و احراز هویت

فرم ها و مدیریت داده ها

کنترل دسترسی مبتنی بر نقش

ایجاد خودکار API

یک رابط کشیدن و رها کردن

منطق شرطی پیشرفته

وب سایت Form.io حاوی جزئیات بیشتری در مورد ویژگی های آن است.

شروع کار با Form.io

برای شروع کار با Form.io، در اینجا مراحل اساسی وجود دارد که می توانید انجام دهید:

با پیروی از مراحل توضیح داده شده در بالا، به چیزی شبیه به شکل تصویر زیر می رسیم.

را راه اندازی کنید" loading="lazy">

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

مقایسه ای بین SurveyJS و FormBuilder

لطفاً برای مشاهده آپشن های اضافی موجود در SurveyJS و FormBuilder به مستندات مراجعه کنید.

انتخاب فرم ساز مناسب

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

در اینجا چند ویژگی استاندارد برای انتخاب نرم افزار فرم ساز مناسب برای یک کسب و کار یا پروژه وجود دارد:

کاربر پسند بودن

امکان سفارشی سازی آسان فرم ها

منطق شرطی و طیفی از انواع سؤال

ادغام آسان با سیستم های شخص ثالث

اتوماسیون فرآیندهای کاری

نسخه آزمایشی رایگان و گزینه های اصلی نسخه ی نمایشی

ابزار ویژگی های آفلاین

گزارش و تحلیل

نتیجه

فرم ها تقریباً در هر کسب و کار و صنعتی برای جمع آوری اطلاعات و بازخورد مشتریان مفید هستند. یک ابزار قدرتمند فرم ساز به ما کمک می کند تا فرم های حرفه ای را برای این منظور ایجاد کنیم. در این مقاله، چهار ابزار قدرتمند فرم ساز React را معرفی کرده‌ایم و مروری مختصر از نحوه عملکرد آن‌ها ارائه کرده‌ایم. با هر شانسی، حداقل یکی از آنها ممکن است همان چیزی باشد که شما نیاز دارید.

گزینه های دیگری که ممکن است دوست داشته باشید تحلیل کنید عبارتند از Form Builder's Amplify Studio و فرم ساز BEEKAI.

برای کسب اطلاعات بیشتر در مورد کار با فرم ها در React، کار با فرم ها در React را تحلیل کنید.

خبرکاو