How to Add a Flodesk Form to Your Showit Template - Tonic Site Shop
Tonic Tips

How to Add a Flodesk Form to Your Freebie & Newsletter Page

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!

How to Add a Flodesk Form to Your Showit Template

Here’s what we’ll cover

  1. What’s the best email marketing platform for Showit users?
  2. How to create an opt-in form for your Showit template
  3. How to style your opt-in form to match your Showit template
  4. How to add an opt-in form to your Showit template
  5. 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!

Do not delte - Ryan
Do not delte - Ryan

Ready for a little TONIC in your inbox? We send occasional, moderately witty emails with exclusive deals, design tips, recent blog favorites, cocktail recipes, and more.

Friends Don't Let Friends Get Boring Emails

ENJOYED THIS? YOU'LL LOVE OUR EMAILS.

Get on the VIP List

featured post

The Best Showit Templates for Coaches

If you’re a business coach looking into getting a Showit website, you’re in the right spot. Here at Tonic Site Shop, we create beautiful Showit templates for coaches, photographers, and other creative professionals.

learn more

featured post

Why a Big-Name Designer Chose a TONIC Template Instead of Designing Her Website from Scratch

Meet Emmy - a skilled designer, inspiring educator, and imaginative creative whose talent and passion have led her to dream clients and brands. She’s passionate about “bringing visual life to the art of storytelling,” and this vision has truly come to life in her design work. And her work is STUNNING.

learn more

featured posts

She Almost Walked Away From Her Company. How a TONIC Template Turned Burnout Into Reignited Passion.

Elena is the brains (and beauty) behind Modern Market, a marketplace for creative entrepreneurs, providing content and resources that are ready to go for brands, so they can easily personalize it to their passion, purpose, and style and start connecting with their ideal clients right away. 

learn more

So, you need a website. Your current choices are: a ) a boring, big box template that does nothing to showcase your particular brand of awesome, and that you’d need to be some sort of code wizard to change, or b ) plunking down your life savings and your firstborn to hire a designer and a cranky developer, who will spend months and months of precious time cranking out something arguably “custom” you may or may not love in the end.

We’ve redefined the website template. And not only what it can be, but how it can look, what it can do, and what it can do for your brand.

THE MANIFESTO

Right? Nope. Enter option c ) Tonic Site Shop. Throw out everything you know about templates: these are cocktail-inspired, completely customizable websites designed for the kind of people that give a damn. Simply select your “cocktail,” download, customize anything −ANYTHING− you want, go live, grab the champagne and wait for the compliments ( and clients ) to roll in. They’re designer-made, and tailored just for you. Your old website is already jealous. 

What's Your Brand Cocktail?

PULL UP YOUR BARSTOOL & TAKE THE QUIZ

take the quiz! (it only takes 60 seconds)

Find out the secret ingredients in your shaker, and what sets you apart from everyone else on the (top) shelf... Plus, get our specific strategies to ensure your ideal clients pick you off the menu every time.

what's your brand cocktail?

“If you know your website isn't as good as it SHOULD be and you're riding the struggle bus trying to figure out how everyone else seems to have gorgeous websites, buy a TONIC site. It's time you look just as good (if not better) than others in your industry and stand out in a way that's unique to you.”

PRAISE FOR TONIC

- Jenna Kutcher

“If I could go back in time, I would purchase a Tonic site much earlier in my career. The high end feel of the template site combined with Jen and Jeff's creative direction and advice, instantly brought my work and brand to the next level. It allowed me to increase my prices and reach my dream client!”

PRAISE FOR TONIC

- Annamarie Akins

“The creative geniuses behind Tonic Site Shop are the only people we trusted to help us build our brand, and you can trust their sites to build yours, too. 

PRAISE FOR TONIC

 - Amy & Jordan Demos

“To think that something like this exists purely from the heart of helping small businesses fly and have access to this level of branding that was once reserved for only the most established and top of the top of the market…I just think this is going to change everything.”

PRAISE FOR TONIC

- Mary Marantz

“If there is ONE thing in your business worth investing in (even more than your camera and lenses) it is your brand. TONIC is the only resource I recommend if you want to get it done right.” 

PRAISE FOR TONIC

 - Ben Hartley

“Tonic is the PERFECT resource for anyone needing a quick and simple way to get an incredible, flawlessly designed website.”

PRAISE FOR TONIC

- Hope Taylor

“Being able to create a creative, editorial, and professional website with TONIC has taken our brand to higher levels - more inquiries and bookings with our ideal clients! Cheers, indeed!”

PRAISE FOR TONIC

 - Luke & Cat Neumeyer

“TONIC revolutionized my business, I never wanted to send people to my site before, then Jeff & Jen re-mixed my online presence, and wow, THEY ARE GOOD. They got to the core of my brand and built a hand-crafted site around it. Wouldn't want to work with anyone else."

PRAISE FOR TONIC

- Joel Allegretto

“The idea that someone could take a gallery of their 50 best images, pair it with one of these incredible designs and have a brand and virtual storefront that will start going to WORK for them and allow them to hit the ground running by the weekend is mind-blowing. It’s game-changing.”

PRAISE FOR TONIC

- Mary Marantz

“TONIC not only gave me a gorgeous, sleek (easy to use!) design that elevates my brand, but also regularly introduces me to new cocktails I've yet to try. Win, win!”

PRAISE FOR TONIC

 - Abby Grace

Welcome to

My Rewards

Become a member

Join our loyalty program to unlock exclusive perks and rewards.

Ways to earn

Powered by WPLoyalty

Ways to earn

point_for_purchase_image

Spend 10000, get 1 free product

1 point for each 10000 spent

Test campaign