Homepage: contact form

A beautiful site showing all your fantastic work isn’t worth much if you don’t also make it easy for clients to get in touch with you. The solution? A strong call to action with a front-and-center contact form on your homepage that encourages clients to hire you. Plus, you’ll turn the contact form into a Symbol so you can reuse it as much as you’d like. 

In this lesson, you’ll learn how to add a contact form to your project doing the following:

1. Add the Form
2. Configure the Form
3. Style the Form
4. Make it a Symbol

Follow along and download the assets for this lesson.

Add the Form

Let’s add a third Section to the homepage: 

1. Open the Navigator
2. Open the Add panel
3. Drag a Section into the Navigator and place it at the under the existing 2 Sections

Let’s reuse the “Section” class on our new Section to bring along the 60 pixels of top and bottom padding we had styled before: 

1. Open the Style panel
2. Click into the Selector field
3. Choose “Section” from Existing classes

Add a Container to the new Section to keep our elements neatly bound:

1. Open the Add panel
2. Drag a Container inside the new Section
3. Select the Container and click into the Selector field
4. Choose “Container” from Existing classes

Let’s add a Form block to the Container:

1. Open the Add panel
2. Drag a Form block into the Container

Configure the Form

By default, the Form block comes with 2 items — “Name” and “Email address” fields. Let’s add third field and a corresponding label: 

1. Open the Add panel
2. Drag a Text area into the Form (so visitors can add a message)
3. Open the Add panel
4. Drag a Label into the Form above the Text area field
5. Double click the default Label text and update it (e.g., “Message”) 

Let’s style our Field label:

1. Click the “Name” Field label
2. Open Style panel > Typography
3. Open More type options and select Capitalize
4. Set letter spacing to 2 pixels
5. Decrease the font size to 12 pixels

A “Field label” class was automatically created when we made the above style changes. Let’s apply those changes to the other Field labels in our Form:

1. Select “Email Address” Field label
2. Open the Style panel
3. Click into the Selector field
4. Choose “Field label” from Existing classes

Repeat the above steps for the remaining Field label (e.g., “Message”). 

Note: You can quickly access the Selector field in the Style panel by selecting your element and pressing Command + Enter (Mac) or Control + Enter (Windows). 

Now that the “Field label” class has been applied to all the Field labels in our Form, let’s update the font size (which will affect all elements with the same class applied):

1. Select a “Field label” from your Form
2. Open Style panel > Typography
3. Decrease the font size to 11 pixels

Style the Form

Select the Form block to style it:

Let’s change its font color:

1. Open Style panel > Typography
2. Click the color picker and set the font color to black

Change the Background color to make our text legible against it: 

1. Open Style panel > Backgrounds
2. Click the color picker and set it to a light gray (e.g., “#e9e9e9”) 

Let’s add some padding: 

1. Open Style panel > Spacing
2. Add 30 pixels of padding on all sides

Note: You can quickly add margin or padding to all sides of an element by holding down Shift, and dragging one of the margin or padding controls.

We’ll also add a Heading to our Form block to encourage our visitors to get in touch with us: 

1. Open the Navigator
2. Open the Add panel
3. Drag a Heading into the Navigator and place it inside the Form block at the top
4. Double click the Heading to edit the default text (e.g., “Let’s work together!”)

Because we’ve already created a “Secondary heading” class, let’s apply that same class to the Heading in our Form: 

1. Select the Heading in the Form
2. Click into the Selector field
3. Choose “Secondary heading” from Existing classes

Good to know: The original “Secondary heading” on your homepage inherits its color (white) from its parent element — the Body (all pages tag). The “Secondary heading” placed in the Form inherits its color (black) from its parent — the Form block. 

Let’s add a Paragraph to the Form block: 

1. Open the Navigator
2. Open the Add panel
3. Drag a Paragraph into the Navigator and place it inside the Form block and under the “Secondary heading”

Because we don’t have any previous paragraph styles that would work well inside our contact form, let’s style this paragraph and create a new class for it: 

1. Select the Paragraph in your Form block
2. Open Style panel > Typography
3. Click the color picker and set the opacity to 68
4. Click into the Selector field and rename the default class (e.g., “Dark paragraph”) 
5. Open Style panel > Spacing and increase the bottom margin to 30 pixels

Let’s add a Grid to our Form to make our fields display side-by-side:

1. Drag a Grid from the Add panel into the Form and place it at the top
2. Right click the second Grid row and select “Delete row” from the settings modal

Let’s add a Div block inside the Grid to hold some of our Form elements: 

1. Open the Navigator
2. Open the Add panel
3. Drag a Div block into the Navigator and place it inside the Grid

Select and drag the “Name” Field label and its associated Text field into the Div block.

Let’s add another Div block to the second Grid cell so we can place our remaining Form elements inside it: 

1. Open the Navigator
2. Open the Add panel
3. Drag a Div block into the Navigator and place it inside the Grid under the first Div block

Select and drag the “Email address” Field label and its associated Text field into the second Div block. 

Let’s move the Submit button to the right side of the Form. We’ll start by setting the Form to Flex:

1. Select the Form 
2. Open Style panel > Layout 
3. Set Display to Flex and Direction to Vertical

We’ll override the Submit button’s child behavior and change its Background color:

1. Select the Submit button 
2. Open Style panel > Flex child > Alignment and order 
3. Choose right alignment
4. Go to Backgrounds and click the color picker
5. Change the default color (e.g., “#6057c3”)

You can also create a variable so you can reuse the color on other elements.

Let’s add some rounding to the Submit button:

1. Open Style panel > Borders
2. Set the Radius to 5 pixels

To give the button some breathing room, push the button away from the form elements above it: 

1. Open Style panel > Spacing
2. Set top margin to 15 pixels

Make it a Symbol

Finally, let’s make the Form block a Symbol so we can reuse it throughout our project: 

1. Select the Form block
2. Right click the Form block’s label
3. Choose “Create Symbol” from the menu and name it (e.g., “Contact form”) 

There you have it — a contact form just waiting for brand new submissions!