Web Forms

10 minutes

What are web forms for?

Forms are a very essential element of performance websites. They are used to communicate with the visitor and enable the most important interactions on the site such as registration, ordering or any other actions that require data entry.

Creating your own forms

For forms to perform their function, they must be easy to understand and use for site visitors. Solidpixels allows you to create custom layouts for forms, so you can easily group related content fields and structure the form however you want.

Creation is done using a simple interface, where you assemble the form fields into blocks just like any other web content. This way, you can customize the forms on the site to your exact needs.

Newsletter

A newsletter is the simplest variation of a web form. Thanks to its unpretentious content, it can be placed on virtually any page, or even in the footer.
For the simplest possible setup, we have added the Newsletter as a separate widget. 
The settings for the Widget block are identical in the subdirectory as for the web form, but its clear separation will make it easier for you to work with the data and setup.

Form field types

  • The text field allows you to insert short text information.

  • Email and phone are fields for entering contact details.

  • Number allows you to enter any numeric value.

  • Use the Select field to add a drop-down selection of options to the form, used when selecting from multiple options.

  • The long text gives room for news and more extensive messages.

  • Check box

  • The radio button, unlike the check box, allows you to select only one option.

  • The file offers the possibility to add a field for uploading an attachment to the submitted form.

Call-to-action button

The call-to-action button directs the visitor to complete the action, i.e. submit the form. Pay attention to the wording of the button. Encourage visitors to take action and briefly explain exactly what happens after they submit the form.

Sample form fields

  • možnost 1
  • možnost 2
  • možnost 3
  • možnost 1
  • možnost 2
  • možnost 3
Choose one option
File

Responsiveness

Forms have significantly more limitations on mobile devices than they do on desktops. All form elements in solidpixels are designed to be as pleasant to use as possible on mobile devices.

Fields are repositioned on smaller devices so that all content is displayed. At the same time, the fields are adapted so that even on smaller touchscreens there is enough space to select fields. The keyboard is also automatically optimized based on the field type. This ensures that, for example, when filling in the phone field, the numeric keypad is immediately displayed.

Setting the appearance of form fields

You have full control over the appearance of the form. In the design settings, you can customize the appearance of the form to your exact needs. You can easily adjust the color and appearance of the form in a moment.

Real-time validation

Validation for forms is used to treat the data sent. The aim is to ensure that the user provides all the necessary data in the correct format. Therefore, before submitting, we warn the visitor about missing data in mandatory fields or incorrect format of the completed data.

In solidpixels, the validation of form fields is done in real time and is displayed to the visitor after the form is submitted without the need to reload the page. If the visitor has not filled in mandatory fields or has entered data in the wrong format, an error message is displayed and the form is not submitted. Solidpixels automatically checks for the mandatory data to be filled in and also checks for the correct format of email, phone and numeric data when setting the field type.

TIP: Cue visitors with a placeholder text

Tell the visitor in which format to fill in the data in specific input fields. When you click on the details of a specific field, you have the option to fill in placeholder text, the visitor then just overwrites the pre-prepared data when filling it in.

Confirmation of form submission

An important step in working with the form is the confirmation of the submission. You can choose between two methods according to your needs.

  • Display a message about successful form submission
    After submission, only the message you selected will be displayed.
  • Redirect to a static web page
    After submitting the form, the visitor is redirected to a specific static page prepared for this purpose.

Data processing of the form

You can access the data that users upload from the site in multiple ways. All data submitted via forms is automatically stored in the database. Additionally, depending on the form settings, data can be emailed to you and to site users.

Sending forms to email

The data from the form can be emailed to you and the user. By replying to the email you can directly establish communication with the client.

Saving forms to a database

All data submitted via forms on the website is automatically stored in the database. Storing contacts in the database enables further systematic work with contacts, for example for marketing purposes.

You can access the data from the forms via two modules in the administration. The Form Data module groups all data by form name. The Contact Management module contains a list of contacts collected from all forms on the site. Under each contact, you will see all the forms that the visitor has submitted from the site.

Exporting and synchronizing data from forms

Data from the form can be exported to .csv or .xls files through the administration or use automatic synchronization with Google Sheets, Raynet, Smart Emailing and MailChimp.

Security of forms

When submitting forms, communication between the server and the client occurs. This data exchange needs to be secured. Forms are treated with a proprietary anti-spam check that prevents robots from sending forms and filters spam. Data sent by users is also protected.

SSL encryption

SSL (Secure Sockets Layer) is a protocol that ensures the security of Internet communication. The SSL protocol is important for two reasons. By using certificates, the SSL protocol identifies both parties who have the assurance that they are communicating with each other. Secondly, the SSL protocol provides encryption of the communication. It arranges for the exchange of an encryption algorithm and key, which the client and server then use to encrypt the information.

GDPR compliance forms

The GDPR imposes an obligation to inform users about the processing and use of their personal data. It also imposes an obligation to keep track of who has given what consent and when. The administration of solidpixels is prepared for the requirements of the GDPR. Contact management allows quick access to all information about a specific user, the consents given and the data sent.

Form measurement via Google Analytics

Forms are often a means to meet conversion goals. By measuring your forms, you can see how effectively your forms are meeting those goals or what source of visits is bringing the right visitors to your site. Forms in solidpixels have a precise address structure. Thanks to this, you can always determine which form it is.

Examples of use

Forms have applications in a wide range of situations where it is necessary to allow site visitors to enter data:

  • a booking form, through which visitors can book a place at the conference, for example,
  • contact form allows visitors to send you a message directly from the site,
  • you can use the order form to sell products or services,
  • form for downloading the e-book in exchange for visitor data,
  • an entry form that lets the visitor into a secured part of the site

Preview of form conversion measurement in Google Analytics

Setting form identifiers for measurement

For proper form tracking, forms need to be assigned a unique identifier (ID). This ID is then automatically written into the URL in the browser and allows you to track the submission of a particular form.

To enter a form identifier, go to Form Settings > Advanced > ID. The identifier must be unique.

The set ID will be used in the URL after the form is submitted.

The anchor in the URL does not affect analytic measurements and is only used to set the position on the page after the form is submitted.