When you embed your form onto your website you might find that it’s not quite the right size.
Perhaps it doesn’t look quite right on mobile, there’s too much of a gap above/below your form, or maybe it’s just too narrow or wide. Thankfully, these are easy things to adjust in the form customiser.
As an example, let’s say I want to make this form wider and reduce the gap below the form. I also want to make sure that it looks good on mobile devices.
Adjusting the width of your form
To change the width of your form, click on the ‘form container’ tab in the left-hand menu of the form customiser. You should see a box that contains the width of your form as illustrated below.
We can see that in our form the current width is set to ‘50%’. If you take a closer look at the screenshot above you should be able to see how the form is taking up 50% of the screen.
Can I make my form a fixed width instead of a percentage of the screen size?
Yes! If you want the form to be a precise width (e.g. 900 pixels wide) you can enter ‘900px’ which will also work. We don’t advise this, however, as it means that your forms might appear to go off the edges on smaller devices (where the screen size is smaller than the form itself).
Adjusting the gap above and below your form
The gap above and below your form is what’s known as the margin. To adjust the margin, go back to the form container tab in the left-hand menu. You should see an option to change the ‘container margin'.
In this example, you can see that there is a 10px margin added to the top and bottom of the form. To reduce the gap, we’ll change this to 0. Now, when we look at our form we can see that the gap between our form and the text is much smaller than in the previous screenshots.
Can I adjust the gap inside my form?
Yes, this is called ‘padding’. Under the form container tab, you should see an option to adjust the padding above/below and to the left and right of the form. If we increased all of these to 40px you can see that the ‘gap’ inside our form is now slightly larger.
Making your form mobile-responsive
By default, all Leadformly templates are fully responsive. This means that they should look great whether they’re viewed on a mobile, tablet, or on a large TV screen.
You can test how it looks on mobile by changing the view in the Customiser step.
And that’s it, your form should now look great on mobile devices!