Summary
In this post, weโre going to show you how to add a Flodesk opt-in form to your Showit template, how to style the form to match your website, and how to deliver your freebie and newsletter automatically with Flodesk workflows!
Do you have a newsletter you want to send to subscribers? How about a freebie youโd love to offer on your website?
Collecting email addresses are key to a successful business. That’s why each TONIC Showit template comes with a freebie and newsletter page. These pages are powerful and can be used in many different ways.
In this post, weโre going to show you how to add an opt-in form to collect emails, how to style the form to match your website, and how to deliver your freebie and newsletter automatically! Time to play with the big dogs, friends!
Hereโs what weโll cover
- Whatโs the best email marketing platform for Showit users?
- How to create an opt-in form for your Showit template
- How to style your opt-in form to match your Showit template
- How to add an opt-in form to your Showit template
- How to automatically deliver your freebie/newsletter
Whatโs the Best Email Marketing Platform for Showit Users?
There are tons of email marketing platforms out there, but our favorite is Flodesk because itโs pretty, intuitive and created by two female entrepreneurs. Yes please!
Flodesk makes creating stunning opt-in forms, managing your subscribers, and sending emails and downloads a breeze.
Most email marketing platforms *cough* mailchimp *cough* have tons of features youโll never use, a complicated interface making it impossible to get work done, and charge you more money as your list grows. Eww, gross!
Flodesk costs $38 per month, no matter how big your list grows!
Ready to get started? Sign up today and get 30 days free!
How to Create an Opt-in Form for Your Showit Template
Flodesk has 3 different opt-in form types. Pop-up, Inline, and Full Page.
Pop-up: These opt-in forms pop up when a user lands on your website. Once someone opts-in or clicks the close button, it disappears and wonโt show to that user again.
Inline: These opt-in forms are embedded onto your website. They will always be visible wherever you embed it. This is the type of form weโll use for our Newsletter and Freebie pages.
Full Page: This option allows you to create an opt-in form on a custom flodesk link. It wonโt be embedded or pop-up on your site.
What type of Flodesk form is best for Showit?
When adding an opt-in form to your newsletter or freebie page, youโll want to use an inline form.
Ribbon banner I and Inline without image I are our go-to favorites. Thatโs because adding images and text around your form is much easier inside of Showit, rather than in Flodesk.
Once you have your inline form selected, youโll be prompted to choose a segment.
What are Flodesk segments?
A segment is basically a group of subscribers, organized by what they signed up for. Typically, youโll start out with a โnewsletterโ segment for general subscribers who want to receive your newsletter updates. If you have a freebie, itโs good to segment your subscribers by which freebie they downloaded.
Flodesk will automatically create an โAll Subscribersโ segment that combines every subscriber so you donโt have to worry about creating that yourself.
Segmenting (organizing) your subscribers is really important. If you want to email your subscribers who signed up for a waitlist for a new service youโre offering, you donโt want everyone on your list to receive that email, just the ones who opted into that waitlist.
You can have as many segments as youโd like and each form needs to send subscribers to at least one segment.
Style Your Form to Match Your Showit Template
Flodesk makes it so easy to style your form which is like the best news ever, right?. Here are some styling tips to keep in mindโฆ
Remove the background color
Removing the background (making it transparent) will allow the background color of your Showit template to come through. Simply click on the form background and select the circle with a red slash through it to remove the background color of your form.
Customize form field
When writing emails, youโll want to add personal touches, like names, to your copy. To add form fields, select a field and click on โ+ Addโ button on the right.
Remove any text above the form
Removing the heading and body text above the inline form will allow you to embed just the form itself. Your newsletter and freebie pages already have these text boxes in Showit so removing them from the flodesk form itself is recommended.
Simply double click over the heading and body text, highlight all of the text, and delete.
Customize your Flodesk form fonts
Flodesk has over 100 fonts available for you to choose from. Weโd also like to add that the fontโs available are BEAUTIFUL! You may not find the exact font used on your template, but we bet you can find one thatโs very similar.
Select the โemail addressโ field then select the โFontโ tab on the right hand side. All of your font styles will be available here. Do the same for the โSubscribeโ button.
Update the subscribe button text
If you want your opt-in form to stand out donโt forget to update the subscribe button text! Simply double click the โSubscribeโ text inside of the button to update.
How to Add an Opt-in Form to Your Showit Template
Once you’re done designing your Flodesk opt-in form, itโs time to embed it onto your website!
Before Flodesk gives you any code, theyโre going to ask you some questions.
Should we enable double opt-in?
If yes is selected, your subscribers will receive an email asking them to confirm that they opted-in. Learn more about double opt-in here.
When subscribers opt in to this form
If notifications are set, Flodesk will email you every time someone subscribes.
After this form is submitted
There are two options to choose from. Displaying a success message and redirecting to a URL. Each TONIC template comes with a โForm Submittedโ page that you can use for this.
Redirecting is also a great option when you want to send a subscriber to a download page instead of sending the download in an email.
Publish and embed your form
Now that weโve customized the form settings, we can grab the Flodesk opt-in form code and add it to our Showit template.
For inline forms, Flodesk will provide โHeader codeโ and โInline codeโ. Youโll need both code snippets to display your opt-in form.
First, copy the โHeader codeโ and head over to Showit. Add an โembed codeโ box to your newsletter or freebie page and resize the embed code box (it doesnโt have to be perfect, weโll adjust it later)
Double click inside of the embed code box and paste your โHeader codeโ.
Head back to Flodesk and copy the โInline codeโ. Next, paste the โInline codeโ under the โHeader codeโ in the same embed code box.
Click โSaveโ and you should see your Flodesk opt-in form!
Form size and position
Once you see your form in the embed code box you can stretch the box wider to fit the form. If your embed code box is not wide enough, your form may stack and look a bit off.
Before publishing your site, it’s important to preview it. Click on preview and check how the form looks on desktop and mobile. Adjust if needed.
How to Automatically Send an Email in Flodesk
When someone subscribes to your newsletter or opts-in to your freebie, youโll probably want to automatically send them an email, deliver the freebie, or send them to a download page.
All of these options are easy to do with Flodesk. Letโs take a look at how it’s done.
What are Flodesk workflows?
Once you create your form, the next step is to create a Flodesk workflow.
Flodesk workflows allow you to automatically send an email to your subscriber once they opt-in. These emails can be welcome emails, contain download buttons, and more.
How do you create a Flodesk workflow?
Select โWorkflowsโ in the top navigation then click โ+ New workflowโ.
Flodesk has a ton of great sequences (a.k.a. Pre-designed workflow structures) but we typically start from scratch (especially if itโs a simple one email sequence).
Once you select โstart from scratchโ or select the pre-designed sequence to start with youโll want to name your workflow.
Next, click on โ+ Add triggerโ. Your first trigger will tell Flodesk when to activate this workflow. As of now, there is only one option. Select โA subscriber is added to segment(s)โ then choose your segment.
If youโre delivering a freebie download, like a PDF, then select the segment you created when creating the opt-in form for your freebie page.
Next, click on the โ+โ symbol and select โEmailโ. If youโd like to delay the email, select โTime delayโ then repeat this step and select โEmailโ.
Now itโs time for the fun part! Youโll need to create a new email that gets sent to your subscriber when they opt-in.
Select โCreate new emailโ and choose from the 30+ pre-designed email templates or start from scratch if you have that creative itch and know exactly what you want!
We wonโt go into details about all the features of designing an email in Flodesk, but you can read all about it here!
Send subscribers to a success page
Sending subscribers to a โsuccessโ page can be a great option if youโre delivering a freebie download or want to thank the subscriber for opting-in.
You do have to be careful with this option as you donโt always want to force the subscriber to leave the page they are on.
Before you redirect the subscriber, youโll want to create a page in Showit to redirect them to. We usually duplicate the โForm Submittedโ page and add our content there.
Next, click on โFormsโ in Flodesk and select โEditโ on the form youโd like to enable opt-in redirects on. Then click on โCustomizeโ in the top navigation bar.
Click โContinueโ until you see the โAfter this form is submittedโ question and select Redirect to a URL.
Paste your URL and click โContinueโ.
Your form will automatically save. If youโve already added the form code to Showit, there is no need to re-add the code. It will automatically update on your website!
Sign up for Flodesk
Creating opt-in forms, adding them to your Showit website, and automatically sending emails to subscribers is incredibly easy when using Flodesk and Showit. If youโre ready to start building your subscriber list, then Flodesk is the perfect place to start!
Use our top-shelf Flodesk discount link to save 50% off your Flodesk subscription!
