In this tutorial, I want to show you how to make an email submission form that spans just one line… something like this:
We’ll start by creating a new site based on the Slate Template.
-
Remove the ‘Go to App Store’ button by clicking on it and pressing Delete on your keyboard
-
Then drag in a new Form Block into the Call to Action container:
- Delete the two form labels as well as the Name textbox - we only want the Email textbox for this example:
- Select the email text field, and give it a class - something like ‘Email Field’ will do:
- Now that our field has a class, we can apply some basic position styles (note that properties that you set will turn blue):
- Height: 30px
- Width: 290px
- Float: Left
- Now we’ll add a purple border around the text field and give it some custom rounded corners:
- Because we’ll want the same purple background for the submit button later, let’s also make a swatch. When you’re picking color for your border, click on the
[+]button to create a swatch:
- Now we’re ready to move on to the submit button. Give it a class called “Notify Button” and double-click on the “Submit” text to change it to something more awesome, like “Notify Me!”:
- Now let’s give it the same background color as the border on the email box. With the notify button selected, click on ‘Fill Color’ drop icon, and select our purple swatch:
- Now give the button style the same height as the input (40px, or whatever makes sense for your design), and tweak the padding / font / font-size so that they look more pleasing:
- Round off the corners to match the style of the email box:
- You can then add more granular styles (shadows, etc) to make your form look even nicer:
- Now, let’s make the success message look a bit nicer than the default green. Double-click on the outer form element and choose ‘Success’ to show the Success state in the UI:
- Click on the success message, and give it a class like “Thank You”. I’ve also double-clicked on the text inside and added a more personal message. (You can actually add anything here that you’d like, like a link to a teaser page, a funny video, or whatever! Just drag-and-drop just like you would anywhere.)
- With the “Thank You” class applied, we can now add a bunch of our own custom styles to make this message look nice and fit the design of our site:
- And we’re done! Feel free to add your own custom styles (including hover, focus, and pressed states) to make this form even nicer!
Here’s the end result: 
Check out the published page here: http://inline-email-form.webflow.com/