Keep an eye on your inbox!
Hmm, that didn't work. Try again?

How to design a natural-language form in Webflow

Learn to build webforms that speak your users' language.

Mat Vogels
November 13, 2015
Tutorials

Earlier this week, we featured some beautiful form design patterns and got a lot of requests to demo the natural-language form. So I decided to put together a quick how-to so you can build one for your own Webflow site in no time.

Follow the steps below, and check out the final design in Webflow here.

Step 1: Add the form element to the page

First, add the form element to your canvas. Simply drag the Form Block element from the Add panel into the space you want it on the site.

Adding the form block element to the canvas
Just drag and drop the Form Block element on to the canvas.

Step 2: Add classes and style

Now we need to add classes to the individual form elements so we can style it them.

Then create and style as noted below.

I’m going to add a class to the field label and give it these styles:

Class Name: Field Label

Display: Inline

Font Family: Lato

Font Weight: 300 - Light

Font Size: 40px

Line Height: 40px

Note that you can adjust the visual styles all you like, but the display setting is key to the functionality here.

I’ll also add a class to the text field, and style it like so:

Class Name: Text Field

Display: Inline

Width: 240px

Height: 50px

Font Family: Lato

Font Weight: 300 - Light

Font Size: 40px

Line Height: 40px

Bottom Border: 2px #adadad

Opacity: 50%

Step 3: Add more field labels and text fields

We now have one field label and one form field (I deleted the extras to clean things up a little). Now I’ll simply copy and paste more fields using Command/Control+ C and Command/Control+V. For this example, I need five form fields.

Now, copy and paste form fields till have all the inputs you need.

Step 4: Tweak the form fields' widths

Because each of the form fields asks for a different piece of information, we can adjust the width to better match the content. For example, it doesn’t make sense for the age field (which will most likely have only two characters), be as long as the name field (which will have many).

To account for that, I’ll add another class to each field so I can adjust the widths accordingly.

Adjust the widths of the text fields as needed. 

Step 5: Design the success message

The form is ready to go! But we want our users to experience a pleasant success message once they’ve completed it. To design this, just click on the form to select it, and open the Settings Panel.

Click the Success button to see the form in its Success state.

Finally, style your success message. Because success messages are warm and fuzzy.

Any styles and classes we add here will only show up when the user submits the form. Here are the styles I used:

Class Name: Success Message

Background Color: #1ab07a

Padding Top & Bottom: 50px

Class Name: Success Text

Color: #ffffff

Font Size: 34px

Line Height: 50px

Now go build your own natural-language form

Of course, this is just one way to create a natural language form in Webflow. If you had trouble following the above steps, you can inspect the natural-language form in Webflow.

Do you have a unique form that you’ve created in Webflow? Share it with us (and the rest of the community)!

5. Zestful

Zestful helps companies book fun, unique, and local group activities available through their platform. You might expect a site like theirs to scream FUN! Well they don’t disappoint. Their upbeat vibe supports their mission to help teams socialize outside the office without the usual headache that comes with event planning.

6. Petal

Petal is a younger company, but they stand out because design pervades the focus and direction of their marketing. Even their product (a new, no-fees credit card) features a stunning and unique design. Their website follows suit — it’s a breath of fresh air — with beautiful colors, generous whitespace, and clear, concise copy.

‍Petal’s website supports their mission of providing easy credit access by making credit feel simple, approachable, and maybe a bit fun too.

7. BankMobile

BankMobile’s website makes banking look hip and modern, as hard as that might sound. With bold colors, clearly presented information and a consistent feel throughout the site, we especially appreciate the unique horizontal scrolling section they use to walk through the UI on their mobile app.

8. Bonsai

Freelancers are constantly on the lookout for new tools and products to make managing their business easier — Bonsai focuses on checking as many of those boxes as possible with tools that range from invoicing and payments to proposals and contracts. With so many features in their platform, their marketing site needs to effectively explain and differentiate how their products can help freelancers. A dedicated page for each one does just that.

‍Bonsai provides detailed product overviews with dedicated landing pages for all of their major features.

Bonsai gets bonus points for creating an impressive resource hub for freelancers. They share survey data about rates, best tools for freelancers, and the top places to find new work.

‍Bonus points for great, useful content for their freelance audience.

9. AltSchool

As an education partner, AltSchool has an important story and mission that underpins their work. Their website does a great job sharing their story with photography, copy, and a consistently communicated mission: to enable all children to reach their potential.

AltSchool uses photography and to bring their mission as educators to the fore.‍copy

Ready to build a business site of your own but not sure where to start? We’ve got you covered. Check out our full business site rebuild course on Webflow University.

Did we miss any standouts? Let us know in the comments!

Mat Vogels

Mat is a web creator and evangelist at Webflow. Follow me at @matvogels.

You might also like...

More

Join the conversation

Get free web design insights...

In your inbox, every other week. And unsubscribe in a click, if you want.

Keep an eye on your inbox!
Hmm, something went wrong. Try again?

What's Webflow?

Try it for free

Designer

Bring your wildest web designs — and client sites — to life, without writing code.

CMS

Build completely custom content structures for client sites and prototypes.

Hosting

World-class web hosting at your fingertips, without all the usual hassles.