How to add a background image to a Squarespace form

Tired of staring at that plain background on your contact form? Let's add a gorgeous custom background image with a few lines of code!

This tutorial will teach you how to upload the image & customize code to make your contact form uniquely yours.

Here are the steps from this tutorial & the codes you'll need to make this magic happen. T see this code in action, watch the video below!

Step one: upload your custom image (website → website tools → custom css → custom files)

Step two: add this CSS code to your custom css panel (website → website tools → custom css)

.sqs-block-form{
background-image: url(image-url-here);
background-size: cover
} 

Step three: update the placeholder url of image-url-here with the url for the image that you uploaded

Step four: pat yourself on the back; you’re a coder now! 🙌🎉

Step five (optional 😉) buy me a coffee to say thanks for this free tutorial: buymeacoffee.com/insidethesquare

 
insidethesquare


Grab my collection of custom codes for Squarespace: 
→ insidethesquare.co/css

https://insidethesquare.co
Previous
Previous

How to customize a horizontal line in Squarespace

Next
Next

How to customize the file upload field in a Squarespace form