We rank vendors based on rigorous testing and research, but also take into account your feedback and our commercial agreements with providers. This page contains affiliate links. Advertising Disclosure

Module 2: The Contact Page – Portfolio

Make it simple for visitors to get in touch. Build an intuitive contact page that includes an enticing contact form.
Ivana Shteriova Written by:
David Alex Squarespace Web Designer: David Alex
Time to Complete Module: 1 hour 15 minutes
Last updated: March 04, 2025
Portfolio contact 1 optimage1
Click the image above to preview the live page
You might wonder why we’re starting with the contact page instead of the Homepage. It might seem counterintuitive, but the contact page is actually much easier to build, so it makes for an easier start.

We want you to get familiar with Squarespace before tackling the more complex pages. By the time we get to the Homepage, you’ll know how Squarespace works and use it with ease.

Without further ado, let’s begin!

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
Fonts (Paragraphs)
  • 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
Fonts (Buttons)
  • Family: Instrument Sans
  • Weight: 600
  • Style: Normal
  • Letter spacing: 1 em
  • Text transform: None
  • Size (primary, secondary, and tertiary buttons): 1 rem
Fonts (Miscellaneous)
  • Family: Space Mono
  • Weight: 400
  • Style: Normal
  • Line height: 1.5 em
  • Letter spacing: 0 em
  • Text transform: None
  • Size: 0.8 rem
Main Color Palette
  • HEX #F1F1F1
  • HEX #FFFFFF (white)
  • HEX #FFD53E
  • HEX #44423B
  • HEX #221C1C
Squarespace will derive 10 color themes from your main color palette. These color themes are fully customizable.

Buttons (Shape)
  • Primary: Custom
  • Secondary: Custom
  • Tertiary: Pill
Forms
  • Field shape: Custom
Miscellaneous
  • Animations: Flex at a slow speed
Without further ado, let’s build your Contact page!

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

squarespace portofolio module2 2
  • Open the “Pages” menu located on the Squarespace editor’s left sidebar.
Step 2: Add a “Main Navigation” blank page

squarespace portofolio module2 3
  • 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.
You can always move a page between “Main Navigation” and “Not Linked,” no matter where you first added it.

Step 3: Name the new page

squarespace portofolio module2 4
  • 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.
Now, let’s move to the fun part – page design!

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
Step 1: Open the page editor to start the design process
  • 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.
Step 2: Add your first section

squarespace portofolio module2 5
  • Click the blue “Add Section” button in the blank space.
squarespace portofolio module2 6
  • Choose “Add a Blank Section” from the “Add a Section” menu that will pop up.
Step 3: Add a text block

squarespace portofolio module2 7
  • Hover over the blank section to reveal the “Add Block” button in the top-left corner of the section.
  • Click “Add Block.”
squarespace portofolio module2 8
  • Select “Text” from the menu.
  • Drag the text block to cover half of the page.
Step 4: Add a title to the Contact page

squarespace portofolio module2 9
  • 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.
squarespace portofolio module2 10
  • 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.
squarespace portofolio module2 11
  • Click anywhere outside the block and select it again to reopen the block toolbar. Click to bottom-align the text.
Step 5: Add another text block

squarespace portofolio module2 12
  • 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

squarespace portofolio module2 13
  • 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.
Now, you’ll add the actual contact form below these two text blocks.

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.
Step 2: Customize the contact form

squarespace portofolio module2 14
  • Click the form to reveal the block toolbar.
  • Click the pencil icon ( ).
squarespace portofolio module2 15
  • 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.
Step 3: Add a “Radio” field to your form

The “Radio” field lets you create a list of options for your visitors to select a single answer. I’ll show you how to add and customize a new field using this feature.

squarespace portofolio module2 16
  • 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
squarespace portofolio module2 17
  • 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.
squarespace portofolio module2 18
  • 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.
Step 4: Add a “Date” field

squarespace portofolio module2   1 1
  • We renamed the “Date” field “Preferred Date.”
Step 5: Customize an existing “Subject” field
  • 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.
Step 6: Arrange the fields in the desired order
  • Go back to the “Edit Form Fields” panel.
  • Drag and drop the fields in the desired order.
Step 7: Adjust button alignment

squarespace portofolio module2   1 2
  • 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 ( ).
squarespace portofolio module2   1 3

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:

squarespace portofolio module2   1 4
  • 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.
Congrats! You now have a fully functional contact form that can bring business straight to your mailbox.

Now, let’s jazz it up.

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.”
squarespace portofolio module2   1 5
  • Select “Image” from the list.
  • Drag the image block to the right half of the section.
squarespace portofolio module2   1 6
  • Duplicate the image block by clicking five times. You need a total of six image blocks.
squarespace portofolio module2   1 7
  • Place two image blocks in a row. You need to create three rows with two images in each row.
squarespace portofolio module2   1 8

Step 2: Upload the images

There are two ways to upload an image in Squarespace:

squarespace portofolio module2   1 9

Option 1: Click the “+” sign in the middle of the image block.

squarespace portofolio module2   1 10

Option 2: Click the “Edit” pencil icon ( ) above the image block. Under the “Content” tab, click the “+” sign where it says “Add an Image.”
  • 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
squarespace portofolio module2   1 11
  • 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 portofolio module2   1 12

Step 3: Make final edits

squarespace portofolio module2   1 13

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.
squarespace portofolio module2   2 1
  • Click “Edit Section.”
squarespace portofolio module2   1 14
  • Disable “Fill Screen”
squarespace portofolio module2   1 15

Drag and drop the elements, using the grid as a guide to align them properly until you’re satisfied with the result. Play around with different settings to see what looks best, and tightly align elements to reduce unnecessary blank space. You’ll need to repeat this for every section on your website.

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”

squarespace portofolio module2   1 16
  • Click the icon that looks like a mobile phone ( ) in the editor’s upper-right corner.
Step 2: Make adjustments for mobile

squarespace portofolio module2   1 17

There isn’t anything wrong with the unedited mobile preview, but we wanted to shake things up to make it more appealing.

Here’s what we did:

squarespace portofolio module2   1 18
  • 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.
squarespace portofolio module2   1 19
  • Then, we made the images thinner so both could fit into one row.
squarespace portofolio module2   1 20
  • We placed the black-and-white images next to each other.
squarespace portofolio module2   1 21
  • 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.
squarespace portofolio module2   1 22

Here’s our mobile-optimized Contact page:

squarespace 2

If you followed every step from our guide, that should be it. However, you might need to make different adjustments if you add or remove some elements. The process is pretty intuitive – simply tweak what looks off.

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.

squarespace portofolio module2   1 23
  • 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.

squarespace portofolio module2   1 24
  • You’ll see two buttons in your upper left corner. Click the “Save” button first.
  • Then click “Exit” to leave the page.
Your Contact page is ready to receive visitor submissions. Now, let’s apply what you’ve learned to create your About page. Things will only get easier from now on!

Ready?

3529664
50
5000
114312654