چگونه یک فرم‌ساز بسازیم

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

آیا اصلاً به فرم‌ساز نیاز دارید؟

فرم‌ساز پروژه بزرگ‌تری از یک فرم است، چون هر نوع فیلد باید در ویرایشگر، فرم عمومی، اعتبارسنجی، ذخیره‌سازی، اعلان و خروجی‌گیری درست کار کند.

یک فرم‌ساز به چه چیزهایی نیاز دارد

تعریف فرم‌ها

هر فرم را به‌صورت فهرستی از فیلدها ذخیره کنید، با داده ساختاریافته (JSON در یک ستون Postgres خوب کار می‌کند). یک فیلد ممکن است این شکلی باشد:

• id — یک شناسه ثابت که هرگز عوض نمی‌شود، حتی اگر برچسب عوض شود
• type — متن، ایمیل، عدد، متن بلند، انتخاب، چک‌باکس، تاریخ، فایل
• label و متن راهنما
• required، min / max، انواع فایل مجاز
• گزینه‌ها برای فیلدهای انتخابی
• ترتیب و در صورت نیاز یک شرط («فقط نشان بده اگر فیلد X برابر Y بود»)

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

پاسخ‌ها

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

صفحه‌ها

• فهرست فرم‌ها با تعداد پاسخ‌ها.
• ویرایشگر — افزودن، مرتب‌سازی و پیکربندی فیلدها، با یک پیش‌نمایش زنده کنارش.
• تنظیمات — پیام تأیید یا تغییر مسیر، ایمیل‌های اعلان، تاریخ باز و بسته شدن، سقف تعداد پاسخ.
• فرم عمومی در لینک اختصاصی خودش، و نسخه قابل امبد برای وب‌سایت‌های دیگر.
• جدول پاسخ‌ها با جستجو، وضعیت، نمای جزئیات و خروجی CSV.

تصمیم‌ها و مصالحه‌ها

نسخه‌بندی. یک نفر بعد از ۲۰۰ پاسخ «Phone» را به «شماره موبایل» تغییر می‌دهد. اگر پاسخ‌ها با شناسه فیلد ذخیره شوند و هر پاسخ نسخه فرم را ثبت کند، پاسخ‌های قدیمی همچنان درست نمایش داده می‌شوند. بدون این کار، داده‌هایتان بی‌صدا به هم می‌ریزند.

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

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

اعلان‌ها. «وقتی کسی ارسال کرد به من ایمیل بده» انتظار معمول است. برای آن به یک ارائه‌دهنده ایمیل و کلید API نیاز دارید؛ نحوه ارسال ایمیل از اپ را ببینید.

اسپم. یک فرم عمومی به‌زودی توسط ربات‌ها پیدا می‌شود. از یک فیلد تله (honeypot؛ برای افراد پنهان است و ربات‌ها آن را پر می‌کنند)، محدودیت نرخ برای هر IP، اعتبارسنجی در سرور و در صورت نیاز یک سرویس CAPTCHA استفاده کنید.

امبد. امبد با iframe ساده‌ترین و امن‌ترین راه برای گذاشتن فرم روی وب‌سایت دیگری است. امبد با اسکریپت بومی‌تر به نظر می‌رسد، اما ساخت و امن‌سازی آن سخت‌تر است.

منطق شرطی. «این فیلد را فقط نشان بده اگر…» محبوب است، اما تعداد آزمون‌ها را چند برابر می‌کند. وقتی اصول پایه محکم شد آن را اضافه کنید.

یک پرامپت اولیه که کار می‌کند

