Reduce the space above the header of embedded form

Can you please help me reduce the space on the form of this header and the space on the border? Here is a link to the Contact Us form. I want to reduce the space above START A CONVERSATION.

Hi Davenport_Fulton,

Thanks for reaching out to us for help. Reducing the space above the header of your form when embedded is possible with the help of custom CSS codes. We can inject the custom CSS codes into your form. Let me show you how:

1. Copy the CSS codes below:

/* Reduce the space above the header when embedded- #13206571*/

.form-all {

    margin: 0px auto !important;

}

/*Ends here*/ 

2. Open your form in Form Builder, and click on the Paint Roller icon on the right side of the page to open Form Designer.

3. In the Form Designer menu, click on the Styles tab, scroll down, and paste the custom CSS codes into the Inject Custom CSS box.

4. Close the Form Designer menu to save the changes.

And that's it. Check out the screenshot below to see the result:

Give it a try, and reach out again if you have any other questions.

thank you so much. It looks so much better. Is it possible to use my fonts on the website in these forms? proximanova-light

font name : proxima nova. Now that I have the spacing fixed I would like the fonts and colors to match what we have on the website pages.

Hi Davenport_Fulton,

Thanks for getting back to us. Yes, you can change your form fonts. Aside from built-in fonts, you could use a custom font for your form using Inject Custom CSS. Let me show you how to import a Google custom font to your form:

1. Open Google Fonts and search for a font.

2. Choose a font from the results.

3. Scroll down to the Styles section and choose the styles you wish to use.

4. Select the grid icon in the upper-right corner to open the selected family pane.

5. In the selected family pane on the right, select @import under Use on the Web.

6. Copy the code inside the style tag.

Now, use the generated custom font for your form. It's easy to do. Let me show you how to do it:

1. In Form Builder, click the Form Designer (Paint roller icon) available in the upper right corner of the screen.

2. Go to the Styles tab in the opened window on the right side of the screen.

3. Scroll down to Inject Custom CSS and paste your Google Fonts import code in Line 1.

4. Next, paste the following code right after the import rule:

* {

font-family: 'MyWebFont', sans-serif;

}

5. Replace the font-family declaration with the one from Google Fonts under the CSS rules to specify families.

The complete code would look something like the following:

@import url('https://fonts.googleapis.com/css2?family=Charm&display=swap');

* {

font-family: 'Charm', cursive;

}

6. View your form in Preview or Live mode to see the changes.

We also have a guide on How to Use Google Fonts and Custom Fonts in Jotform that you can check out.

Let us know if you need any more help.