How to Create a “Contact Us” Page Using CMS Content

In this tutorial, you’ll learn how to build a dynamic and responsive “Contact Us” page using the Flipsite Website Builder. We’ll connect our CMS collection of employees to the layout, style it to look clean and professional, and add a click action to send an email directly to each person.

🛠 Step-by-Step Guide

1. Prepare Your CMS Collection

Before starting, make sure your CMS contains a collection of employees with the following fields:

• Image
• Name
• Title
• Email address

You can also have other fields, but in this example we'll only use the ones above. You can add or edit entries in the CMS anytime.

2. Set Up the Page Structure

• Drag a Grid layout onto the page. This will hold all employee cards and respond well to different screen sizes.
• Inside the grid, place a Vertical Flex Component. This will be the base structure for each employee card.

3. Design the Employee Card

Inside the vertical container:

• Add an Image component for the profile picture.
• Below the image, add another Vertical Flex container.Inside this, place a Heading for the name.Then add a Paragraph for the title.

This works as the template for each employee. You only need to build this once because next we'll bind our CMS collection for employees to the main Grid component and then bind the fields inside that to specific components.

4. Connect CMS Data

• Select the Grid layout, and bind it to your CMS collection of employees.
• Flipsite will now repeat the card for each person in the collection.
• Next, bind the following:Image → Employee photo. Heading → Employee name. Paragraph → Job title

Check the video above for how to do the binding. Binding happens by clicking on the header of the field you want to bind data to, selecting the Bind function from the popup and picking which data to bind.

5. Style the Components

• Set the grid alignment to vertical (top to bottom).
• Add aspect ratio to the images for consistency — try 4:3.
• Adjust the text size for names and titles.Set the title color to your primary brand color.Use lighter or bolder font weights for visual hierarchy.
• Add spacing/gap between elements in the container for a clean look.
• And any other visual styling that pleases your eye!

6. Add Click-to-Email Action

• Select the main container for the employees.
• Add a Click Action → Send Email and bind the email address from the CMS.
• Now, clicking on an employee will open the user’s email app with the correct address pre-filled.

7. Test and Add More Contacts

• Add a new employee to the CMS to see it automatically appear on the page.
• All bindings, layouts, and styles are preserved for new entries.

✅ You’re Done!

You’ve now created a dynamic, fully responsive Contact Us page that updates automatically with your CMS content.