How we built Webflow Pitch

Want your client/friend/neighbor to use Webflow? (So do we.)

How we built Webflow Pitch

Corey Moen
Manager Web Design
View author profile
Corey Moen
Manager Web Design
View author profile

We all know how the saying goes — friends don’t let friends use non-Webflow platforms.

Whether it’s your neighbor upstairs, your new design client, or your boss that you’ve only seen virtually for the last year — explaining the value and potential that comes with using Webflow, can often be a complex task depending on the recipient and their needs. 

They may prioritize a security-first platform, or be looking for something that is highly customizable, or need a platform that can help them iterate quickly — or — want a platform that can do all three. 

Sure, you can send a few links to various Webflow marketing or landing pages — but the overall message is fragmented and impersonal — and doesn’t provide a cohesive experience that showcases why Webflow is the best choice for them. 

We’ve got a solution for that. Webflow Pitch is our easy-to-use site that helps you convince anyone in your life to use Webflow.


An image of the Webflow Pitch intro page.

It’s simple — just enter in some key details, select what speaks to their needs best, and we’ll send you a custom, ready-made presentation. Better yet, the process is so quick —  you can spin up multiple presentations for multiple people in an instant. 

Want your client, friend, or neighbor to use Webflow? (So do we.)

Webflow Pitch is our easy-to-use site that helps you create custom presentations to convince anyone in your life to use Webflow.

Read now

How we built it

Webflow Pitch started with the simple question of how we could create a quick way for anyone to generate a simple and personalized overview of Webflow’s differentiators and value props. 

First, we created a very simple proof of concept consisting of a form and a Zapier integration to take the form data and create a new CMS collection item that represented the personalized presentation page. 

On the collection template page we create a simple full height section layout representative of a typical presentation. We then binded the personalized CMS data to different elements within the content and used conditional visibility to hide entire sections per the original form submissions preferences.

An image of part of a Webflow Pitch presentation.

To take the presentation vibes a step further we also integrated the Fullpage.js library to make the page scroll only a section at a time. While we don’t typically recommend any library that takes over native browser scrolling for accessibility reasons, we felt this narrow use case made sense for it. Plus, the Fullpage library allows you to use your keyboard arrows to navigate between sections.

After refining the general layout and functionality of the presentations itself, we took a second look at the presentation generation step. We realized a basic form didn’t provide much context on what the final result will look like. So, instead of making a small form on a typical marketing page, we made the entire customization page one large form and built a UI reminiscent of modern presentation software. 

An image of editing the Webflow Pitch presentation.

With some additional low-code customization here and there to get the interactions and accessibility in line, we were able to create a unique experience that captures typical form input, select, and checkbox data in a way that we hope you love and are inspired by.

If you have a story on how Webflow Pitch helps you advocate for Webflow, or some other anecdotes or ideas to share, please let us know in the comments.  

Read now

Last Updated
July 6, 2021

Related articles

How to write a website proposal: Steps, tips, and 3 free templates
How to write a website proposal: Steps, tips, and 3 free templates

How to write a website proposal: Steps, tips, and 3 free templates

How to write a website proposal: Steps, tips, and 3 free templates

Strategy
By
Webflow Team
,
,
Read article
5 steps to build a membership website in 2024 (with no-code)
5 steps to build a membership website in 2024 (with no-code)

5 steps to build a membership website in 2024 (with no-code)

5 steps to build a membership website in 2024 (with no-code)

Development
By
Corey Haines
,
,
Read article
Carousel website design best practices & examples
Carousel website design best practices & examples

Carousel website design best practices & examples

Carousel website design best practices & examples

Design
By
John Moore Williams
,
,
Read article
How to perfect your next client presentation
How to perfect your next client presentation

How to perfect your next client presentation

How to perfect your next client presentation

Strategy
By
Mariah Driver
,
,
Read article
Presenting your web design portfolio: The complete guide for winning new clients
Presenting your web design portfolio: The complete guide for winning new clients

Presenting your web design portfolio: The complete guide for winning new clients

Presenting your web design portfolio: The complete guide for winning new clients

Design
By
Webflow Team
,
,
Read article
How to sell Webflow to clients: best practices
How to sell Webflow to clients: best practices

How to sell Webflow to clients: best practices

How to sell Webflow to clients: best practices

Strategy
By
John Moore Williams
,
,
Read article

Get started for free

Try Webflow for as long as you like with our free Starter plan. Purchase a paid Site plan to publish, host, and unlock additional features.

Get started — it’s free
Watch demo

Try Webflow for as long as you like with our free Starter plan. Purchase a paid Site plan to publish, host, and unlock additional features.