A couple of advices on web forms design

Advice number one. There is a forgotten rule for the design of switches and radio buttons. Almost always, these interface elements are designed like this:

But to avoid a huge mistake, it should be done like this:

If you can't immediately notice the difference, should try to activate the switch by clicking on the inscription, and not by the icon. In the first case, such a click is useless, in the second case it works successfully.

This is a very convenient and simple reception, but completely undeservedly forgotten. Lost it because in many HTML guides it is recommended not to use the "obsolete" element. However, this technique can only be implemented by explicitly specifying the for attribute in a label element that is exactly the same as the switch's id attribute.

The second advice. From the very beginning of the web, there are debates about how to sign the elements of the form: on the left or on the top. Vertical labeling is easier to read, but it increases the length of the page. Horizontal signatures with a switch to the right are harder to type, but they look a bit "more alive".

Mobile web surfing puts a weighty drawback in the bowl of scales. The fact is that on a limited space of the mobile screen the form with such explanations is catastrophically inconvenient, because you have to constantly move the page back and forth: read the field name — fill it, read — fill it, and so on.

For this reason, the vertical order of signatures should be used.