How to Embed a ConvertKit Form into Squarespace

I used to use MailChimp as my email marketing automation software. Though it was free to use the basic plan, I have made the switch to ConvertKit from MailChimp. ConvertKit is an email marketing service provider like MailChimp and helps small businesses and bloggers to grow their audience. Every business has a preference with different needs, so I can’t tell which one is better but I found ConvertKit easier, simpler, and faster to navigate than MailChimp. Today, I am going to show you how to create an opt-In form in ConvertKit and connect it to Squarespace. What is an opt-In form? As you may know already, an opt-in form is an email sign up form that gives your site visitors an option to receive emails from your brand. ConvertKit allows you to create personalized opt-in forms using their platform. When you create an opt-in form with ConvertKit, you are provided an HTML code that you can add to your Squarespace website. I know it seems complicated but it’s not. Are you ready?

Go to your ConvertKit account

If you haven’t created it yet, create a free ConvertKit account first.

Choose Landing pages & Forms > Click Create New > Form

Choose Inline

Choose the Clare template

You can choose another format if you like. I normally use this template and create an opt-in text and photo in Squarespace since ConvertKit has less flexibility of design.

Customize the form by changing the text, colors and borders to match your brand style.

If you want to change the font that matches to your brand font, you need to use the CSS code.

For example: Quasimoda is the font I normally use. Change the name of the font that you want to use. Then paste and copy the code below into the Custom CSS box.

input, * { font-family: 'Quasimoda', cursive !important; }

Each form has a link at the bottom that says “Powered by ConvertKit”.  How do you remove it?

Click Powered by ConvertKit  > uncheck the box

Click the icon ( envelope ) > Make sure Send Incentive email is checked

People will receive this email after they sign up for the form. You may want to edit the info in this email to your brand and opt-in gift. For example, if you’re offering a free ebook, edit the button that says “Download your free ebook” instead of “confirm your subscription”.

Click embed > Copy the HTML code > Place this code where you want the form to display on your Squarespace site

Go to your Squarespace account

Edit a page and add a new code block </>

Delete a highlighted code and paste the ConvertKit code into the block

To center the form, add the following to the start and end of the embed code.

<center> </center>

The below email sign up form is an example.

Charlotte form template

That’s it! If you found this post helpful, please share on social media. Or please leave a comment below.

Disclosure: Some of the links in this post are affiliate links and if you go through them to make a purchase I will receive a small commission.

Previous
Previous

A Step by Step Guide: Getting Started with Squarespace for your Small Business

Next
Next

How to Create a Simple Brand Style Guide for Your Small Business