Why does accessing the "Designer" feature the first time seem to add space to the top of the form?

I was creating a form off of the baby photo form and noticed that whenever I access the "designer" feature on a new form for the first time and make any kind of changes which shouldn't have any bearing on alignments, it always creates an extra gap space between where the form starts at the top.

I'd like to remove this space as it creates an unnecessary gap between my text above the form and the form itself which is important to me in the design of my site.

It doesn't matter what changes I make to the form in the designer section; I can just change the background color and the gap is created after I save and embed the form. It only happens once I use the designer section - if I leave the form as it is and just make the changes I need in the normal editing section then I have no problems.

I've tried it on basic templates and it happens regardless of the template. It even happens if I go into the "designer" feature and change something only to undo it and save it, just the very act of accessing the "designer" and saving it within the designer creates that gap at the top of the form.

Is there any way to fix this? Thanks for the help in advance.

I believe that is because the Form Designer implements a specific styling on the form that will be needed if you would like to design the form using the tool.

Another noticeable change when you first open the Form Designer is that the form creates a frame-like element on it, it does not happen to all but only on some specific templates or on newly created forms.

Here's an example of it:

This is somewhat like a basic template that is added on your form on the background so that the Form Designer Tool can work. Specifically, the top spacing you are getting is the padding, it defaults to a 60px both at the top and the bottom.

We are always here to help if you need adjustments on this. In this case, simply add this custom CSS code:

.jotform-form {

    padding: 0px 0px !important;

}

Here's a screenshot to where you need to add it in your Form Designer Tool:

That will remove the top spacing that you are getting.

Let us know if that works.

Excellent! Thank you for the quick response, worked like a charm and now I can better modify my form in designer. Thanks again!

On behalf of my colleague, Charlie, you are most welcome. Please feel free to contact us anytime if you have other questions or concern. Thank you.