explore

branding

web design

photography

warm coffee, sharp pencils, & good reads 

welcome to the blog

business

life

How to Add a Flodesk Form to Your Website

How to Add a Flodesk Form to Your Website

For Shopify, Showit, AND Squarespace!

Flodesk has taken the creative community by storm with their email campaign platform proving to be the perfect mix of design capabilities and backend sequence building.

While this post isn’t meant to get into the deep dive details on the amazing features of the platform (there may be a post coming up later on that!), I can say I’ve switched from straddling MailChimp & Convertkit, and could not possibly be happier!

I know so many of you have the made switch as well and I wanted to hop in and make that process just a little easier for you, especially with adding those beautiful custom forms to your website.

Embedding the forms means diving into code – which can be a bit scary if you’ve never done it! So, today I’m breaking down exactly how to embed them on your website with step-by-step written instructions AND screenshare videos so you can get them up and on your website and bringing you leads!

And as a special bonus, if you’re still on the free trial of Flodesk, grab 50% your plan with code KRISTENFULCHI to bring you down to $19 a month!

How to Embed a Flodesk form on Your Shopify Homepage

  1. Login to Flodesk
  2. Create your “ribbon banner” form
  3. After completing your form, on the “embed” section, click the first “copy code” button
  4. Login to Shopify
  5. Click “online store”
  6. Click the “actions” dropdown
  7. Click “edit code”
  8. Click “theme.liquid”
  9. Find line that says “</head>”
  10. Paste the copied code right above that line
  11. Click “save”
  12. Go back to Flodesk
  13. Click the second “copy code” button
  14. Go back to Shopify
  15. Click “online store”
  16. Click “customize”
  17. Scroll to the bottom on the left hand side and click “add a section”
  18. Scroll to the bottom and click “custom content”
  19. Click “add”
  20. Remove the additional content (image and welcome) by clicking on them and then clicking “remove content”
  21. Click “add content”
  22. Click “custom html”
  23. Paste in the copied code
  24. Click “save”
  25. If the width is at 50%, click 50% and change it to 100%
  26. Click “save:
  27. Click the “<” arrow at the top left hand corner of the page
  28. Click and drag custom content to where you want it on your homepage
  29. Click “save”
  30. Congrats! You’ve got your newsletter sign up for on your website!

How to Link a Flodesk form to Your Shopify Announcement Bar

  1. Login to Flodesk
  2. Create your “full page with image” form
  3. After completing your form, on the “publish” section, click the two squares to copy the link to your clipboard
  4. Login to Shopify
  5. Click “apps”
  6. Click “visit the shopify app store”
  7. Search for “quick announcement bar”
  8. Click the app
  9. Click “add app”
  10. Follow the steps to add it to your store and return to the apps section in your Shopify store
  11. Click on the Quick Announcement Bar app
  12. Click “create new bar”
  13. Click a basic template on the left to get started (these are all free!)
  14. Begin customizing your announcement bar
  15. Paste the copied link under “link url”
  16. Check off “open the link in a NEW tab when clicked”
  17. Finish customizing your form and decide where you want it to show on your site
  18. Click “save” at the bottom
  19. Congrats! You’ve got your newsletter sign up for on your website!

How to Embed a Flodesk form on Your Showit Website

  1. Login to Flodesk
  2. Create your “ribbon banner” form
  3. After completing your form, on the “embed” section, click the first “copy code” button
  4. Login to Showit
  5. Click the page you want to add your form to
  6. Click “advanced settings”
  7. Click in the “custom head html” box
  8. Paste the copied code
  9. Click “save”
  10. Go back to Flodesk
  11. Click the second “copy code” button
  12. Go back to Showit
  13. Click on the page and section you want to add your form to
  14. Click the frame icon at the bottom
  15. Click “embed code”
  16. Click “embed info”
  17. Click the “custom code” box
  18. Paste the copied code
  19. Click “save”
  20. The box will be invisible on the backend of Showit, that’s totally normal! But when you click preview you’ll be able to see it perfectly.
  21. Move the box to the perfect position
  22. Click “publish”
  23. Congrats! You’ve got your newsletter sign up for on your website!

*Note – If you are adding this to your footer, add the first code to every page “custom head html” box

How to Embed a Flodesk form on Your Squarespace Website

  1. Login to Flodesk
  2. Create your “ribbon banner” form
  3. After completing your form, on the “embed” section, click the first “copy code” button
  4. Login to Squarespace
  5. Click “pages”
  6. Hover over the page you want to add your form to and click the gear icon
  7. Click “advanced”
  8. Paste the copied code
  9. Click “save”
  10. Go back to Flodesk
  11. Click the second “copy code” button
  12. Go back to Squarespace
  13. Hover over the section you want to add your form to
  14. Click “edit”
  15. Hover over a section until a line appears and click the line
  16. Scroll down and under the “more” section click “code”
  17. Delete the placeholder text
  18. Paste in the copied code
  19. Click “apply”
  20. Click “save”
  21. The box will not display in the backend of Squarespace, that’s totally normal! But when you go to your actual domain, it’ll display perfectly.
  22. Congrats! You’ve got your newsletter sign up for on your website!

*Note – If you are adding this to your footer, add the first code to every page “custom head html” box

Ready to upgrade your free trial of Flodesk to a paid plan? Grab 50% off with code KRISTENFULCHI or just click here!

 

Leave a Reply

Your email address will not be published. Required fields are marked *