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)!

What else should I consider?

While speed, reliability, scalability, and security should be your chief concerns, Webflow offers a host (pun sheepishly intended) of other features that have a significant impact on SEO and performance, and may not be offered by most hosting services.

HTTP/2

2015 saw the release of the first new Hypertext Transfer Protocol since 1999: HTTP/2.

This new standard promises faster websites across the web — but not all hosting platforms support it yet. Because Google has always cared about page speed, there’s a good chance that HTTP/2 will become a component of their ranking algorithm soon.

Here are some benefits of HTTP/2 support/compatibility:

  • Multiplexing: Your browser can receive requests over multiple connections, not just one. Think of it like switching from a one-lane road to an interstate.
  • Header compression: Your browser loads the top of your pages first, before the rest of the page, which means your site visitors see content faster. On mobile especially, this is a big improvement.

Webflow’s hosting has been HTTP/2 compliant for a couple years now, unlike services out there. (And even hosts who do offer it typically only do so on higher-tier packages.)

Today, all assets published to a Webflow site are served via HTTP/2 — increasing page load performance when a large number of assets need to be downloaded.

Other powerful features of Webflow hosting

Everything above is more or less essential, but there are many other features that can make managing your website a lot easier and more convenient. These include:

  • Automatic backups and version control (you can also save and name a site version whenever you’d like with the key combo Command + Shift + S on Mac or Control + Shift + S on Windows)
  • Site-wide and per-page password protection
  • Simple publishing workflows
  • Responsive images
  • Protection against distributed denial of service (DDoS) attacks

On top of these features, Webflow hosting includes:

  • Form submissions (manage lead gen and let us store your data for you). It’s like Wufoo, but built into Webflow!
  • SEO and social tools: manage OpenGraph and SEO meta tags in one convenient interface. Easily combine it with the CMS to automate your metadata optimization.
  • Dynamic embeds: integrate Webflow CMS with Shopify for ecommerce, SoundCloud for music, Eventbrite for events, and anything else that uses custom code embeds.

Webflow combines all these elements in a first-class global hosting infrastructure that’s available at the click of a button. This means that when you publish with Webflow, your site’s files and assets are published across the globe and immediately ready for any amount of traffic, from any location.

Want to know how much we believe in Webflow hosting?

We put a lot of thought and effort into making Webflow hosting one the the best hosting services out there. We’ve seen Webflow-using businesses like Kisi grow their organic traffic by over 300%, while also supporting thousands of requests per second for businesses like Eventbrite.

In fact, when Eventbrite launched their Amstel Live festival page with Webflow, they received over 10,000 requests a second — resulting in over 3,000,000 page views in just one hour. Webflow hosting was able to handle it without a hitch.

But above all, we believe in our hosting platform so much so that we use it for our own websites, which see hundreds of thousands of visitors from around the globe every day, and have seen nearly perfect performance over the last year.

Mat Vogels

I'm a web creator and Webflow evangelist. Follow me @matvogels.

You might also like...

More

Join the conversation

What's Webflow?

Try it for free
Designer

Designer

The power of CSS, HTML, and JavaScript in a visual canvas.

Interactions

Interactions

Build website interactions and animations visually.

CMS

CMS

Define your own content structure, and design with real data.

Ecommerce

Ecommerce

Goodbye templates and code — design your store visually.

Editor

Editor

Edit and update site content right on the page.

Hosting

Hosting

Set up lightning-fast managed hosting in just a few clicks.