064: How to tweak the design of your Mailchimp opt-in form on your Squarespace website?

In the last video, you saw a demo of how to embed a Mailchimp opt-in form to collect emails on your Squarespace website. This is an important aspect of your website, so make sure you set up an email marketing system in your business.

Al’right, in this video, you will see how to make your opt-in form a little more pretty. Change colors of the form or make it completely transparent. You will do this all without any code. All you need is to follow the steps and play around with your settings under Design> Site Styles.

Watch the step-by-step video showing you how to do this yourself:

How to tweak the design of your Mailchimp Newsletter Opt-in Form

The video above goes into much greater details but here’s a quick step-by-step checklist for on how to tweak the design of your opt-in form.

|1 Go to Design > Site Styles
|2 Hover over the Newsletter on the right Content Area
|3 You will see the Newsletter Block options in the left panel
|4 Click on Background Color and change it to a color that matches/contrasts with your brand colors
|5 Next change the Alternate Background Color as well to have the same color as in Background Color
|6 Click on Button Color to change it
|7 Click on Alternate Button Color and change it there as well
|8 Under Button> Style Outline to choose Solid, Outline or Raised for the button style
|9 Under Button> Shape to choose Square, Rounded or Pill.

|10 Alternate look: Click on Background Color again and move the lowest circle to the left to make the box disappear or look transparent.

Learn How to Build Your Website on Squarespace:

Well, my friend, I hope you found this blog and tutorial useful. Let me know in the comments if you have questions on this or any other questions about email marketing or about building your website on Squarespace.

Are you getting excited to get your own website? I love designing websites for fabulous people like yourself, so take action to get your website design process started —> Start the Conversation by sharing some ideas about your site with me.

Questions about this blog post? You can drop them in the comments below!

~Peace,

Sophia

Read More

063: How to embed an Mailchimp opt-in form on your Squarespace website?

To make the most of your website, it is important to collect emails and build your list. This not only allows you to continue the conversation with your site visitors who now become your email list members, but also enables you to build trust and continue to offer your services, offers, products and other free and useful content such as videos, workshops and live trainings.

But if you do not have an opt-in form embedded on your site, you cannot collect emails of your site visitors who are interested in hearing more from you. Today, I show you how you can embed an email opt-in form using Mailchimp, a useful email marketing platform free upt o 2000 subscribers. Note that you do have to open an account with Mailchimp and set up your list/audience settings first before doing this step on your website.

Other email marketing platforms that are good alternatives to Mailchimp are ConvertKit and MailerLite. (Affiliate Links). I have used all three and found each platform appropriate for very different needs. If you are a new blogger or online entrepreneur or an artist just building your email list, go with Mailchimp or MailerLite which both have free entry points upto a certain number of subscribers. If you are at an advanced stage or plan to immediately implement complex workflows and email sequences, then ConvertKit and MailerLite are better options.

So now here’s how you can connect the opt-in from on your Squarespace website.
Note: You can customize the design of the Newsletter form under Design > Site Styles. This video and checklist in blog post 64 hows you how to do that.

Watch the step-by-step video showing you how to do this yourself:

---

How to Embed a Mailchimp opt-in form on your Squarespace Website?

Watch the video above to see all the details but here’s a quick step-by-step checklist for embedding a Mailchimp Form.

|1 Create a New Page by Clicking +
|2 Select Blank and Name it
|3 Click the Wheel Icon
|4 Go to Media
|5 Upload Image and Click Save
|6 Click on Edit
|7 Click on the Sideways Teardrop Icon
|8 Look for Newsletter Block under More
|9 Give the Form a Name
|10 Customize Title and Description and Alignment
|11 Click Storage
|12 Click “Connect other services” link
|13 Mailchimp opens up. Click on it and Connect with Mailchimp
|14 Select the correct list/audience in the drop-down menu
|15 Click “Require double opt-in after subscribing”
|16 Under Advance customize Submit Button Label and Post-Submit Message
|17 Click on Apply. Click Save.
|18 That’s it.

Note: You can customize the design of the Newsletter form under Design > Site Styles. This video and checklist in blog post 64 hows you how to do that.

Learn How to Build Your Website on Squarespace:

Well, my friend, I hope you found this blog and tutorial useful. Let me know in the comments if you have questions on this or any other questions about email marketing or about building your website on Squarespace.

