Time to Complete Module: 1 hour 15 minutes
Last updated: March 04, 2025
IN THIS MODULE

Each module in this guide includes instructions for building a specific page based on a sample design created by our Squarespace expert (Digital Agency, Local Business, Portfolio Site). You can switch to an alternative version of this module by clicking a different design in the left sidebar under “Alternative Designs.“
Set Your Site Styles
We covered how to set your site styles in Squarespace in our Quick Prep Guide. This is entirely up to you and your brand aesthetic. Remember, you can always go back and change them at any time. If you want to follow exactly what we’ve done on our site, we’ve chosen the following: Fonts (Headings)- Family: Instrument Serif
- Weight: 400
- Style: Normal
- Line height: 1 em
- Letter spacing: -0.02 em
- Text transform: None
- Size:
- Heading 1: 4 rem
- Heading 2: 2.8 rem
- Heading 3: 2.2 rem
- Heading 4: 1.6 rem
- Family: Instrument Sans/Space Mono
- Weight: 400
- Style: Normal
- Liner height: 1.5 em
- Letter spacing: 0 em
- Text transform: None
- Size:
- Paragraph 1: 1.4 rem
- Paragraph 2: 1 rem
- Paragraph 3: 0.9 rem
- Family: Instrument Sans
- Weight: 600
- Style: Normal
- Letter spacing: 1 em
- Text transform: None
- Size (primary, secondary, and tertiary buttons): 1 rem
- Family: Space Mono
- Weight: 400
- Style: Normal
- Line height: 1.5 em
- Letter spacing: 0 em
- Text transform: None
- Size: 0.8 rem
- HEX #F1F1F1
- HEX #FFFFFF (white)
- HEX #FFD53E
- HEX #44423B
- HEX #221C1C
- Primary: Custom
- Secondary: Custom
- Tertiary: Pill
- Field shape: Custom
- Animations: Flex at a slow speed
2.1 Add a New Page
You’ll probably notice that on all our images there’s a menu across the top of the website displaying the page names. We’ll set this up together at a later stage. For now, let’s start by adding a new page.
Squarespace offers templates for pages like Blog, Store, and Portfolio. You can also choose from ready-made designer page layouts, which are great if you want to get online faster and simplify the building process.
However, we’ll show you that starting from scratch in Squarespace is not nearly as intimidating as it may sound. We’ll start with a blank page and guide you through every step – from a blank canvas to a unique page that fully aligns with your business goals.
Step 1: Go to the “Pages” menu

- Open the “Pages” menu located on the Squarespace editor’s left sidebar.

- Click the “+” sign next to “Main Navigation” and select “Blank Page.” A “New Page” will appear in the left sidebar and your website’s main navigation bar (the top menu of your site).
- If you don’t want a page to appear in the main navigation, add it from the “Not Linked” menu.

- Double-click “New Page” in the “Main Navigation” menu to rename it. We’ll name it simply “Contact.”
Tip: You can also name your page and manage page settings by clicking the gear icon ( ) next to your Contact page’s new name. Then go to “General” in “Page Settings.”
- Repeat this process for every new page you want to add.
2.2 Add Text to the Contact Page
You’ll need to include the best ways for visitors to reach you on your contact page. These could be your social media accounts, phone number, contact form, or email address. You can also add a short message to encourage your visitors to reach out. For this contact page, we’ll add:- A title
- A contact form
- A brief message inviting your visitors to fill out the contact form
- A sneak peek gallery of your portfolio
- Click on the Contact page from the “Main Navigation” menu.
- Click the “Edit” button (top-left corner of the page preview) to enter the page editor.

- Click the blue “Add Section” button in the blank space.

- Choose “Add a Blank Section” from the “Add a Section” menu that will pop up.

- Hover over the blank section to reveal the “Add Block” button in the top-left corner of the section.
- Click “Add Block.”

- Select “Text” from the menu.
- Drag the text block to cover half of the page.

- Write the Contact page title in the text block. We wrote “Contact” here.
- Click the pencil icon (
) to access the editing toolbar. The bar will appear above the text box. From the bar, you can access standard text editing options like heading and paragraph styles, colors, alignment, and bullets.

- Click the format drop-down menu and make this text a “Heading 1.” You’ll likely use this formatting only once on every page for your page title.
- Click
to automatically resize the text to fit the text block.

- Click anywhere outside the block and select it again to reopen the block toolbar. Click
to bottom-align the text.

- Place the text block below the title. Click the pencil icon (
) to access the editing toolbar and select “Paragraph 2” from the format drop-down menu. - Write a short, inviting message for visitors to contact you.
Tip: You can use Squarespace AI to generate text and images for your website. Click the pencil icon ( ) to open the editing toolbar and select the Squarespace AI icon ( ).
Step 6: Align the elements

- If needed, drag and resize the text blocks to align them. For this Contact page, we made the “Contact” text block a bit smaller and brought the two text blocks closer together.
2.3 Add a Contact Form
Your potential customers will likely have questions before hiring you, so it’s important to add a simple contact form for inquiries. With Squarespace, you can add a ready-made contact form you can customize to your needs. Consider keeping it easy to answer by adding only essential fields in a clear order. Step 1: Add a form block- Click “Add Block.”
- Select “Form” from the list of options to open a contact form template. Drag it below the text blocks.

