How we built Webflow Pitch


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. 

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.  

Source link

About Author


Please enter your comment!
Please enter your name here

Share post:




More like this

Building A Free Platform For Impactful Documentaries (Part 2) — Smashing Magazine

In this second article of a two-part series,...

Exciting New Tools for Designers, October 2023

Today Welcome to our all treats-no tricks, October tools...

UIBundle: A One-Stop Shop for Design Resources, Freebies, & Tips

Every designer has a favorite website where...

Collective #784

State of HTML 2023 * Nue * The...