How to Customize a Convertkit Form like Squarespace Button

 
HOW TO MAKE A CONVERTKIT FORM TO LOOK LIKE A SQUARESPACE BUTTON.
 

HOW TO CUSTOMIZE A CONVERTKIT FORM LIKE SQUARESPACE BUTTON 

 

FINALLY! It's here. The CSS code you've been waiting for so you can MATCH your Convertkit opt in form will to LOOK like your SQUARESPACE buttons. Since you've made the decision to up your game and Create an Email list. Now you can customize it to your site. 

The styles of the Convertkit forms kept turning you away, up until NOW.

Choose the SMALL, MEDIUM, or LARGE button customization. 

In this lil' gif tutorial I will walk you thru the following;

 
convertkit to squarespace.gif
  • create a FORM [ choose the one on the right ] 
  • choose NAKED form
  • got to STYLE settings
  • set form STYLE to Modal
  • timing > 9999
  • display settings > 0 days
convertkit modal form.png

SHOP

customize your email in style

 

  • go to EMBED
  • copy JAVASCRIPT code
 
convertkit javascript.png
  • [ command + c }
  • go to your website 
  • add a Squarespace  CODE BLOCK
  • add JAVASCRIPT code
  • add SQUARESPACE button code
How to add code to make your convertkit opt in look like a squaresapce button.png.
 
  • Then add the Squarespace button code

SMALL BUTTON

<div class="sqs-block button-block sqs-block-button" data-block-type="53" id="block-yui_3_17_2_1_1479174691644_28989"><div class="sqs-block-content"><div class="sqs-block-button-container--center"><a href="#ck_modal" rel="ck_modal" class="sqs-block-button-element--small sqs-block-button-element">ADD YOUR COPY HERE</a>
</div>

MEDIUM BUTTON

<div class="sqs-block button-block sqs-block-button" data-block-type="53" id="block-yui_3_17_2_1_1479174691644_28989"><div class="sqs-block-content"><div class="sqs-block-button-container--center"><a href="#ck_modal" rel="ck_modal" class="sqs-block-button-element--medium sqs-block-button-element">ADD YOUR COPY HERE</a>
</div>

LARGE BUTTON

<div class="sqs-block button-block sqs-block-button" data-block-type="53" id="block-yui_3_17_2_1_1479174691644_28989"><div class="sqs-block-content"><div class="sqs-block-button-container--center"><a href="#ck_modal" rel="ck_modal" class="sqs-block-button-element--large sqs-block-button-element">ADD YOUR COPY HERE</a>
</div>

  • remove "ADD YOUR COPY HERE
  • add your own BUTTON COPY TEXT

Now you have a SQUARESPACE BUTTON sync.

 
 

HOW TO START AN EMAIL LIST

how+to+Start+an+Email+List.png
 
Follow