G 2 highlighted fields are required to fill. File Fill ORDER (ZS)

Appendix No. 4.
Name of contracting organization: ___________________________________________

Participates in preliminary selection By lot:

Inventory of participant documents

In this lesson, we will make a small pleasant eye effect for mandatory fields in shape. Most web forms are developed in minimal execution, only to collect user data. Think about how many visitors refused to fill outform, because it contained many fields. But there are also many forms that in optional fields request additional information that the visitor wants or should provide. For example, order form or classification form.

The idea is to allocate only mandatory to fill the field. This task is usually solved by installing a small symbol * or similar designation. But we will go further and add an interactive effect for better visual allocation of mandatory fields.

To implement the idea of \u200b\u200bthe turning labels and form fields in two DIV elements, which will allow us to apply different effects. The external container will have an additional class if the field is required to fill ( aF-REQUIRED):

Consider the styles of the second example of a demonstration that uses the hiding optional fields by scaling. We will reduce the height of another container when the inner will decrease on the scale.

Add a transition for an external container, we define a fixed height and set the hide of the protruding parts to hide the content when decreasing the height.

AF-Outer (Overflow: Hidden; Height: 70px; Box-Shadow: 0 1px 0 # F5F5F5 INSET; Transition: All 0.5s Linear;)

For an internal container, set the transition center to the "Center Top" value to see the height reduction process. Initially, the scale is of value 1 (not necessarily install it):

AF-INNER (Padding: 15px 20px 15px 20px; Transform-Origin: Center Top; Transform: Scale (1); Transition: All 0.5s Linear;)

At the top of the form there is a button (Checkbox) with ID aF-Showreq. When you click on the button, the scale of additional fields will be changed. We use pseudo-class : not To obtain the necessary items, it is possible to install classes for additional fields and access to them through the relative combinators.

Reduced the height of the external container and the scale of the internal:

# AF-Showreq: Checked ~ .af-Form .af-Outer: not (.af-Required) (Height: 0px; Visibility: Hidden;) # af-showreq: Checked ~ .af-form .af-outer: not (.af-required) .af-inner (Transform: Scale (0); Opacity: 0;)

Installation Property visibility: hidden. It gives a guarantee that it will be possible to switch to other fields using the keyboard. Here you can not use display: None, Because the transition will not work.

Any online marketer knows that the convenience of users when interacting with Landing is an important step towards conversion. And in this process plays a considerable role, since it depends on its performance, not only the overall impression of the company, but also whether the user's attracted user will remain on the page or go to the rival Landing.

For this reason, the development of the feedback form needs to be paid special attention, even if it is simple and does not contain many fields for filling. In this article, we will focus on 15 moments that are critical when creating an ideal contact form.

And to secure the material obtained and practice in their skills, B, containing all the necessary technical functionality to create a variety of lid-forms.

1. Clear and laconic heading

The main purpose of the title is to convey the essence of everything in a few words, avoiding suitable phrases and complex proposals. Ideally, the visitor should clearly and unequivocally understand why a lid-form is intended, just looking at her headline.

While a good header explains the appointment of lid-form, an informative description allows you to additionally motivate visitors who doubt its fill in the expediency. It is possible to achieve this by including in the text 2 of strategically important item:

• which specifically required by the user;
• what exactly the visitor receives after performing the actions expected from him.

Title (Title): "Fill out the form to get a directory with prices from the manufacturer." Description (Description): "Toril! Fill out the form until the end of the day and get a 20% discount. " All Landing can be.

3. No one likes to fill long forms

Do not overload the lid-shape with numerous fields to fill without need. Use only those of them that are extremely important for your business. If possible, avoid duplicating the requested information (for example, "Email" and "Confirm email"). Do not abuse requests for personal and personal data (for example, "phone number", "address" or "Company name"). If still such fields are present, let us know the user (text and graphically) that his personal data is reliably protected and will not be transferred to a third party.

Below are 2 images illustrating a long and short lid-form:

It is easy to guess which of the above forms is more readily fill in the visitor of the target page. The overwhelming majority is clearly embarrassed, realizing the need to provide such a number of data, many of which will most likely become unnecessary.

4. Place text labels on the left above the filling fields.

Studies carried out using, show that field headers located above the fields work better than aligning them on the right edge or placement on the left opposite the corresponding fields. If you need to make the form more compact or visually shorter, the names of the labels can be placed inside the fields, aligning them along the left edge (in this case, they fulfill the role of playcold):

5. Meaning inscriptions on a hundred button

• associated with the content of lid-form and
• show that a person will receive after clicking on a hundred-button.

6. Position on the first screen

The logic here is simple: if the visitor immediately sees a lid form after loading the page, it is more likely to pay attention to it, which, in turn, can increase the conversion. Placing the form below the so-called, you increase the likelihood that the user does not get to it. Even worse, if the form is at the intersection of the first and second screens. In this case, it is extremely inconvenient.

7. Help visitors when filling in the contact form

9. Illuminated fields filled

In addition to error messages, it is advisable to organize the allocation of any noticeable (but not red) color, then the field that the user fills at the moment. This will allow him in case of distraction, quickly return to the part of the lid-form on which he interrupted.

In addition, you can add the admission described above by setting the automatic placement of the cursor and the backlight in the first field for filling. Such a little thing not only saves time, but also unobtrusively pushes to conversion action:

10. Style and font size, as well as background color

One of the important requirements of the perfect feedback form is its readability, which can be achieved by avoiding the use of too exotic fonts and color solutions that impede reading (for example, white text on a light gray background).

11. Remuneration of mandatory and optional fields for filling

The best way to identify mandatory field is to mark them with an asterisk (*):

In the Lid-Form Editor from Lpgenerator for fields, name, surname, age, email, date and URL you can set different configurations, including to mark the field as a mandatory for filling (Option No. 2)

Fields, mandatory to fill, are marked with asterisks. All Landing is possible

Such a distinction improves and, as a result, promotes the increase in the conversion rate.

12. Optimize the form for mobile traffic

The rapid growth of users of mobile devices puts in front of the owners of sites and target pages a difficult task - to provide high-quality UX for those who fill the lid-form with the help of various kinds of devices. Therefore, it makes sense to invest in the field fields under this growing category of users.

Some fields for filling suggest data from a long list of possible options. If there are too many of them, it may make it difficult to find necessary information and provoke a visitor care from the page. Therefore, the drop-down menu in lid-forms should be used with the mind. If there is too much data, automatic filling technologies can be applied as an alternative.

Most often, the long drop-down menu in forms involves the choice of the country of residence. An alternative option in this case can be the automatic definition of the user region using an IP address.

14. Page of Gratitude with Personalization Elements After Filling Lid-Forms

Let the user know about the results of filling the form by setting the activation of the appropriate. If the visitor entered his name, leaving contact details, contact him by name, and, depending on the persecuted marketing tasks, inform it the procedure for your further interaction or other relevant and useful information.

15. Use a simple captcha

Although pin is quite an effective measure against spam, it should be remembered that if the user did not manage to enter it right from the first time correctly, the likelihood is that it will refuse to fill your form at all. To prevent such annoying misunderstandings, use simple capits and the ability to change the requested code requested.

You can also use a simple check box in which it is enough to put a tick to indicate that the visitor of the target page is a living person, not a robot:

An example of a check box with an inscription "I am not a robot" (I`m not a robot), which is activated by simply a tick in the square field selected for this

Conclusion

The creation of the ideal experience of interaction on Landing is often reduced to the development of an ideal lid-form, which has the following characteristics:

• its purpose can be quickly and unequivocally understood by header and description;
• it is easy to fill;
• it is relevant and aims to a certain target audience.

The ideality in this case implies primarily not a stunning design, and the ability of this element Landing Page "Entry into contact" with the visitor of the target page. In addition to everything, an effective contact form contains the necessary tips for the user who prevent to the cherished target - the report of information about themselves.

Almost all modern sites and new ones have forms that check for filling without rebooting the page. So-called - mandatory form of form. But what methods to create such forms are used?

Until recently, the most popular way was the use of JaVascript. A very convenient library is jQuery Validation. This method is modern, but for its integration into the form on the site, some skills of work and time are needed.

With advent hTML 5. And its widespread integration on modern sites can be refused to use JaVascript. At the same time, in order to make the field in the form of mandatory for filling you only need to add required attribute.

With the required attribute, the browser will check whether the specific field is filled or not. If not, the user will be indicated on the mandatory filling of the field or even all the fields of the form.

And to create such fields, it will be required not more than a minute.

So, let's say there is a small form:

So it looks like in the browser:

Now we make some fields in the form of mandatory to fill:

That's all. We made all the fields mandatory for filling less than 1 minute. If you do not fill out the required fields, then we will see the following messages:

And, important. This check works in all modern browsers and only for HTML Specification 5. For the uninitiated - at the beginning of the HTML code you need to insert a tag.

Filling the fields of structured files of applications for cash when unloading documents in ORFK

If, when generating files to transmit to ORFK, error messages appear in the file structure, which means some of mandatory requisites The document remained blank. If it is difficult for the message to determine what kind of props, it is necessary to find in the table below (the table is built on the basis of the requirements for sharing formats *) The corresponding block (blocks are highlighted in a yellow table) and in it a description of the order of filling the desired field (light gray Color allocated fields mandatory for filling), for the convenience of the field are numbered. Based on the information received, make the necessary changes and re-unload the document.

_______________________________________________________

* Full text of the requirements for sharing formats is posted on our website

(version 7.0)