- Click the form to reveal the block toolbar.
- Click the pencil icon (
).

- Click “Edit Form Fields” under the “Content” tab to add, remove, or rename fields.
- Optional: In “Edit Form Fields,” select “Email” and turn on “Email Signup” to let visitors subscribe to your newsletters. You’ll see it as the “Sign up for news and updates” option in the form.

- In the “Edit Form Fields” panel, click “Add Field.”
- Select the “Radio” option from the list of available field types.
- Click on the newly added “Radio” field in the “Edit Form Fields” panel

- Write your field’s new name under “Label.” We named this field “What services are you interested in?” You’ll have to do this for every field you want to label with a custom name.
- If you want to make this field mandatory, toggle on the “Required” switch.
Note: Turning on the “Required” switch ensures your visitors fill out the field before submitting the form. This option is on for the default fields in the form template, so you’ll need to switch it off if you want any of them to be optional.

- Click on “Options” to list the services you offer. For example, on our website, we added four options: “Portrait,” “Food,” “Travel,” and “Wedding.” You can add as many options as necessary.

- We renamed the “Date” field “Preferred Date.”
- Select “Subject” from the list of fields in the “Edit Form Fields” panel.
- Rename the field. We changed the name to “What is your budget?” and made it an optional field.
- Go back to the “Edit Form Fields” panel.
- Drag and drop the fields in the desired order.

- Go back to the editing panel and go to the “Design” tab.
- You’ll see four icons under “Button Alignment.” To stretch the “Submit” button across the form as we did on our website, click the last icon (
).

You can use the tools under the “Content” and “Design” tabs to further customize your contact form.
2.4 Connect an Email To Receive Website Submissions
Get an email with your business domain, like [email protected], to appear professional in the eyes of your visitors. This should be a dedicated email you’ll use solely for client interactions – you don’t want your client messages to get buried under sale alerts from your favorite online store.If you don’t have a business email, Squarespace Business and Commerce plans include a free one for the first year.
Once you create an email with your business domain, you’ll need to add it to your Contact page.
Here’s how:

- Double-click your form to open the editing panel and click the “Storage” tab.
- Click the “Email Notification” field and type your business email address.
2.5 Add a Gallery Next to the Contact Form
Think of a gallery next to your contact form as a mini portfolio that showcases your work. You can also add logos of brands you’ve worked with, images of yourself and your team, or screenshots of work you’ve produced – whatever works best for your business. If you specialize in multiple areas like weddings, hospitality, or travel, make sure your gallery reflects your diverse talent and experience. Step 1: Create a gallery with images- Click “Add Block.”

- Select “Image” from the list.
- Drag the image block to the right half of the section.

- Duplicate the image block by clicking
five times. You need a total of six image blocks.

- Place two image blocks in a row. You need to create three rows with two images in each row.



- Select how you want to add an image:
- “Upload File” to upload an image from your device
- “Select From Library” to add an image from your Squarespace library
- “Browse Stock Images” to source the image from Squarespace’s stock of free and premium images
- “Upload From Mobile” to upload an image from your phone or tablet

- Once you add your first image, click the pencil icon (
) above it. Go to the “Design” tab. - Select “Fill.”
- Repeat the process for all six images.


Squarespace has a built-in photo editing toolkit with basic photo settings like brightness, contrast, and saturation. To access it:
- Select an image you need to alter and crop.
- Click the pencil icon (
) in the toolbar. - Click “Edit” below the uploaded image in the “Content” tab.

- Click “Edit Section.”

- Disable “Fill Screen”

2.6 Optimize for Mobile
Some elements might not appear in the correct order, overlap, or get cut off in the mobile preview. That’s completely normal and pretty easy to fix in Squarespace. Check for these issues and fix them directly in the mobile preview. Step 1: Launch “Mobile View”
- Click the icon that looks like a mobile phone (
) in the editor’s upper-right corner.


- To group images with similar visual styles, use the move icons (
and ) to organize them. We moved up the black-and-white image at the bottom of the gallery next to the first black-and-white image.

- Then, we made the images thinner so both could fit into one row.

- We placed the black-and-white images next to each other.

- We made one of the images longer to add more playfulness to the gallery. If you decide to do this, make sure you use an image with a vertical layout.
- Move up
to remove unnecessary blank space.


2.7 Save the Section
You may need to reuse some sections, like the contact form or testimonials, many times throughout your website. You can save these sections for future use, so you don’t have to rebuild them from scratch. This not only saves you time but ensures a consistent look throughout your site.
- Click outside the elements of the Contact section to reveal section buttons.
- Hit the heart icon (
) to save it.
You can find your saved sections under “Saved Sections” when adding a new section. Reuse them as many times as needed. Repeat this action for every section you might need to use more than once.
Now, let’s save your entire progress so far!
2.8 Save Your Contact Page
Just one tiny step, and you can go off to your next adventure – your About page. You’ll need to repeat this step whenever you finalize a page design – or need a break to cuddle with your cat.
- You’ll see two buttons in your upper left corner. Click the “Save” button first.
- Then click “Exit” to leave the page.