__wf_reserved_heredar
__wf_reserved_heredar
__wf_reserved_heredar
¿Qué hay de nuevo?
Producto
¿Quién usa Directual?
Qué se puede construir en Directual
Aprenda Directual
¿Por qué Directual?
Recursos
Jurídico
Empresa

Building interactive web-forms

There are a lot of form-builders on the market, but almost all of them merely solve such problems as online response processing, setting up a user-based access and integrating with third-party systems. Today we are introducing new component for Directual web-page builder—interactive form—which answers to these challenges and follows all the best practices for online form-builders.

Essential features of a great online form builder

  • Form apps are pretty similar. People got used to creating surveys, feedback forms and order pages using those constructors. There are following ‘must haves’ of a great form builder:
  • Adding different field options: free form text boxes, dropdowns, dates, radio buttons, check boxes, range sliders and more;
  • Basic theming (including both light and dark themes);
  • Setting certain fields as required, hidden or optional;
  • Configuring restrictions on data types (emails, positive numbers, etc.);
  • Having a mobile-friendly view;
  • Embedding the form to any website.

All these features have been included into Directual form component (you can find the detailed description in the Documentation). Have a look at the example of Directual-based form, embedded right here:

Common problems of form builders

The typical way, form builders work, is rather straightforward. You create fields, labels, questions, tips and validation rules in a visual environment. Then, the submissions are collected in a spreadsheet-like view or saved in a third-party app through an integration. Also, the user can be notified about new submissions by email.

Difficulties appear when you want a form to be a consistent part of an application. Most of widely used form builders get stuck with the following business needs:

  • Including role-based access;
  • Adjusting form parameters depending on some data, including data from external systems;
  • Online response processing (e.g. complex validation, checking the data from the database, some calculations, etc.).

There was only one way to cope with such tasks—to code the form traditionally—long and expensive. Actually—there has been the one way, until today. Directual form component allows you to easily meet all the needs mentioned above! Let’s figure out how it works!

Directual supports conformity with data and role models

Thanks to powerful backends features, Directual form turns out to be highly customisable.

  • All the data is moved through API-endpoints. That helps to keep respondents' private data secure. Nobody can read or write the data which is not allowed to be accessed via API.
  • There are two levels of role model configuration. On the one hand you can require authorisation on the web-page, on the other hand you can check the user’s session parameters on API-layer.
  • Often dropdowns in the form have to be connected with directory from the database (for example, user choses a city, or a few cities). Form component automatically renders dynamic dropdowns for fields type of link and arrayLink with a quick search option.

Directual adds online response processing

Another case to solve for Directual form builder is a synchronical response processing. This use-case includes the following applications:

  • Calculating online. For example, leasing or debt calculator;
  • Checking the database. For example, password recovery: we can check whether the email is in the base or isn’t;  
  • Requesting the API. You’ll find the example further.

Have a look at the following form, where you can check the weather in your city. Here it is:

There is a synchronic scenario under the hood, which calls the OpenWeatherMap API, and returns the current temperature and humidity. This is it:

Directual scenario

Conclusion

Form builders used to cover such simple tasks as surveys. But almost any app contains forms. And the form within an app has to be closely integrated with it. That matches the Directual Design philosophy—the combination of the powerful backend, interconnected components and ability to build new sophisticated React-based UI.

P.S. Directual Form is an open-source React-component. Feel free to investigate its code on GitHub.

FAQ

What is a webform?
What is a webform?

A webform, web form or HTML form on a web page allows a user to enter data that is sent to a server for processing. Forms can resemble paper or database forms because web users fill out the forms using checkboxes, radio buttons, or text fields. For example, forms can be used to enter shipping or credit card data to order a product, or can be used to retrieve search results from a search engine.

Featured blog posts

Подробное руководство по продуктивности для no-code разработчиков

Откажитесь от бесполезных показателей производительности и стимулируйте энтузиазм разработчиков и реальные результаты! 🚀 Узнайте, как повысить эффективность команды и уменьшить стресс.

October 25, 2024
by
Павел Ершов

Полное руководство по no-code системам управления инцидентами

Неполадки случаются постоянно, поэтому без системы управления инцидентами (IMS) отслеживание проблем превращается в настоящий ад. Этот гайд поможет вам разобраться с ситуацией правильным образом.

Low-code против No-code: Кто победитель?

Откажитесь от кода и присоединяйтесь к революции low-code/no-code! Получите возможность быстрой разработки приложений, автоматизации процессов и инноваций, не прилагая особых усилий (и не превышая бюджет). Перетаскивание, создание и возможность удивлять с помощью простого способа создания кастомных приложений.

Сертификация Directual: Станьте официальным экспертом и предлагайте услуги на платформе

Нанимайте разработчиков для реализации своих проектов и предлагайте собственные услуги для реализации чужих! Все это прямо в Directual. Заходите, чтобы узнать больше.

September 21, 2024
by
Павел Ершов

Чат-боты WhatsApp для бизнеса: Практическое руководство на 2024 год

WhatsApp — это поле битвы за привлечение клиентов. Изучите реальные истории успеха, узнайте, как создать свой собственный чатбот, и оставайтесь в курсе перспективных тенденций.

Топ-20 инструментов для создания чат-ботов с искусственным интеллектом для мира no-code

ИИ чат-боты! Узнайте, кто в тренде, кто нет, и как создать своего собственного помощника с ИИ, чтобы добиться максимальной продуктивности с no-code.

Готовы создать
приложение своей мечты?

Присоединяйтесь к 22 000+ разработчикам на Directual и создавайте проекты быстрее и дешевле. Визуальный интерфейс упрощает разработку, а мощные базы данных и бэкенд делают масштабирование легким и эффективным.