Share Post

Styling and Embedding a Flodesk Form In ShowIt

Filed in Showit, Website Design — February 11, 2021

If you’re looking to add your mailing list sign-up form to your website, you’re in the right place! Follow along in the video, or read the steps below, to add a Flodesk form to your Showit site.

Getting Started

  1. First, you’re going to want to log into both your Showit and Flodesk accounts.
  2. Once you’re in your Flodesk account, you’ll want to go to the Audience tab and then click Segments. Once you’re in the Segments area, you’ll want to create a new segment. This is where your subscribers will go when they fill out your form.
  3. Next, click the Forms tab and click create new form. Choose one of the in-line options to get started.

Styling Your Flodesk Form

  1. Once you’ve chosen your form, you’ll want to make it as ‘naked’ as possible, so you’ll want to delete any headings or text from above the form.
  2. Make sure you make the background color and the canvas background color transparent. You can do this by pulling up the color picker and clicking the white circle with the red line through it. This will make your form background transparent.
  3. Then, you can choose a color to make the form match your website colors. If you aren’t sure what your hex code is, you can find it in your Design Settings on Showit.

Embedding Your Flodesk Form

  1. Once you’ve styled your form, click next. You will be prompted to choose if you want your form to have a double opt-in and if you want to be notified when someone subscribes to your list.
  2. You will be directed to a page with two sets of code – header code and inline code. Copy the header code first.
  3. Go to each page on your website where you will have a newsletter form and paste the code in the Custom Head HTML field under Advanced Settings on the right-hand side of your Showit dashboard.
  4. Then, go back and copy your inline code. Go back to ShowIt and choose the embed code box option. Paste your embed code in the box and position it wherever you want your sign-up form to show up. This will likely not show up on the back-end of Showit, but click preview and it will show up in the preview and on the front-end of your site.
  5. Voila! You have a sign-up form on your site!

Don’t forget to click publish so that your edits and sign-up form are reflected on the front-end of your site. Have questions? Shoot us an email at hello@waterloostreet.co or fill out a contact form on our site.


This post may contain affiliate links, which means that we may receive a commission if you make a purchase using these links.

Share

FOLLOW US