Prerequisites

This demo assumes you are familiar with the basics of editing on The.com and CSS.

Intro

In this demo, you'll be seeing how to make a simple landing page with an email collection form. This is the final result:

Note about Forms

The.com integrates with Kwes Forms easily. This demo won't go into detail about how to integrate this service but you can learn how to do that in this article.

If you are following along and want to use a different form service, you can check out our integration pages. You can embed anything on The.com, and this demo will not go into detail about that.

Demo

Set up

The first thing we can do to set up our site is to upload any custom fonts and get our page ready to edit.

1. Drag and drop any font files onto the Worksheet to upload them.
2. Create a new page or open a blank one.
3. Set the backgruond color to #000 (or "black"). 
4. Set the text color to #FFF (or "white").
5. Set the font family to your custom font. 
6. Switch to the Page Head
7. Click to type in a new title for your page. This text will appear on the tab when a user opens your page in the browser. 
8. Drag and drop an image over the Favicon Element. The uploaded image will appear in the tab when a user opens your page in the browser. 
9. Switch back to the Page Body. 

Nav

It's time to start building! Let's make a simple navigation section as a Block. 

1. From the worksheet, create a new Block and rename it Nav.
2. Add a Link Element and give it a href value of "/". Doing this will set the link to go to the homepage.
3. Create an Image Element nested in the Link element. Drag and drop an image for the logo. 
4. Follow the styling in the video above.
5. Don't forget to edit for mobile styles!

Go to your page and add the Nav Block.

Hero Section

We want the hero section to take up the full space on the screen and add a background image.

1. Add a Div Element to the Page and rename the label to "Hero."
2. Set the "Min Height" cell to 100vh, which makes the height equal to the device's screen height.
3. Drag and drop an image into the Background Image cell.
4. Set the Background Size cell to cover so that it takes up the full width of the screen. 
5. Give the Hero div some padding

Hero Content

Next, we need to add the content that will be in the Hero Div. 

1. Add a Div and relabel it to "Col 1"
2. Nest an H1 Element in the div and give it some text.
3. Nest a Form Element in the div.
4. Style the Col 1 Div to make it 50% of the screen size. 
5. Style the Hero div to center the text on the page. 

Form

Lastly, we need to add a form that will collect the user's email. Decide which form integration you are using and add the appropriate scripts. If you are following along with the video then

1. Add a Script Element and paste the Kwes script URL into the Source cell. Set Defer to true.
2. Within the Col 1 div, add a Form Element. Copy the action from Kwes and paste it into the Form's action attribute.
3. Within the Form, add a Label, Input, and Button Element.
4. Style these elements as you wish.

That's it! You have made a simple landing page with a form that collects users' emails.

Note: the form will not work within the app, so you need to deploy the page!

Deploy

Hit Deploy to publish your page! If you are using Kwes Forms, you'll need to submit an initial submission to fully connect the form.