How to adjust the margin spacing above and below the form?

Do you know how to adjust the new margin spacing above and below the form? This margin appears to be coming from the form element rather than an existing theme standard (at least if I understand the inspect element correctly).

Hi Stucki_Ryan,

You can inject this custom CSS in the Form Designer to reduce or remove the top and bottom margin of the form:

/*Reduce or remove top and bottom spacing of the form - 25478561*/

.form-all {

margin-top: 0px !important;

margin-bottom: 0px !important;

}

/*Code ends here*/

Here's the result:

Give it a try and let us know how it goes.

Hi there,
We tried the custom CSS injection. The issue wasn't resolved. When logged into WordPress, the form is cut off. When not logged into WordPress, the form has significant spacing above and below. I've made a screen capture video showing our attempt at the CSS injection, and showing the outcome.

You can see that video here:
https://www.loom.com/share/b0596a54ac5342f29df2947d0c4d6662?sid=b5ee086b-1cda-47cc-bea0-b913adeba649

Hi Stucki_Ryan,

When accessing your direct form, there is no space above or below it. This spacing issue may be caused by conflicting code on your page. You can embed your form using an iFrame, which automatically adjusts its height to fit the form content dynamically. It's really easy to do. Let me show you how:

1. In Form Builder, in the orange navigation bar at the top of the page, click on Publish.
2. In the menu on the left side of the page, click on Embed.
3. Now, select the Iframe embed option and click on Copy Code.
4. Paste your code into your webpage's embed area, and that’s it.

Reach out again if you have any other questions.

Hi, Reymae

I've changed the embed option to iFrame, but it's still showing up the same. You can see the page with the iFrame form embed here: https://www.smartwavesolar.com/alpine-ut/ (it's now live)

Joseph

Hi Joseph,

I checked the link you shared using default browser mode and incognito mode. Unfortunately, I was not able to replicate the issue on the last video you shared. However, I think this custom CSS code can remove some space and the border of the form.

.form-all {

  padding-top: 0px !important;

  padding-bottom: 0px !important;

  margin: 0px !important;

  box-shadow: none !important;

  border: none !important;

}

Here's the result after adding the code in the console of your website for testing:

1. The URL you provided.
2. You can play around with the number, that is the padding-top of the code I provided above.
3. That is the padding-bottom of the code I provided above.
4. You can set the box-shadow and border to none if you don't want to show it. You can remove it from the code if you want the box shadow on the website.

Is that the spaces you're referring to? We can also provide the code for the side spaces if you need it. Give it a try and let us know how it goes.