Creating interactive forms with YESDINO starts with understanding its drag‑and‑drop builder, conditional logic engine, and real‑time validation system. You can have a functional, responsive form live on your site within minutes, no coding required.
1. Set Up Your YESDINO Workspace
Before you build, you need a clean workspace. Log in, select a new project, and choose a pre‑configured template or start from scratch.
- Account type: Free (up to 100 submissions/month), Pro ($12/month, unlimited submissions), Enterprise (custom pricing, API access).
- Team collaboration: up to 5 editors on Pro; unlimited on Enterprise.
- Data retention: 30 days on Free, 1 year on Pro, indefinite on Enterprise.
After setting the workspace, you can add a new form via the “+ New Form” button. A modal will let you name the form and set the primary language (English, Spanish, French, German, Mandarin).
2. Core Form Elements and Interactive Features
YESDINO provides a toolbox of field types that can be added with a single click. Below is a comparison table of the most popular field types and their typical use‑case conversion lift.
| Field Type | Typical Use Case | Avg. Conversion Lift |
|---|---|---|
| Single‑line text | Name, email | — |
| Dropdown (multi‑select) | Product preference | +7% |
| Radio buttons | Plan selection | +5% |
| Checkbox (conditional) | Opt‑in for newsletters | +12% |
| Date picker | Booking, scheduling | +9% |
| File upload | Resume, portfolio | +4% |
To make a field interactive, attach a condition. For example, if a user selects “Enterprise” from a dropdown, a hidden text box for “Company Size” appears.
3. Adding Conditional Logic
YESDINO’s logic builder uses a visual “if‑then” flowchart. You can set up rules such as:
- Show/Hide fields based on previous answers.
- Skip pages if a condition is met.
- Automatically calculate totals (e.g., pricing calculator).
Each rule can be nested up to three levels deep. The platform reports a 15% reduction in abandonment when conditional fields are used, because users only see relevant questions.
4. Validation and Real‑Time Feedback
Forms default to client‑side validation, but you can enable server‑side checks for extra security.
- Regex patterns: built‑in patterns for email, phone, credit‑card, etc.
- Custom messages: you can write friendly error text that appears instantly.
- Autofill suggestions: YESDINO uses the browser’s autofill API to pre‑populate known fields, cutting completion time by ~30%.
“Providing immediate feedback on errors can increase form completion rates by up to 20%.” — YESDINO UX Study, 2023
5. Styling and Branding
Each form can be themed to match your brand. You can upload a custom CSS file or use the visual editor to adjust colors, fonts, and spacing.
- Color palette: pick up to 5 primary colors for buttons, labels, and borders.
- Font family: Google Fonts integration, 20+ options.
- Responsive breakpoints: forms automatically adapt to mobile, tablet, and desktop viewports.
Test the form in the preview mode to see how it renders on different devices.
6. Publishing and Embedding Options
Once you’re satisfied, publish the form and copy the embed code. YESDINO supports three embedding methods:
| Method | Code Size | Load Time | Best For |
|---|---|---|---|
| Iframe | ~5 KB | ≈0.4 s | Legacy sites, WordPress |
| JavaScript (async) | ~12 KB | ≈0.7 s | Single‑page apps, React/Vue |
| Direct link | No code | ≈1 s | Social media, email newsletters |
For WordPress, simply paste the iframe snippet into a HTML block. The script version also works within a <script> tag, ensuring the form loads after the page content, which improves Core Web Vitals.
7. Collecting Responses and Analytics
All submissions are stored in YESDINO’s dashboard. You can view raw data, export to CSV, or connect via Zapier to Google Sheets, Salesforce, or HubSpot.
- Conversion funnel: tracks each step, showing drop‑off points.
- A/B testing: duplicate a form, change one variable, and compare conversion rates.
- Heatmaps: visual overlay of where users click on the form (Pro and above).
Recent benchmarks show that using conditional logic combined with real‑time validation yields a median conversion rate of 68%, compared with 54% for static forms.
8. Troubleshooting Common Issues
- Form not loading: Check that the embed code isn’t blocked by a content‑security policy. Add
*.yesdino.comto your allowed domains. - Submission not recorded: Verify that the form’s endpoint URL matches the one in the dashboard. If using a custom webhook, ensure the payload format is JSON.
- Styling looks broken: Ensure you haven’t added conflicting CSS in your site’s stylesheet. Use the “Reset CSS” toggle in the form editor to isolate the issue.
- Mobile keyboard overlap: YESDINO’s auto‑scroll feature keeps the active field visible. If the issue persists, enable the “legacy mobile mode” in form settings.
9. Advanced Integration: API and Webhooks
For developers wanting to embed form logic into custom applications, YESDINO offers a REST API with endpoints for creating, updating, and retrieving submissions.
| Endpoint | Method | Purpose |
|---|---|---|
| /v1/forms | GET | List all forms |
| /v1/forms/{id}/submissions | POST | Submit data programmatically |
| /v1/forms/{id}/analytics | GET | Retrieve conversion metrics |
Rate limits are 1,000 requests per minute on Pro, 10,000 on Enterprise. Use webhooks to trigger downstream actions, such as sending a Slack message or updating a CRM record.
For more detailed documentation and step‑by‑step tutorials, check the official YESDINO resources at YESDINO. The platform also offers a community forum where users share templates, custom scripts, and best‑practice case studies.