Not sure if your website needs an update or re-design? Sign up for the newsletter & receive a free 11-page website audit checklist!
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 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.
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.
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.
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.
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!