Designing the Row® | Squarespace Website Design & Tutorials

View Original

Using ConvertKit with Squarespace (video tutorial)

Using ConvertKit with Squarespace can be easily accomplished and in the Squarespace video tutorial, I'll show you exactly how it's done!

FREE website branding worksheet and video guide

Links


Free Website Branding Worksheet and video guide

Enter your name and email below to get instant access to Designing the Row’s free branding resources (Google Doc & accompanying YouTube video tutorial) and start creating and defining your own brand elements NOW!

See this content in the original post

Video Transcript

If you have a ConvertKit account and a Squarespace website and you want to get your ConvertKit form added to your website, I'm going to show you how to do that in this video. First we need to create a new form, get that embed code and then we can add it to Squarespace.

If you haven't been to my channel before, welcome to Designing the Row, I am Katherine Forbes, founder, and I am here to help you turn your creativity into a professionally designed online brand. So let's get to it. I've got my ConvertKit tab open over here and I'm already on the new form page to get there.

First obviously I logged in to ConverKit then I went to Grow > Landing pages and forms > and I started a new form. So here we are, I'm going to click into form rather than landing page because landing page creates its own separate page that you would not need to add to your website. So I'm going to go to form. Choose the display format of this form. I always go with inline.

And they have multiple different templates here for you to choose again. I have the one (Clare) that I like and I pretty much stick to it. Yeah, I like to keep it simple put it right into my website so I go with the clear option.

You can see it's pretty blank when we get started. It's going to look pretty blank in the and let's rename the form step one and then we're going to come into settings. And then we're just going to click through these options here on the left side. You can change this text or keep it if you want. Or if when you have somebody signed up for this email list, if you want to redirect them somewhere else, you can click this bullet here and put in your URL there. I'm going to keep this success message.

Next up is the domain name. You don't need to touch this if you don't want to incentive this is usually what I just leave it. I leave the defaults here. And advanced again, leave pretty much the defaults if you want to add the recaptcha you can do that and then hit save.

Now, let’s add the custom field for First name. There we go… and required. And we're going to save that.

Now I’m going to click on directly on the button and I'm going to add in my Designing the Row brand hex color code there. If you don't know your hex code, you'll find that and then type in your hex code here. Default settings are fine with me. So I'm going to save. And that is my really simple name and email subscribe form.

I'm going to save that and then I'm going to hit publish. And you can see it gives us multiple options of different kind of code for what I'm going to show you how to do in Squarespace. We're going to use the HTML. So there's a long a lot of code here. All you have to do is click this red copy button right here. It will copy the whole thing for you. I'm going to go back over to my website page back into edit mode.

If this looks a little different than your Squarespace editor, don't be alarmed. I just have a little bit older version. I'm going to click the plus button here. And we're going to find the code block. This should look the same here for you. Code I'm going to highlight and delete the hello world code. What I like to do is a little extra step. You don't have to do this. I like to center my form. So I put this in so you can copy that close that div tag.

<div align=”center”> paste ConvertKit code here </div>

And you can see it shows it to us down here. It puts it in a safe mode when you're an edit mode. But you can see the preview of it down there. We're going to save my page. And there we go. If you look at the live version of your website, this safe embedded scripts will not be there.

But that is how you create a form and ConvertKit and add it to your Squarespace website. If you have any other questions for me about Squarespace and ConvertKit, let me know if you are new to ConvertKit and thinking about signing up.

I do have a ConvertKit code for you that will get you in for free to get started. So check that out here.

And otherwise, I also have a free website branding worksheet and video guide. You can check out here, and I will see you in the next one.