- Intro
- Important first steps
- Seamless inline forms
- Countdown timer popup
- Full-page lead gen form
Gone are the days of having a gorg website and then a form that looks like it's from the y2k era plonked in there. I always had to code my little heart out trying to make it look seamless - but Flodesk saved me from this ~long~ ago.
I've made three bite-sized videos to show you exactly how I make my client's forms perfectly match their website and branding so it's extra clear for you.
Haven't used Flodesk before? No drama. You'll love it. You can get 50% off your first year with this link, or my Flodesk template will also get you started much faster (the same deal applies, too).
☻ First Steps: Right This Way ↴
¹ Add your branding
Make sure your colours are set inside Flodesk so they match the same hex codes you're using on your website. You can also upload the same fonts you've used on your website!
² Speaking of fonts...
Take note of things like letter spacing, capitalisation and how much you use (or don't use) italics and bolder weight text. We're aiming for it all to be super consistent!
³ Lines & Shapes
Notice the weight of the borders on your website or if you use them at all. What shape are the buttons - rounded? Square? Filled in or transparent? etc.
① Simple, Seamless Inline Form
When you're embedding an inline form onto a webpage, I find it best to create the most 'naked' form that I can. Why? Because I think it's best that we keep control of the text above the form handled inside your CMS.
Note that if you do allow the inline form text to be handled inside the Flodesk app, that's cool. When you update it, your website form will automatically reflect those changes!
Tutorial Video↓
Client: Emily Wylde →
② Countdown Timer Popup Form
I wanted to add a popup to a specific page on my Shopify store, so that I could run a monthly offer on one of my higher ticker products. I added this popup code to my page HTML in order for it to only appear there.
I played with a fun, transparent background look where I added a PNG image of myself on the same background colour as my form’s canvas.
Tutorial Video↓
Client: Meeeee! →
③ Lead-Gen Form
I made the most of Flodesk’s new video feature to pop a well-edited video with captions on this page. Ginni’s branding is super fun and kid-centric, so the wavy border was a no-brainer!
Add the unique URL anywhere you want - like your link in bio or website navigation.
Tutorial Video↓
Client: Ginni Hammat / Unschool Homeschool →
❤︎ ❤︎ ❤︎ ❤︎ ❤︎
Thanks for reading
|
|
|
