Setting the Form’s Design and Style

In the previous guide you can read how to build the form itself and all the field types' settings. In this guide we will focus on the form style area, with which you can set all the designs and styles of the form.

Label Align

You can set the title's display in several modes:

1. Top (by default) - Display above the field
2. Hide Label - Display only the placeholder
3. Side - Align right
4. Side - Align left

Field Size

As part of the basic form design settings, we've added 5 prepared field sizes, allowing you to add fields in different sizes to specific areas in the site. For example:  For a right sidebar it would be better to place small fields, however for a full width page you can place large fields to make it more eye-catching. 

Field Style

The default design of the form matches the theme's field design, however you can always select "Custom Style" and then set the design and style that you want:

• Label Size
• Label Color
• Input Color
• Background Color
• Border Color
• Border Width
• Border Radius

Button Style In the button styles you can set the text that's displayed on top of the button, its size and style, and as in the fields you can set its width. This way you can very easily build horizontal forms. For you to have the maximum flexibility in the form layout, we've added for the button an alignment according to its area:

• None
• Center
• Right
• Left
• Block

The default design of the button matches the theme's field design, however you can always select "Custom Style" and then set the design and style that you want:

• Text Color
• Background Color
• Background Opacity
• Border Color
• Border Width
• Border Radius

Creating a horizontal form with the Pojo Forms plugin is easy.

The basic rule is that all fields (and button) width should sum up to 100%.

For example, if your form consists of 3 fields and a Submit button, simply set each of the fields' (including the button's) width to 25%.

In order to align the fields with the button, it's better to hide the field's title and insert it as a placeholder instead .
You could configure this in each field's settings.

So much for the form's style settings, in the following guide you can read about the sending options that are available in the forms.