cancel
Showing results for 
Search instead for 
Did you mean: 

Making Custom Changes to the Constant Contact Embedded Sign-up Form

Solution Provider

Copy of ConnectEmailThruWebsite(1).png

 

This may be a little technical and geeky for some, but as a web designer I am often asked to make opt in forms look better on my clients’ websites. With the variety of WordPress templates out there, the default settings for a Constant Contact list sign up form don’t always fit. While there are WordPress plugins like Bloom, that will let you style opt in forms in fun ways, sometimes you just want to tweak something small like the color of the form heading or the default width. Maybe you have a custom site rather than WordPress and would prefer to use a local version of the style sheet.

 

Even if terms like embed code, CSS, HTML, link rel, or style sheet are foreign to you; if you work with a professional web designer, they’ll understand now to make these changes. Ready to dive into the weeds with me? Let’s go…  


Hopefully you read my previous article about connecting lists to websites, so you are familiar with how to grab the opt-in form embed-code for use on a website. If not, you may want to brush up on that part first.

 

Get the CSS File for Your Sign-Up Form

 

For these tips, you will make a copy of the style sheet that is referenced in the embed code of a list opt-in form, save it to your client's web server, tweak the saved style sheet, and then link the opt-in code to the local copy with your custom changes, rather than use the default version.

The CSS styles used in the embedded sign-up form from my examples are located at this link hosted by Constant Contact: 'https://static.ctctcdn.com/h/contacts-embedded-signup-assets/1.0.2/css/signup-form.css'

I copy the link from the embed code provided by my client and paste it into a browser to load the CSS file. I then make a local copy of the file for my edits.

The types of things I like to change are border radius settings to make button corners more rounded, width settings to make the form mobile friendly, and the font size of the footer text to make it less obtrusive. Some of the changes can be made in the CSS file, and some will be made directly within the embed code that you paste into something like a sidebar widget or custom HTML box in a WordPress site. For my examples, I’m working in a WordPress site and adding my form to the sidebar widget.

 

Not a good fit.Not a good fit.

Add the Form to Your Sidebar

 

I started by pasting the default embed code into a custom HTML box in my sidebar. Here is what the default form code looks like on my test site. Ouch, that is not a good look! The sidebar for my site template is much narrower than the default form field boxes. The H2 style in my theme is also a dark text color, rather than white, so the heading for the form doesn't stand out against the background color I picked. And wow, that is a lot of disclaimer text at the bottom of the form. To fix this, I need to change a width setting in the style sheet and the H2 style in the code I pasted into the sidebar widget, plus remove some of the text at the bottom in the pasted code.

 

Edit the CSS File

 

Use 98% insteadUse 98% insteadI use Dreamweaver to edit CSS files, but you can also just open the file in a text editor like Notepad. You can see in the default style sheet that I copied from Constant Contact's site, that there is a specific minimum width of 350 pixels given to the form. That won't work very well on sites that are mobile responsive, and it doesn't work well on my test site. Instead, I want to make the minimum width a percentage so the form will adjust to fit the section where I use it. I also made a few tweaks to the border-radius settings to make corners and the button a bit more rounded.

Now, save a local copy of your edited CSS file and upload it to a folder on your website. You will need to connect to your site with FTP or your hosting provider's file manager to do this step. Make a note of the location of the file and the name you gave it. You will need to change the form code to point to this location instead of the default.

 

Next, Edit the Embed Code

 

To change the location of the CSS file from a Constant Contact copy to your own local custom copy, you need to update the CTCT Sign-Up Form embed code that references the style sheet. Paste in the URL for your uploaded local copy of the css file over this default link:

Find this near the top of the codeFind this near the top of the code

H2colorwhite.jpgTo make my form heading white, I will add a color setting to the H2 style in the embed code. You could do this within the style sheet rather than inline, but you might create larger conflicts within your site when you do this, so I prefer to keep it inline with the form instead.

 

 

The embed code also includes a lot of disclaimer text at the bottom. Most of my clients don’t like to use the full text, so I customize it to something simpler. Scroll down in the embed code until you find the ctct-form-footer section and edit the text there.SimplerFooterText.jpg

Everything fits this timeEverything fits this time

 

The Final Custom Sidebar

 

With these few little tweaks, my sidebar widget now includes a sign-up form that fits the section correctly and is more readable. I could even insert a small feature image in the section to make it stand out better, but for now, I'm happy with the basic form.

 

I hope I haven't made you cross-eyed with all of this HTML-speak. For some sites, the default styles and forms will work just fine. For others like my example, knowing how to customize your own form and styles will provide your clients with a professional-looking form without the need to add an extra plugin to the site.

PaulaSUtah

Written by Paula Sageser. Paula started her own business to help other small business owners navigate through the Wild World of the Web. Her day job is building and troubleshooting websites. As a SCORE mentor, she teaches classes in Social Media, Email Marketing and Purposeful Websites. As a blogger, she has written gaming and book review blogs for fun. As a blogger here for Constant Contact, you can expect her to blend her knowledge of website design with tips and tricks for connecting the dots between sites, social and email.

8 Comments
Lee Design
N/A

Hi Paula

 

This is now obsolete. Constant Contact have replaced their old type of sign up forms with a Paula Abdul version (2 steps back).

 

Now you are stuck with junk that is an embarrassment to pass on to clients.

 

Now access to proper embed form online inline code nonsense...can't even forward to a welcome or download page.

 

Whoever gave the go ahead to this fundamental downgrade needs their asses kicked. See you, I'm off back to (and I'm sure a lot of developers will follow).

Solution Provider

Lee,

Sure enough! I was going to say you can still get to the old sign-up tools page, but I see that the embed code option is gone from the drop down menu. That is disappointing. Thanks for the heads-up.

CTCT Employee

Hello Lee Design. Thank you for your valuable feedback about our new sign-up form experience. I can certainly understand how you would like to be able to have your new sign-ups be directed to a different webpage after joining your mailing list. I'd like to send your feedback over to our product teams about this feature request. If you would like, you can email us at social_support(at)constantcontact(dot)com with your username and a reference to this post. Thank you!

WebLeaps
N/A

A custom CSS section would be great, having one style option (rounded corners, specific size fonts, etc.) is very constrictive for most website design purposes.  What you can do is use a browser tool to identify styles, then add them to the bottom of your own stylesheet on your own website. (if it's cascading correctly it will overwrite the Constant Contact styles).

 

I was able to successfully do this, it's not ideal but it's workable.

 

So
1) Create an in-line form through the sign-up forms section.

2) Identify CSS styles that you would like to edit.

3) Overwrite within the stylesheet on your own website.

Established Member

Could you please give more directions or video on how to edit the CSS Styles? What is the best way to identify the CSS styles and how to overwrite them? The Constant Contact inline forms created are too large to fit with our website design. There should be more options for height, width, and fonts. I would also like an option for a custom image above the form that could serve as part of the code generated from the Constant Contact inline form builder. Thanks.