Form design

The Design panel sets how your whole form looks: fonts, colors, spacing, inputs and buttons. Every change shows in the preview right away.

1. Log into your Joomla backend.
2. Go to Components → Convert Forms → Forms.
3. Open your form.
4. Click Design in the left sidebar.

The settings sit in 5 groups: Theme, Labels, Inputs, Buttons and Advanced.

Theme

The font, colors and spacing of the whole form. The other groups build on these.

• Font: the font of the whole form. Inherit uses your site's font. A Google font loads from Google, which adds a request to the page.
• Base Font Size: the size every Font Size and Padding preset scales from. Change this 1 number and the labels, inputs, buttons and headings follow.
• Text Color: the color of every text on the form: labels, inputs, help text, headings and HTML content.
• Accent Color: the color of links, the focus ring on inputs, and checked boxes and radios.
• Background Color: the color behind the whole form. It's transparent by default, so your page shows through. The builder's preview always shows the form on white.
• Padding: the space between the form's edge and its content. Set some whenever you give the form a background color, or the fields touch the edges.
• Spacing: the room between elements, and between a label and its input.
• Border Radius: how rounded the corners of every input and button are, from None to Full. Pick Custom to set it in pixels.

Labels

How the label of each field looks and where it sits.

• Font Size and Text Weight: the size and boldness of the labels.
• Position: Top Aligned puts each label above its input. Left Aligned puts it on the left.
• Required Field Indication: adds an asterisk next to the label of each required field.

Inputs

How the boxes visitors type in look: their text, colors, shadow and padding.

• Font Size: the size of the text visitors type.
• Text Color: the color of what visitors type. Leave it empty to use the form's Text Color.
• Background Color and Border Color: the inputs' fill and outline.
• Text Alignment: Left, Center or Right.
• Shadow: None, Light, Medium or Strong.
• Padding: the room inside each input around its text. Pick Custom to set the vertical and horizontal padding in pixels.
• Help Text Position: shows a field's help text before or after its input.

Buttons

The look of every button on the form: Submit, plus Next and Back on multi-page forms.

• Font Size, Text Weight and Padding: the size of the buttons.
• Show Arrows: adds an arrow next to the Back, Next and Submit labels.
• Alignment: Left, Center or Right. Space Between puts Back at the left edge and Next or Submit at the right, and Stretch spreads the buttons across the whole row.
• Text Color, Background Color and Border Color: the buttons' colors. Leave Border Color empty for no border.

Advanced

Content above and below the form, plus your own CSS and JavaScript.

• Header: text, images or HTML above the form, like a title and an intro. It shows on every page and hides once the ending shows.
• Footer: text or HTML below the form, like a privacy note.
• Custom CSS: your own CSS for this form. It also runs in the builder, so you see the result in the preview. See Add Custom CSS.
• Custom JavaScript: your own JavaScript for this form, without <script> tags. It doesn't run in the builder.
• Class Suffix: a CSS class added to the form, for styles you keep in your template.

Go further with CSS

• Add Custom CSS
• Centering forms
• Use custom Google Font in your form