How to make web forms on the site convenient and safe: development tools and designers
StepFORM project assistant assistant Artem Petrov told how to make web forms user-friendly, protect them from spam and listed the main ways to develop them.
Web forms - a simple tool and one of the main sources of leads on the site. With it, it is possible to build a good stream of applications from any page. In order for the web form to bring a steady flow of profits, rather than a weak stream 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.
Take advantage of Web Forms 2.0.
')
Web forms have always required improvements. Standard HTML tools could not provide the solution to many problems of developers. JavaScript came to the rescue with which you can manipulate the content of the page as you like. The situation was similar with CSS. A lot of animations and visual effects implemented using scripts.
With the advent of HTML5 and CSS3, web development has expanded. To solve many standard tasks, it was not necessary to use scripts. HTML5 brought with new features for web forms, including the Web Forms 2.0 specification. Developers were able to use new values for the
Many sites, such as hotel reservations or taxis, use date and time widgets. 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 the exact numeric 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 specified range. You can now make a simple slider using HTML. Example:
The most important information that is collected through the forms is telephone and email. Web Forms 2.0 provides fields with these types. Example:
HTML5 has fields for choosing colors. You can set any values in hexadecimal and suggest users to choose. Example:
The
HTML5 has other useful attributes for forms.
Web Forms 2.0 pushed the development of web forms forward. Today, the anatomy of web forms is much more complicated. Fields and drop-down lists can be interconnected and dynamically loaded when selected, and a server system is installed for processing incoming requests sent to multiple communication channels (email, sms, CRM, instant messengers). Therefore, to solve non-standard problems, HTML is still not enough.
Validate the data. This will protect you from entering unwanted information and help to avoid hacking the site through the form. You can perform validation 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 client is easy to get around 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 enough to not be spammed. In some cases, you can resort to other tricks to recognize and protect against spam:
Dynamic form generation using JavaScript is one of the good ways to prevent spam bots from attacking your inbox. After all, as a rule, they are designed taking into account that all form fields are displayed on the page in advance.
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. A spam bot will automatically fill in all the fields so that the form will be sent successfully. If the hidden field is filled, then the form will be filled in by the bot, and the data from it can be not accepted.
As a rule, spam bots fill out a form in seconds, which the average user cannot do. That is why to identify the bot enough to check how much time has passed since the entrance to the page and the form is sent.
Many services, for example, Akismet, allow you to filter spam based on the entered data. If a spammer used to trade on other sites, the service will help to identify it and will not allow sending unwanted information.
All of these methods of protection can be used in the complex - this will increase the degree of protection in front of various types of spam bots.
The development of development tools has simplified the creation of forms. The usual HTML was replaced by the generation of form content based on JSON Schema.
It looks like this. Json is formed with fields, their types, attributes and data:
The output generates the following form:
JSON Schema solves several problems:
The following are special tools and libraries that can be used to simplify the development of web forms.
JavaScript client library for generating Bootstrap 3 forms based on JSON schemas. The generated forms include client data validation.
A simple React component for creating an HTML form from a JSON schema using Bootstrap semantics.
React library to help deal with getting values from the state, implement validation, process form submission, error messages
The component generates a form based on the schemas for Vue.js. Contains built-in validators, 21 field types, Bootstrap templates, custom styles, and can be extended with custom fields.
A set of AngularJS directives for generating Bootstrap 3 forms from JSON Schema. The tool allows you to customize the order and type of fields, use the wysiwyg editor, contains tools for selecting dates and colors. Also available are many add-ons to extend the functionality.
You can connect the finished form to the external API to send data via 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 uses the form creation approach using JSON schemas. Includes data binding, validation and custom styles for custom widgets. Works with Redux and React / Angular support.
Unusual solution - a program for generating forms, which are installed on the 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 a 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 created numerous designers. Let's look at the most famous.
It helps to create forms (but more suitable for polls) in a simple interface, collect data in tables and view statistics of answers to users' questions. Forms can only be used by reference, they cannot be put on the site. Also there is no possibility to add your own styles and scripts. Nevertheless, it is a good tool to conduct a survey of employees or organize a record for the event.
A tool with more functionality than Google forms. Allows you to create interactive forms and polls with non-standard logic transition between fields. The best tool for marketers when you need to test an idea or collect contacts for distribution.
Designer with a simple interface for creating online forms and profiles. Allows you to add to the form of various calculations. This is convenient for forms that help the user independently calculate the cost of a product or service according to selected parameters. The created forms can be installed on the site as an interactive widget, use the link 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 a standard way or as a floating button - the user leads and sees the form. In the tool you can customize access rights. For example, so that your employees could view and comment on received applications, but could not 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 the development from you, and not use the designer.
Creating a web form, depending on the complexity, can take a lot of time. Especially if you need to integrate the form with payment aggregators, collect statistics, add bids to CRM and much more. In this case, the developer is easier to take a ready-made set of modules or make a designer. As a rule, designers have ready-made integrations of third-party services that are easily connected. Thanks to this, the developer can concentrate on creating the form itself, not its components.
Designers have far from all the necessary capabilities. Therefore, many allow using custom code in forms and provide open APIs so webmasters can modify the functionality. Therefore, some developers make forms to their customers on the basis of designers. There are advantages for all parties: developers bring new customers to designers, offer their services in return, and don’t spend time developing similar functionality. It is logical that they complement each other.
Often, developers finish the appearance of the form: the location of elements and blocks. After all, every client wants individuality so that his form is not template and does not resemble the others. Sometimes developers have to connect obscure services that only a particular client uses. For example, his own CRM or email list server.
Form constructors and individual form design are slightly different things. A large company can afford to allocate or hire a developer if she needs some confused web form. For example, a form for booking hotels with a choice of cities and a variety of parameters, payment acceptance and integration with CRM. It is more profitable for small and medium businesses to make an inexpensive form on a constructor and to accept customer requests. Therefore, the designers do not completely oust form developers from the market.
HTML 5, along with the Web Forms 2.0 specification, has contributed to the development of forms, but it still cannot replace JavaScript. JSON Schema made it possible to work with the contents of the form as efficiently as possible and to dynamically generate the entire field structure. In addition to development tools, there are a lot of convenient services for non-programmers.
You can use any solution, depending on the needs of the business and budget. The main thing is that the forms are user-friendly and secure - protected from spam bots and hacking the site through the fields.
Courses "Netology" on the topic:
Web forms - a simple tool and one of the main sources of leads on the site. With it, it is possible to build a good stream of applications from any page. In order for the web form to bring a steady flow of profits, rather than a weak stream 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
Take advantage of Web Forms 2.0.
')
Web forms have always required improvements. Standard HTML tools could not provide the solution to many problems of developers. JavaScript came to the rescue with which you can manipulate the content of the page as you like. The situation was similar with CSS. A lot of animations and visual effects implemented using scripts.
With the advent of HTML5 and CSS3, web development has expanded. To solve many standard tasks, it was not necessary to use scripts. HTML5 brought with new features for web forms, including the Web Forms 2.0 specification. Developers were able to use new values for the
type attribute. To offer convenient web forms to users, you can use:Date and time
Many sites, such as hotel reservations or taxis, use date and time widgets. 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, datetime-local is recommended);
- datetime-local is an analogue of datetime, without a time zone;
- month - year and month;
- week - year and week number;
- time - time in hours, minutes, seconds, fractions of seconds.
Numeric counter
To solve many problems, it is enough to use a regular text field. But where you need to enter the exact numeric value, you can use the type field
number . Its min and max attributes define the minimum and maximum values, and step defines the step. Example: <input type="number" value="0" min="0" max="10" step="1"> Slider
There are many JavaScript libraries that allow you to create sliders or sliders with a choice of values from a specified range. You can now make a simple slider using HTML. Example:
<p> 0 50:</p> <div> <input type="range" name="volume" min="0" max="50"> <label for="volume"></label> </div> Email and Phone
The most important information that is collected through the forms is telephone and email. Web Forms 2.0 provides fields with these types. Example:
<div> <input type="tel" name="phone" value=""> <label for="phone"></label> </div> <div> <input type="email" name="email" value=""> <label for="email"> email</label> </div> Color selection
HTML5 has fields for choosing colors. You can set any values in hexadecimal and suggest users to choose. Example:
<p> :</p> <div> <input type="color" name="color1" value="#ff0000"> <label for="color1"> 1</label> </div> <div> <input type="color" name="color2" value="#f6b73c"> <label for="color2"> 2</label> </div> Patterns
The
pattern attribute allows you to check the data entry in the form. Example: <input type="password" name="pwd" pattern=".{12,}" title=" 12 "> <input type="password" name="pwd" pattern="(?=.*\d)(?=.*[az])(?=.*[AZ]).{12,}" title=" 1 , 12 "> <input type="url" name="address" pattern="https?://.+" title=" https://"> Other useful attributes
HTML5 has other useful attributes for forms.
- The
placeholderattribute allows you to enter text that appears when the field is empty and disappears with focus. - The
autofocusattribute automatically puts focus on the field after the page loads. - The
requiredattribute indicates that the field is required. - The autocomplete attribute includes form auto-
autocomplete(remembers previously entered data). Disabled by setting the valueoff: autocomplete="off"
Web Forms 2.0 pushed the development of web forms forward. Today, the anatomy of web forms is much more complicated. Fields and drop-down lists can be interconnected and dynamically loaded when selected, and a server system is installed for processing incoming requests sent to multiple communication channels (email, sms, CRM, instant messengers). Therefore, to solve non-standard problems, HTML is still not enough.
How to protect web forms from spam
Validate the data. This will protect you from entering unwanted information and help to avoid hacking the site through the form. You can perform validation 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 client is easy to get around 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 enough to not be spammed. In some cases, you can resort to other tricks to recognize and protect against spam:
Dynamic form generation using JavaScript is one of the good ways to prevent spam bots from attacking your inbox. After all, as a rule, they are designed taking into account that all form fields are displayed on the page in advance.
Another simple way is to place a hidden field with some name, for example:
<input type="hidden" name="phone" value=""> Site users do not see the field and do not fill it. A spam bot will automatically fill in all the fields so that the form will be sent successfully. If the hidden field is filled, then the form will be filled in by the bot, and the data from it can be not accepted.
As a rule, spam bots fill out a form in seconds, which the average user cannot do. That is why to identify the bot enough to check how much time has passed since the entrance to the page and the form is sent.
Many services, for example, Akismet, allow you to filter spam based on the entered data. If a spammer used to trade on other sites, the service will help to identify it and will not allow sending unwanted information.
All of these methods of protection can be used in the complex - this will increase the degree of protection in front of various types of spam bots.
Form Development Tools
The development of development tools has simplified the creation of forms. The usual HTML was replaced by the generation of form content based on JSON Schema.
It looks 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 the following form:
JSON Schema solves several problems:
- save time on the development of forms;
- reduce the total amount of code;
- make functional forms flexible;
- set clear to all developers structure.
The following are special tools and libraries that can be used to simplify the development of web forms.
JSON Form
JavaScript client library for generating Bootstrap 3 forms based on JSON schemas. The generated forms include client data validation.
React JsonSchema Form
A simple React component for creating an HTML form from a JSON schema using Bootstrap semantics.
Formik
React library to help deal with getting values from the state, implement validation, process form submission, error messages
Vue form generator
The component generates a form based on the schemas for Vue.js. Contains built-in validators, 21 field types, Bootstrap templates, custom styles, and can be extended with custom fields.
Angular Schema Form
A set of AngularJS directives for generating Bootstrap 3 forms from JSON Schema. The tool allows you to customize the order and type of fields, use the wysiwyg editor, contains tools for selecting dates and colors. Also available are many add-ons to extend the functionality.
Formspree
You can connect the finished form to the external API to send data via 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 uses the form creation approach using JSON schemas. Includes data binding, validation and custom styles for custom widgets. Works with Redux and React / Angular support.
Formoid
Unusual solution - a program for generating forms, which are installed on the 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 a form.
Form Designers
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 created numerous designers. Let's look at the most famous.
Google Forms
It helps to create forms (but more suitable for polls) in a simple interface, collect data in tables and view statistics of answers to users' questions. Forms can only be used by reference, they cannot be put on the site. Also there is no possibility to add your own styles and scripts. Nevertheless, it is a good tool to conduct a survey of employees or organize a record for the event.
Typeform
A tool with more functionality than Google forms. Allows you to create interactive forms and polls with non-standard logic transition between fields. The best tool for marketers when you need to test an idea or collect contacts for distribution.
stepFORM
Designer with a simple interface for creating online forms and profiles. Allows you to add to the form of various calculations. This is convenient for forms that help the user independently calculate the cost of a product or service according to selected parameters. The created forms can be installed on the site as an interactive widget, use the link 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 a standard way or as a floating button - the user leads and sees the form. In the tool you can customize access rights. For example, so that your employees could view and comment on received applications, but could not change the contents of the form itself.
Development of forms to order
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 the development from you, and not use the designer.
Creating a web form, depending on the complexity, can take a lot of time. Especially if you need to integrate the form with payment aggregators, collect statistics, add bids to CRM and much more. In this case, the developer is easier to take a ready-made set of modules or make a designer. As a rule, designers have ready-made integrations of third-party services that are easily connected. Thanks to this, the developer can concentrate on creating the form itself, not its components.
Designers have far from all the necessary capabilities. Therefore, many allow using custom code in forms and provide open APIs so webmasters can modify the functionality. Therefore, some developers make forms to their customers on the basis of designers. There are advantages for all parties: developers bring new customers to designers, offer their services in return, and don’t spend time developing similar functionality. It is logical that they complement each other.
Often, developers finish the appearance of the form: the location of elements and blocks. After all, every client wants individuality so that his form is not template and does not resemble the others. Sometimes developers have to connect obscure services that only a particular client uses. For example, his own CRM or email list server.
Form constructors and individual form design are slightly different things. A large company can afford to allocate or hire a developer if she needs some confused web form. For example, a form for booking hotels with a choice of cities and a variety of parameters, payment acceptance and integration with CRM. It is more profitable for small and medium businesses to make an inexpensive form on a constructor and to accept customer requests. Therefore, the designers do not completely oust form developers from the market.
Conclusion
HTML 5, along with the Web Forms 2.0 specification, has contributed to the development of forms, but it still cannot replace JavaScript. JSON Schema made it possible to work with the contents of the form as efficiently as possible and to dynamically generate the entire field structure. In addition to development tools, there are a lot of convenient services for non-programmers.
You can use any solution, depending on the needs of the business and budget. The main thing is that the forms are user-friendly and secure - protected from spam bots and hacking the site through the fields.
From the Editor
Courses "Netology" on the topic:
- online profession " Web Developer "
- online profession " Frontend-developer "
- online profession " Tester "
Source: https://habr.com/ru/post/454900/
All Articles