How to add background to form.

How to Add a Background to a Form in Squarespace

Want your form to stand out more on the page? Adding a background—whether it’s a color, image, or gradient—can help draw attention to your form and improve user experience.

Here’s how to add a background to a form block in Squarespace:

1. Add a New Section or Use an Existing One

Start by going to the page where you want your form.

  • Click Edit at the top of the page.

  • Then either:

    • Add a new section, or

    • Use the existing section that contains your form block.

2. Edit the Section Background

Hover over the section and click the Edit Section icon (usually a paintbrush or gear icon depending on your version).

You’ll now see options to customize the background:

  • Background color

  • Background image

  • Video background (optional)

  • Art or gradient effects (available in newer versions)

3. Choose Your Background Style

Now, customize the background:

  • Solid Color: Choose a color that contrasts with your form

  • Image: Upload a photo or graphic—Squarespace will auto-optimize it

  • Gradient or Art: Choose animated effects for a more dynamic section

Make sure the background doesn’t interfere with text readability. Use overlays or adjust transparency if needed.

4. Adjust Form Block Design (Optional)

To make the form look better on the background:

  • Click the Form Block itself

  • Use the Design tab to adjust:

    • Form alignment

    • Field spacing

    • Button style

5. Save and Preview

Once you're happy with how your background and form look together:

  • Click Save in the top-left corner

  • Preview the page on both desktop and mobile to make sure the form is readable and responsive

Get in Touch
Previous
Previous

How to add correct email to forms.

Next
Next

How to add css code on your Squarespace page.