Are you getting excited to get your own website? I love designing websites for fabulous people like yourself, so take action to get your website design process started —> Start the Conversation by sharing some ideas about your site with me.

Questions about this blog post? You can drop them in the comments below!

~Peace,

Sophia

Turbo-Charge Your Email Marketing with Evergreen Lead Magnets (within an afternoon)

Get Instant Access | 45 Min Video Training with ConvertKit Walkthrough
In this presentation, I walk you through 7 different evergreen lead magnets/freebies that you can set up on your website to grow your email list. I also give you 10 real life examples of lead magnets from various online entrepreneurs and show you how to set up an opt-in using ConvertKit + Squarespace. Get instant access to view this training by clicking the button below and signing up.

Read More

040: How to Connect Leadbox with Your ConvertKit Form that has a Checkbox

Hello there!

So you want your Leadpages/Leadbox opt-in box set-up in such a way that when someone clicks on it, a form pops up that has a checkbox AND it feeds into a tag inside ConvertKit? Then this video + blog post show you how to do that.

Something that looks like this:

View fullsize

Watch the video to see me walk you through all the steps

Step 1: Open up the form in ConvertKit that you want connected to your Leadbox. Or Create a new form.

Note: When you integrate a third party app like Leadbox/Leadpages with ConvertKit you will most likely need to connect it with a ConvertKit Form/Tag/Sequence. In this case, we will be using a form. What this means is that when someone subscribes by clicking your Leadbox, the information is then fed into ConvertKit. (You will need to make sure that your Leadpages account is connected with ConvertKit using API - this step is not shown in the video).

Step 2: (Optional but recommended) Customize the form to fit the Leadbox pop-up style. You will go into ConvertKit Form -> Style -> Custom CSS

Copy the code below:

.ck_powered_by { display: none !important; }
.ck_form {box-shadow: none; }
.ck_form {
  border-top: none; 
  border-bottom: none; }