یک اپ وب فرم‌ساز برای تیم من بسازید. کاربران واردشده فرم‌ها را در یک ویرایشگر با پیش‌نمایش زنده می‌سازند. انواع فیلد: متن کوتاه، متن بلند، ایمیل، عدد، تاریخ، انتخاب تکی، چک‌باکس‌ها و آپلود فایل. هر فیلد یک شناسه ثابت، برچسب، متن راهنما، پرچم اجباری بودن و قواعد مخصوص نوع (حداقل/حداکثر، گزینه‌ها، انواع فایل مجاز و سقف ۱۰ مگابایت) دارد. تعریف فرم را به‌صورت JSON با شماره نسخه ذخیره کنید که با هر انتشار زیاد می‌شود. هر فرم یک لینک عمومی و کد امبد iframe دارد. پاسخ‌ها را در سرور بر اساس نسخه منتشرشده اعتبارسنجی کنید، پاسخ‌ها را با شناسه فیلد و نسخه فرم ذخیره کنید و فایل‌های آپلودی را در فضای ذخیره‌سازی خصوصی قرار دهید. یک فیلد تله مخفی و محدودیت نرخ برای هر IP اضافه کنید. صاحبان فرم یک جدول پاسخ‌ها با وضعیت (جدید، خوانده‌شده، بایگانی)، نمای جزئیات و خروجی CSV ببینند. همه چیز را در یک پایگاه داده ذخیره کنید. منطق شرطی و اعلان ایمیل را برای بعد بگذارید.

مراحل ساخت

1. ویرایشگر و تعریف. فرمی با همه انواع فیلد بسازید و با عامل JSON ذخیره‌شده را ببینید. آیا تمیز و پایدار است؟
2. فرم عمومی. آن را روی گوشی پر کنید. پیام‌های اعتبارسنجی و صفحه تأیید را بررسی کنید.
3. اعتبارسنجی در سرور. از عامل بخواهید یک پاسخ را که قواعد را می‌شکند مستقیم به سرور بفرستد، بدون صفحه. باید رد شود.
4. نسخه‌بندی. بعد از چند پاسخ، فیلدها را تغییر نام دهید و ترتیبشان را عوض کنید. پاسخ‌های قدیمی باید همچنان پاسخ‌های درست را نشان دهند.
5. آپلودها. یک فایل خیلی بزرگ و یک فایل با نوع اشتباه امتحان کنید. مطمئن شوید که یک غریبه نمی‌تواند با حدس زدن لینک، فایل آپلودشده را باز کند.
6. جدول پاسخ‌ها و خروجی. خروجی CSV را با ویرگول، خط جدید و حروف با لهجه در پاسخ‌ها بررسی کنید.
7. اعلان‌ها، امبد، منطق. هرکدام را یکی‌یکی اضافه کنید.

اشتباه‌های رایج

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

وقتی یک محصول آماده بهتر است

ابزارهای فرم میزبانی‌شده عالی و برای بیشتر نیازها ارزان‌اند. آن‌ها امبد، اسپم، پرداخت، یکپارچه‌سازی و دسترس‌پذیری را در ده‌ها نوع فیلد قبلاً حل کرده‌اند. اگر تیم شما فقط به فرم نیاز دارد، از یکی از آن‌ها استفاده کنید — جایگزین‌های Typeform و جایگزین‌های Google Forms را ببینید.

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

ساخت با Mythex

در Mythex فرم‌ساز را در گفتگو توصیف می‌کنید و ویرایشگر و فرم عمومی را کنار هم در پیش‌نمایش زنده آزمایش می‌کنید. Mythex یک پایگاه داده اختصاصی برای تعریف فرم‌ها و پاسخ‌ها اضافه می‌کند و وقتی اپ به آپلود نیاز داشته باشد، فضای ذخیره‌سازی فایل را خودکار فعال می‌کند (در طرح رایگان تا ۱ گیگابایت). ایمیل‌های اعلان از طریق ارائه‌دهنده‌ای می‌گذرند که با کلید خودتان وصل می‌کنید. اپ را روی یک لینک mythex.ai منتشر کنید، یا در طرح Pro روی دامنه خودتان، و لینک‌های فرم عمومی از آنجا کار می‌کنند.

پرسش‌ها