--- title: "Form design - Convert Forms" description: "Style your whole form from the Design panel, and give a single page or ending its own colors." url: "https://www.tassos.gr/docs/convert-forms/features/form-design" date: "2026-11-11T03:07:50+00:00" language: "en-GB" --- [ Home ](https://www.tassos.gr/docs) / [ Convert Forms ](https://www.tassos.gr/docs/convert-forms) / [ Features ](https://www.tassos.gr/docs/convert-forms/features) # Form design ## Style your whole form from the Design panel, and give a single page or ending its own colors. ![Form design](https://www.tassos.gr/images/2026/11/convert-forms-form-design-card.png) Heads up: this feature is new in Convert Forms 6 and is only in the latest beta release. On Convert Forms 5, this page won't match your backend. [Download the beta](https://www.tassos.gr/releases/convert-forms-beta) and back up your site first. 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 Design panel with its 5 groups collapsed: Theme, Labels, Inputs, Buttons and Advanced](https://www.tassos.gr/images/2026/11/convert-forms-form-design-overview.png)](https://www.tassos.gr/images/2026/11/convert-forms-form-design-overview.png) The settings sit in 5 groups: Theme, Labels, Inputs, Buttons and Advanced. ## [Theme](#theme) The font, colors and spacing of the whole form. The other groups build on these. [![The Theme group of the Design panel, next to the form preview](https://www.tassos.gr/images/2026/11/convert-forms-form-design-theme.png)](https://www.tassos.gr/images/2026/11/convert-forms-form-design-theme.png) - **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](#labels) How the label of each field looks and where it sits. [![The Labels group of the Design panel](https://www.tassos.gr/images/2026/11/convert-forms-form-design-labels.png)](https://www.tassos.gr/images/2026/11/convert-forms-form-design-labels.png) - **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](#inputs) How the boxes visitors type in look: their text, colors, shadow and padding. [![The Inputs group of the Design panel, next to the form preview](https://www.tassos.gr/images/2026/11/convert-forms-form-design-inputs.png)](https://www.tassos.gr/images/2026/11/convert-forms-form-design-inputs.png) - **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](#buttons) The look of every button on the form: Submit, plus Next and Back on [multi-page forms](https://www.tassos.gr/docs/convert-forms/features/multi-page-forms). [![The Buttons group of the Design panel, next to the form preview](https://www.tassos.gr/images/2026/11/convert-forms-form-design-buttons.png)](https://www.tassos.gr/images/2026/11/convert-forms-form-design-buttons.png) - **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](#advanced) Content above and below the form, plus your own CSS and JavaScript. [![The Advanced group of the Design panel with the Header, Footer and Custom CSS boxes](https://www.tassos.gr/images/2026/11/convert-forms-form-design-advanced.png)](https://www.tassos.gr/images/2026/11/convert-forms-form-design-advanced.png) - **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](https://www.tassos.gr/docs/convert-forms/functionality/custom-css). - **Custom JavaScript**: your own JavaScript for this form, without `