.ck_form { background: #fff; border: none !important; }
.ck_form_content, .ck_form_fields { padding: 1%; }
.ck_form_content h3 { text-align: center; }
.ck_form_content, .ck_form_fields { float: none; width: 100%; }

You don't have to do this styling. But it helps to add this code so that when the Leadbox is clicked it pops open a form that fits the sleek sytle of a leadbox. This (step 2) is completely optional but I highly recommend it.

Step 3: In Leadpages Account, create your leadbox or open up an existing one. Style the form the way you want it.

Step 4: While still working with the Leadbox, replace the form that's there with HTML block. Delete the Opt-in Form section that was in-built there.

Step 5: Jump into your ConvertKit Form. Click on Embed -> then Raw HTML. Copy the entire Raw HTML.  You will be pasting this code into the Leadbox but before that open up a text editor.

Step 6. In a text editor, like Pages on the Mac or Word on a PC, paste the entire Raw HTML code. This is because it is easier to work with the Raw HTML code when you can see it better in a text editor. You will copy it all in the end and bring it into Leadbox eventually.

Step 7. Look for the section that starts with <button class. Right above it, paste the code for a checkbox.

Here's that code:

<!-- Begin Checkboxes -->
      <div class="ck_control_group">
        <label style="display: block; margin-top: 10px">
          <input type="checkbox" name="tags[]" value="444444" /> Yes, send me your weekly newsletter. 
        </label>
      </div>
      <!-- End Checkboxes -->

Step 8. Make sure to update the tag value. This is very important. The way to do it is to click on the tag inside ConvertKit that you want the checkbox data to go to. Then look in the URL for the tag value. See steps 2 and 3 in Blog Video 039 that shows you how to do this visually.

Step 9. Now copy all of this Raw HTML code including the checkbox code

Step 10. Now paste it into your Leadbox. Specifically into the HTML code box. (Click the pencil icon to edit).

Step 11. Click save. Then click Publish. Click the Button Link. Stylize it. Click Get Code and then copy it.

Step 12. Jump into your Squarespace website or wherever you want the Leadbox to show up. Add a Code block. Then paste the code you grabbed from your Leadbox. Click save. Refresh the page. And test the form by adding in your info and checking your ConvertKit account to see that it is working.

That's it. You are done! Watch the video I've created as it may be easier to understand what I mean when I demonstrate the steps visually. Let me know in the comments if there's something unclear and I will help you out!

Thank you for watching. Also, I'd love to know what other questions you have so I can answer them in my next tutorials. 

Thanks, Sophia

Related Videos:

039: How to Add a Checkbox to your ConvertKit Opt-in Form?

Hello there,

ConvertKit forms collect names and emails. But you can also have checkboxes giving people a chance to choose something specific. Or you can use checkboxes to give your subscriber the option to opt-into your newsletter and/or marketing emails and offers. And then that info feeds into a tag inside your ConvertKit account

The EU regulation, the General Data Protection Regulation (GDPR) goes into effect on Friday May 25th, 2018. I won't got into all of the regulation requirements because I am not legally qualified but I can show you technically how to do some of the things towards becoming compliant. One of the things that online entrepreneurs are putting into place is a way to get consent from new subscribers right on their opt-in forms.

If you are using ConvertKit, then this video is right for you. I will show you how to enable one or more checkboxes on your form. And then also how to tag those who select the check-box.

Note: To get GDPR compliant, make sure to get your own legal advice based on the needs of your business and the location of your business. 
 

Task:
adding checkboxes to a ConvertKit Form, feed that info into a tag

Purpose/Use Cases:
+ to give subscriber a choice for opting-in to a newsletter or marketing offers.
+ make opt-in forms GDPR compliant (EU law effective May 25, 2018).
+ to give subscriber choice of other supplementary content like additional Free PDFs.
+ to tag subscriber based on preferences (give them checkboxes to self-select tags). [Thanks Jason Troyer for your question in the comments].

Code needed:
Yes

Related Videos:
Blog 040: How to Add Checkbox to a ConvertKit form that is integrated with Lead Pages 
Blog 041: My exact email for refreshing consent from my existing subscribers for the GDPR EU law.

Scroll to the bottom of the blog to see Video Tutorial!

There's a video showing you the steps below. But here is quick summary of what you've got to do:

Note: You will need to use the Raw HTML to embed your ConvertKit form to your website or if you are using Leadpages, then into Leadpages. This is because of the customization that we need to do in order to make checkboxes happen in ConvertKit forms.

Summary of Steps

1. Decide how many checkboxes you want and what the text will be.
2. For each checkbox, create a corresponding tag. So for example, if the first checkbox says "Yes, I want your newsletter", then have a tag that says "Consent - Newsletter". 
3. Click on each tag and note down the tag id that shows up in the url. (see video)
4. Create a new form or open an existing form on which you want the check-box. Style it like you want it just like a regular form. Hit Save ALWAYS after making a change.
5. Go into Embed tab, and grab the Raw HTML.
6. Then go to your website, where you want this form to appear. In Squarespace, you will use the code block to paste this Raw HTML code.
7. Next, in the Raw HTML, look for the section that starts with <button class =
8. Right above it, paste the following code but look at step 9 and 10 for customizing:

<!-- Begin Checkboxes -->
      <div class="ck_control_group">
        <label style="display: block; margin-top: 10px">
          <input type="checkbox" name="tags[]" value="444444" /> Yes, send me your weekly newsletter. 
        </label>
      </div>
      <!-- End Checkboxes -->

9. Where it says, value= "444444", repalce the "444444" with the tag id that corresponds to the first checkbox.
10. Adjust the text, "Yes, send me your weekly email newsletter." to fit what you want the checkbox to contain.
11. Save and test.

Bonus steps if you want to add another checkbox: 

12. To add another checkbox, duplicate part of the code from above and customize it using step 9 and 10. 
<label style="display: block; margin-top: 10px">
         <input type="checkbox" name="tags[]" value="444445" /> Yes, send me emails about your online program and other marketing offers.
       </label>

13. So the entire code for having two checkboxes will look like this:

<!-- Begin Checkboxes -->
      <div class="ck_control_group">
        <label style="display: block; margin-top: 10px">
          <input type="checkbox" name="tags[]" value="444444" /> Yes, send me your weekly newsletter.
        </label>
        <label style="display: block; margin-top: 10px">
          <input type="checkbox" name="tags[]" value="444444" /> Yes, send me your emails about your online program.
        </label>
      </div>
      <!-- End Checkboxes -->

14. Save and test.

Watch Steps 1 - 11 in this Video

If you want to integrate your ConvertKit forms with Leadpages and have checkboxes, then look for my other blog post that I will be publishing on this very topic. (Until then, just follow the above steps and paste all the code into the HTML block inside Leadpages. Make sure to test it). 

So that's it. I hope this is useful. Share your comments + questions below.
 

---

Related Videos: