June 5, 2019 at 15:01How to make web forms on the site convenient and safe: development tools and constructors
Assistant Project Manager stepFORM Artem Petrov told how to make web forms user-friendly, protect them from spam and listed the main ways to develop them.
Web forms are a simple tool and one of the main sources of leads on the site. With its help it is possible to build a good stream of applications from any page. In order for the web form to bring a steady stream of profit, rather than a weak trickle of non-targeted applications, it is important to make it convenient for visitors. And do not forget about security if you do not want to receive spam instead of leads.
Use the power of Web Forms 2.0.
Web forms have always required improvements. Standard HTML tools could not provide a solution to many tasks of developers. JavaScript came to the rescue with the help of which you can manipulate the contents of the page as you like. A similar situation was with CSS. Many animations and visual effects implemented using scripts.
With the advent of HTML5 and CSS3, web development capabilities have expanded. To solve many standard tasks, you no longer had to use scripts. HTML5 has brought new features to web forms, including the Web Forms 2.0 specification. The developers were able to use the new values for the attribute
Many sites, such as hotel reservations or taxis, use widgets to select the date and time. In HTML5, you can implement a simple calendar using the fields:
To solve many problems, it is enough to use a regular text field. But where you need to enter an exact numerical value, you can use the type field
There are many JavaScript libraries that allow you to create sliders or sliders with a choice of values from a given range. You can now make a simple slider using HTML. Example:
The most important information that is collected through forms is telephone and email. Web Forms 2.0 provides fields with these types. Example:
HTML5 has fields for choosing colors. You can specify any values in the hexadecimal number system and prompt users to select. Example:
The attribute
HTML5 has other useful attributes for forms.
Web Forms 2.0 has pushed web form development forward. Today the anatomy of web forms has become much more complicated. Fields and drop-down lists can be interconnected and loaded dynamically when selected, and on the server side there is some system for processing incoming requests with sending to many communication channels (email, sms, CRM, instant messengers). Therefore, HTML is still not enough to solve non-standard tasks.
Validate data. This will protect you from entering unwanted information, help to avoid hacking the site through the form. Validation can be performed not only on the server side, but also on the client side. It is important that validation is always performed on the server side, because the client side is easy to bypass by simply disabling JavaScript processing in the browser.
The main and one of the easiest ways to protect forms from spam is Captcha. It is quite enough not to be spammed. In some cases, you can resort to other tricks for recognizing and protecting against spam:
Dynamic generation of forms using JavaScript is one of the good ways to prevent spam bots from attacking your mailbox. After all, as a rule, they are designed taking into account that all form fields are pre-displayed on the page.
Another simple way is to place a hidden field with some name, for example:
Site users do not see the field and do not fill it. And the spam bot will automatically fill in all the fields so that the form submission is successful. If the hidden field turned out to be filled, then the bot will fill out the form, and data from it can be rejected.
As a rule, spam bots fill out a form in seconds, which a normal user cannot do. That is why in order to identify the bot it is enough to check how much time has passed since the moment of entering the page and submitting the form.
Many services, for example, Akismet, allow you to filter spam based on the data you entered. If you used to spammer on other sites, the service will help to identify this and will not allow the sending of unwanted information.
All of these protection methods can be used in combination - this will increase the degree of protection against different types of spam bots.
The development of development tools has made it easier to create forms. Regular HTML has been replaced by JSON Schema-based form content generation.
It looks something like this. Json is formed with fields, their types, attributes and data:
The output generates a form of the following form:
JSON Schema solves several problems:
The following are specific tools and libraries that can help simplify the development of web forms.
JavaScript client library for generating Bootstrap 3 forms based on JSON schemas. Generated forms include client-side data validation.
A simple React component to create an HTML form from a JSON schema using Bootstrap semantics.
React library that will help you figure out how to get values from a state, implement validation, processing form submission, error messages
The component generates a schema-based form for Vue.js. Contains built-in validators, 21 field types, Bootstrap templates, custom styles and can be expanded using custom fields.
AngularJS set of directives for generating Bootstrap 3 forms from JSON Schema. The tool allows you to adjust the order and type of fields, use the wysiwyg editor, and contains tools for selecting the date and color. Many add-ons are also available to expand the functionality.
You can connect the finished form to an external API to send data by email. The service does not require the use of PHP or JavaScript, you just need to set the fields. This is especially useful for sites that consist of static pages.
The tool takes the approach of creating forms using JSON schemas. Includes data binding, validation, and custom styles for custom widgets. Works with Redux and React / Angular support.
An unusual solution is a form generation program that is installed on a PC. Creates forms with different design Modern Flat, Metro, Bootstrap, Solid. It generates not only HTML, but also a PHP handler for sending data from the form.
A few years ago, complex forms had to be developed manually. Now WYSIWYG technology has appeared, which allows you to create forms in visual mode without using code. On its basis, numerous designers have been created. Let's look at the most famous.
It helps to create forms (but is more suitable for surveys) in a simple interface, collect data in tables and view statistics on answers to user questions. Forms can only be used by reference, they cannot be put on the site. There is also no way to add your own styles and scripts. Nevertheless, it is a good tool to interview employees or arrange an appointment for an event.
A tool with wider functionality than Google forms. Allows you to create interactive forms and polls with non-standard logic of transition between fields. The best tool for marketers when you need to test an idea or collect contacts for newsletters.
Constructor with a simple interface for creating online forms and profiles. Allows you to add various calculations to the forms. This is convenient for forms that help the user to independently calculate the cost of a product or service according to the selected parameters. The created forms can be installed on the site in the form of an interactive widget, used by reference in social networks and instant messengers. The tool allows you to add your own scripts and css code using a special widget.
Helps create creative and personalized forms for any purpose with a simple drag and drop mechanism. The service offers personalization and branding tools, allows you to edit custom css and add scripts.
The forms created in the service can be added to the site in the standard way or in the form of a floating button - the user points to it and sees the form. In the tool, you can configure access rights. For example, so that your employees can view and comment on incoming applications, but cannot change the contents of the form itself.
The direction still exists, but it becomes more difficult to sell individual development - you have to compete with the designers. It is necessary to prove to the client why he should order development from you, and not use the constructor.
It can take a long time to create a web form, depending on complexity. Especially if you need to integrate the form with payment aggregators, collect statistics, add requests to CRM and much more. In this case, it is easier for the developer to take a ready-made set of modules or make it on the designer. As a rule, designers have ready-made integration of third-party services that are easily connected. Thanks to this, the developer can focus on creating the form itself, rather than its components.
Designers have far from all the necessary features. Therefore, many allow the use of custom code in forms and provide open APIs so that webmasters can refine the functionality. Therefore, some developers make forms for their customers based on designers. There are pluses for all sides: developers bring new customers to designers, offer their services in return and do not waste time developing similar functionality. It is logical that they complement each other.
Often, developers finish the appearance of the form: the arrangement of elements and blocks. After all, each client wants individuality, so that his form is not stereotyped and does not resemble the others. Sometimes developers have to connect little-known services that only a specific client uses. For example, its own CRM or email distribution server.
Form designers and custom form design are slightly different things. A large company can afford to set aside or hire a developer if it needs some kind of confused web form. For example, a hotel booking form with a choice of cities and a multitude of parameters, payment acceptance and CRM integration. It is more profitable for small and medium-sized businesses to make an inexpensive form on the designer and accept customer applications. Therefore, designers will not completely displace form developers from the market.
HTML 5, along with the Web Forms 2.0 specification, although contributed to the development of forms, still cannot replace JavaScript. JSON Schema allowed working with the form content as efficiently as possible and dynamically generating the entire field structure. In addition to development tools, there are a lot of convenient services for non-programmers.
Any solution can be used, depending on the needs of the business and budget. The main thing is that the forms are user-friendly and safe - protected from spam bots and hacking the site through the fields.
Netology courses on the topic:
Web forms are a simple tool and one of the main sources of leads on the site. With its help it is possible to build a good stream of applications from any page. In order for the web form to bring a steady stream of profit, rather than a weak trickle of non-targeted applications, it is important to make it convenient for visitors. And do not forget about security if you do not want to receive spam instead of leads.
How to improve web forms for users
Use the power of Web Forms 2.0.
Web forms have always required improvements. Standard HTML tools could not provide a solution to many tasks of developers. JavaScript came to the rescue with the help of which you can manipulate the contents of the page as you like. A similar situation was with CSS. Many animations and visual effects implemented using scripts.
With the advent of HTML5 and CSS3, web development capabilities have expanded. To solve many standard tasks, you no longer had to use scripts. HTML5 has brought new features to web forms, including the Web Forms 2.0 specification. The developers were able to use the new values for the attribute
type. To offer users convenient web forms, you can use:Date and time
Many sites, such as hotel reservations or taxis, use widgets to select the date and time. In HTML5, you can implement a simple calendar using the fields:
- date - year, month and day;
- datetime - year, month, day, hour, minute, second, and also time zone (outdated type, it is recommended to use datetime-local);
- datetime-local - analog of datetime, without a time zone;
- month - year and month;
- week - year and week number;
- time - time in hours, minutes, seconds, fractions of seconds.
Numerical counter
To solve many problems, it is enough to use a regular text field. But where you need to enter an exact numerical value, you can use the type field
number. Its attributes min and max determine the minimum and maximum value, and step - the step. Example:Slider
There are many JavaScript libraries that allow you to create sliders or sliders with a choice of values from a given range. You can now make a simple slider using HTML. Example:
Выберите значение от 0 до 50:
Email and Phone
The most important information that is collected through forms is telephone and email. Web Forms 2.0 provides fields with these types. Example:
Color selection
HTML5 has fields for choosing colors. You can specify any values in the hexadecimal number system and prompt users to select. Example:
Выберите цвет элемента:
Patterns
The attribute
pattern allows you to check the input of data into the form. Example:Other useful attributes
HTML5 has other useful attributes for forms.
- The attribute
placeholderallows you to enter text that is displayed when the field is empty and disappears with focus. - The attribute
autofocusautomatically puts focus on the field after the page loads. - The attribute
requiredmarks that the field is required. - The attribute
autocompleteincludes autocompletion of the form (remembers previously entered data). Disabled by setting valueoff: autocomplete="off"
Web Forms 2.0 has pushed web form development forward. Today the anatomy of web forms has become much more complicated. Fields and drop-down lists can be interconnected and loaded dynamically when selected, and on the server side there is some system for processing incoming requests with sending to many communication channels (email, sms, CRM, instant messengers). Therefore, HTML is still not enough to solve non-standard tasks.
How to protect web forms from spam
Validate data. This will protect you from entering unwanted information, help to avoid hacking the site through the form. Validation can be performed not only on the server side, but also on the client side. It is important that validation is always performed on the server side, because the client side is easy to bypass by simply disabling JavaScript processing in the browser.
The main and one of the easiest ways to protect forms from spam is Captcha. It is quite enough not to be spammed. In some cases, you can resort to other tricks for recognizing and protecting against spam:
Dynamic generation of forms using JavaScript is one of the good ways to prevent spam bots from attacking your mailbox. After all, as a rule, they are designed taking into account that all form fields are pre-displayed on the page.
Another simple way is to place a hidden field with some name, for example:
Site users do not see the field and do not fill it. And the spam bot will automatically fill in all the fields so that the form submission is successful. If the hidden field turned out to be filled, then the bot will fill out the form, and data from it can be rejected.
As a rule, spam bots fill out a form in seconds, which a normal user cannot do. That is why in order to identify the bot it is enough to check how much time has passed since the moment of entering the page and submitting the form.
Many services, for example, Akismet, allow you to filter spam based on the data you entered. If you used to spammer on other sites, the service will help to identify this and will not allow the sending of unwanted information.
All of these protection methods can be used in combination - this will increase the degree of protection against different types of spam bots.
Form Development Tools
The development of development tools has made it easier to create forms. Regular HTML has been replaced by JSON Schema-based form content generation.
It looks something like this. Json is formed with fields, their types, attributes and data:
{
"schema": {
"message": {
"type": "string",
"title": "Сообщение"
},
"author": {
"type": "object",
"title": "Автор",
"properties": {
"name": {
"type": "string",
"title": "Имя"
},
"gender": {
"type": "string",
"title": "Пол",
"enum": [ "male", "female", "alien" ]
},
"magic": {
"type": "integer",
"title": "Магический номер",
"default": 42
}
}
}
}
}The output generates a form of the following form:
JSON Schema solves several problems:
- Save time on form development
- reduce the total amount of code;
- make forms functional flexible;
- Define a structure understandable to all developers.
The following are specific tools and libraries that can help simplify the development of web forms.
Json form
JavaScript client library for generating Bootstrap 3 forms based on JSON schemas. Generated forms include client-side data validation.
React JsonSchema Form
A simple React component to create an HTML form from a JSON schema using Bootstrap semantics.
Formik
React library that will help you figure out how to get values from a state, implement validation, processing form submission, error messages
Vue form generator
The component generates a schema-based form for Vue.js. Contains built-in validators, 21 field types, Bootstrap templates, custom styles and can be expanded using custom fields.
Angular Schema Form
AngularJS set of directives for generating Bootstrap 3 forms from JSON Schema. The tool allows you to adjust the order and type of fields, use the wysiwyg editor, and contains tools for selecting the date and color. Many add-ons are also available to expand the functionality.
Formspree
You can connect the finished form to an external API to send data by email. The service does not require the use of PHP or JavaScript, you just need to set the fields. This is especially useful for sites that consist of static pages.
JSON Forms
The tool takes the approach of creating forms using JSON schemas. Includes data binding, validation, and custom styles for custom widgets. Works with Redux and React / Angular support.
Formoid
An unusual solution is a form generation program that is installed on a PC. Creates forms with different design Modern Flat, Metro, Bootstrap, Solid. It generates not only HTML, but also a PHP handler for sending data from the form.
Form Constructors
A few years ago, complex forms had to be developed manually. Now WYSIWYG technology has appeared, which allows you to create forms in visual mode without using code. On its basis, numerous designers have been created. Let's look at the most famous.
Google forms
It helps to create forms (but is more suitable for surveys) in a simple interface, collect data in tables and view statistics on answers to user questions. Forms can only be used by reference, they cannot be put on the site. There is also no way to add your own styles and scripts. Nevertheless, it is a good tool to interview employees or arrange an appointment for an event.
Typeform
A tool with wider functionality than Google forms. Allows you to create interactive forms and polls with non-standard logic of transition between fields. The best tool for marketers when you need to test an idea or collect contacts for newsletters.
stepFORM
Constructor with a simple interface for creating online forms and profiles. Allows you to add various calculations to the forms. This is convenient for forms that help the user to independently calculate the cost of a product or service according to the selected parameters. The created forms can be installed on the site in the form of an interactive widget, used by reference in social networks and instant messengers. The tool allows you to add your own scripts and css code using a special widget.
jotForm
Helps create creative and personalized forms for any purpose with a simple drag and drop mechanism. The service offers personalization and branding tools, allows you to edit custom css and add scripts.
Formstruct
The forms created in the service can be added to the site in the standard way or in the form of a floating button - the user points to it and sees the form. In the tool, you can configure access rights. For example, so that your employees can view and comment on incoming applications, but cannot change the contents of the form itself.
Custom Form Design
The direction still exists, but it becomes more difficult to sell individual development - you have to compete with the designers. It is necessary to prove to the client why he should order development from you, and not use the constructor.
It can take a long time to create a web form, depending on complexity. Especially if you need to integrate the form with payment aggregators, collect statistics, add requests to CRM and much more. In this case, it is easier for the developer to take a ready-made set of modules or make it on the designer. As a rule, designers have ready-made integration of third-party services that are easily connected. Thanks to this, the developer can focus on creating the form itself, rather than its components.
Designers have far from all the necessary features. Therefore, many allow the use of custom code in forms and provide open APIs so that webmasters can refine the functionality. Therefore, some developers make forms for their customers based on designers. There are pluses for all sides: developers bring new customers to designers, offer their services in return and do not waste time developing similar functionality. It is logical that they complement each other.
Often, developers finish the appearance of the form: the arrangement of elements and blocks. After all, each client wants individuality, so that his form is not stereotyped and does not resemble the others. Sometimes developers have to connect little-known services that only a specific client uses. For example, its own CRM or email distribution server.
Form designers and custom form design are slightly different things. A large company can afford to set aside or hire a developer if it needs some kind of confused web form. For example, a hotel booking form with a choice of cities and a multitude of parameters, payment acceptance and CRM integration. It is more profitable for small and medium-sized businesses to make an inexpensive form on the designer and accept customer applications. Therefore, designers will not completely displace form developers from the market.
Conclusion
HTML 5, along with the Web Forms 2.0 specification, although contributed to the development of forms, still cannot replace JavaScript. JSON Schema allowed working with the form content as efficiently as possible and dynamically generating the entire field structure. In addition to development tools, there are a lot of convenient services for non-programmers.
Any solution can be used, depending on the needs of the business and budget. The main thing is that the forms are user-friendly and safe - protected from spam bots and hacking the site through the fields.
From the editors
Netology courses on the topic:
- online profession " Web developer "
- online profession " Frontend developer "
- online profession " Tester "