As you all know, Flodesk is my preferred email marketing platform that I recommend to all of my clients & template customers. If you’re looking for more details on Flodesk, I’d recommend reading my blog post “Create Stunning Emails with Flodesk” to learn more. In this post, I’ll be showing you how to design & add a Flodesk form to your website on Showit.
Before Getting Started
Before designing your form, you’ll need to have all of your segments created. Segments are a great way to personalize your email communication so that it’s relevant to each subscriber.
My own segments include all subscribers, freebie subscribers, and template shop/10% off subscribers. They all have separate forms depending on where my subscriber signed up on my website. This allows me to choose which emails to send to which audience, depending on the value they are looking for! If you have a freebie on your website, for example, you’ll want to create a separate form with an automated workflow so that only those subscribers receive the freebie immediately to their email.
Types of Flodesk Forms
Flodesk offers a variety of form templates to choose from! I personally use their Ribbon Banner Form & Pop-Up Form with Image for my website. Ribbon Forms are best to use for footer & freebie forms. On Flodesk’s menu, click Forms, and New Form. You’ll create all forms separately & choose your desired segment for each one.
Designing the Form
Flodesk is beginner-friendly & super fun to use! Once you click Edit on the chosen form, you’ll be brought over to their drag & drop builder. This allows you to change the fonts, colors, and anything else design-wise.
I usually take off all of the ribbon banner writing (only leave the actual form) and design the title area within Showit. This is better especially if your brand fonts aren’t available in Flodesk’s options.
By clicking on the background area, you’ll see general settings for email preferences & thank you message option.
Adding The Form To Showit
Once you’re finished designing your form on Flodesk, you’ll see the Next button on the top right. You’ll have to complete some general settings before coming across the embed codes.
Header Code – Must be placed in the custom head HTML settings of every page on your website you’d like this form displayed. To do so, click on any first page on Showit to access the page settings on the right-side menu. Don’t click any canvases or elements within your design, or you’ll have different settings! Under Advanced Settings, you’ll see a box for Custom Head HTML. Copy and paste the header code that Flodesk provided you & repeat this for every page!
Inline Code – Only needed for ribbon banners, not for pop-up forms. Create your newsletter section/page, or click on your footer if this is where your form will be. Click the square icon at the bottom center of the Showit Editor, and click Embed Code. Double-click on the new grey box displayed in the section & paste the inline code provided. You might need to shrink or expand the box to find the perfect width for the area. Unfortunately, you can’t see the form in the Showit editor, but you can view it in preview mode or in the published version.
There You Have It!
Once you hit publish, your forms will display on your Showit website! Struggling with your Showit website as well? Browse the website design packages right here to get started, or the affordable & easy-to-use Showit website templates if this is more your style!
sharing is caring —
Imagine having a website that is constantly bringing you sales or inquiries, without having to lift a finger? This is something I've helped over 200+ women entrepreneurs do, and I would love for you to be one of them! That's the power of a strategic website design made uniquely for you. After we're finished working together, you can expect to:
Feel proud to show off your website
Be recognized as an expert in your industry
Finally increase your pricing & book high-quality leads