Flodesk Tutorial | How to Integrate with your Squarespace Site

I'm sure you're thinking it will Flodesk work with my Squarespace website. It definitely does. And in this post, I'm going to walk you through how that actually works. If you decide to make the switch, make sure you click this link to get 50% off your first year, no matter how big your list becomes. Without further ado, let's hop in.

Email marketing is a powerful tool that you can use to market your business to your target market. In the past, one of my frustrations with email marketing software was that my images did not look good once I went to design my emails. This is one of the main reasons why I switched from my previous provider to Flodesk. I specialize in creating stock photos that feature African American models, and I need those emails to look beautiful. But you can't just focus on the emails that you're going to deliver. You need to make it easy for people to sign up for your list and to have a reason to be on your list. So when I rebuilt my website for Eye For Ebony, I wanted to incorporate Flodesk forms within the design to help me to build my list. I also wanted to create a landing page for my Instagram subscribers to make it easy for them to get on my list. So in this particular post, I'm going to show you how I use the ribbon form and how I use the full-page form to grow my list for Eye For Ebony. There are tons of form designs that you can choose from but those are the ones that we're going to focus on in this post. So the ribbon form is seen on my website in a few different places.

On the homepage, it's right here on the header and what I love about Flodesk is I was able to actually choose the exact same color of my page background for the background of the form. So the form is super narrow, super sleek. I could choose fonts that match my branding, and so it integrates beautifully within the homepage design. So that's one spot where you'll see a ribbon. When I go to modeling it's important to me that my models sign up for an email list. Yes, I use Facebook to communicate with them but I also want the ability to email them because sometimes people don't see what's posted in the Facebook group. So on the model page again, I have a way for them to sign up and join my model email list. Then I created a landing page so that my Instagram followers could join my email list simply and that's when I utilized the full page form option.

So within my Eye For Ebony Squarespace website, I created a simple landing page to emulate the look and feel of a link tree. To drive traffic to my main call to action, shoot us an email, get headshots, brand photos, or custom stock, model for Eye For Ebony, Shop our bundles, or get the 27 free stock photos. And when my Instagram subscribers go to eyeforebony.com/instagram and they click this button it redirects them to a Flodesk full page form and I love this because when it resizes for your cell phone, it only shows this area here. So it's very simple to type in your first name, email address, hit download images, and immediately get your freebie. So if you want to create a freebie on the go, you've got something coming up and you quickly need to throw up a one-page PDF or a free webinar, whatever it is that you want to promote to grow your list, the full-page forms allow you to do that and you can easily link to them using a Squarespace button. 

Now there are a couple of hacks that I learned when I decided to incorporate Flodesk forms into my Squarespace site. So I want to show you some things that I kind of learned the hard way. The way that Flodesk incorporates its forms on Squarespace is by using two different JavaScript codes. One goes into the head tag of the page and the other goes where you want the form to be located. So when I started building my website for Eye for Ebony, I was copying this code onto every single page, which in my case, became pretty tedious because I utilize index pages for a lot of my website. So it actually was multiple pages stitched together. So if you have designed your Squarespace site like this, you have tons of index pages and so adding this code to every single section would take some time, here is a little hack that I found. All you need to do is go to the home settings and click on settings then click on advanced, and then click on code injection. And my friends, if you type that code from Flodesk here in the header section, it automatically goes into the head tag of every page on your website, praise the lamb. So you don't have to worry about that code for your pages. All you need to worry about is where do I want the code to be. So when you decide where on your page you want the code to be, all you do is add a simple code block and type in that second code that you find here. So that saved me a ton of time. And I realized after a while like Man, there's got to be an easier way to do this. There's your easy way. So you're going to find it under the advanced section and type click on code injection and that is going to pull up this area.

Now the other thing I realized because I was using these indexes to try to give a very WordPress look and feel to my site design, is that I also had the issue of sometimes my forms just disappearing. Sometimes they just wouldn't load. Why is it that sometimes my forms don't appear? Well friends, if you go to design and you happen to be using the brine template in particular, if you have Ajax Loading selected, that is going to impact your forms appearing on a regular basis. So all you need to do to make sure that your forms are always there, just unclick that and hit save. It's literally that simple. So if you've been running into that issue, that is a quick and easy way for you to work around it.

So what I'm going to do is I'm going to take you to the main landing page that people get to if they type on the announcement bar, which is typically how people get to my free offer. I make sure that this free offer is all over the website. You can get there using this. You can get there using that flow desk full page, or you can click on the bar at the top, which is what most people do, and they get to this page. It tells them what the free stock photos are. It has another form and you see I changed the styling to work better on a white background. And then I showed them all the images that they get if they just give me their name and email address. And I'm telling you I've gotten so many opt-ins for my list by showing them what we're going to get. So make sure that if you integrate codes in your Squarespace site for Flodesk forms, you also show people within your graphics what they're going to get if they gave you that name and email. 

I hope you found this post useful. These are some tricks that you can utilize to help you to integrate Flodesk into your Squarespace site to take it to the next level. Make sure you click this link to get 50% off your first year of Flodesk and you can try it out for free for 30 days. If you like this post, make sure you subscribe to my channel because I teach you how to grow your biz without breaking the bank. Until next time, ta ta for now.