We believe that your form should seamlessly match the look and feel of your website. Unlike other tools, Leadformly gives you control over everything from the fonts used down to the roundness of buttons!
In this tutorial, we'll explore some of the specific tips and tactics you can use to design a great-looking form, even if you're completely new to design. Take a look at the video to get you started.
How to style your form
1. Choosing a theme (basic)
The fastest and easiest way to change the look and feel of your form is to select a pre-built theme from the top left-hand dropdown menu. Themes update the style of your form (colours, fonts etc) without changing any of the questions in your form.
Once you have found a theme that closely matches the look and feel you're after, you can then use the styling panel (explained below) to further customise the look and feel of that theme.
2. The styling panel (intermediate)
The left-hand styling panel makes it easy to bulk change all of the buttons, labels, fields, or question types in one go. As you can see in the example below, changing the font in the styling panel automatically updates the font of all text in your form.
There are five tabs in the styling panel:
- Form container - Change the width/height of your form, the spacing inside the form (padding) and outside of the form (margin). Update the background colour of your form, your font, and turn on/off mobile responsiveness.
- Questions - Change the colour, size, and alignment of question labels and the text inside fields. You can also change the background colour of questions fields, add borders, and even set whether you want rounded or square edges. If you're using image select questions, sliders, toggle buttons, or date pickers you can customise the look and feel of these question types here also. Adjust the colour, sizing, alignment, and styling of these questions here.
- Buttons - Change the colour, size, and boldness of text in your buttons. You can also set the colour of the button itself, whether you want rounded or square edges, and much more.
Added elements* - For any elements that have been added to your LeadForm like text, an image or a new button, then they will be displayed in this tab. You will be able to adjust buttons like you do in the buttons tab and the other elements have simple styling like margin, size, colour and weight.
* You will also find the styles for the heading, text, and image that displayed on the success step.
3. Custom CSS (Advanced)
In the styling panel at the bottom of a tab you will find "Add Custom CSS" link:
Here you can add some handy snippets of CSS that you might want but we don't give you tools for.
Adding Images, Text, Containers & More to Your Form
In some instances, you may want to add images or additional text to your form. In the example below, the questions on the first step of the form have been removed and replaced with some text and an image, to create a welcome page.
To add images and additional text to your form, click 'Add element' at the top of the left-hand styling panel and drag what you want to add to your form from the panel into your form. You should see a blue dotted line indicating where the element will fall when you let go, as shown below.
Rearranging & Removing Fields
You can rearrange questions by clicking the 'move' icon that appears when you hover over a field and then dragging the question to where you'd like to move it. To remove a question completely, simply click 'Remove' as shown below. Any changes you make to the structure of your form will automatically be reflected when you go back to the form builder.