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: ''

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.


DefaultEmbedCode.jpgNot 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


defaultminwidth.jpgUse 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:

LinkCTCTStyleSheet.jpgFind 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

EmedCodeLocalStyles.jpgEverything 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.


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.

CTCT Employee



Those are great questions! I can completely understand why having access to these style sheets can be helpful to customize your sign-up form for your website. I apologize at this time we do not offer the embed code for our sign up forms. Edits to the sign up form can only be made through our program. Because of this, I suggest taking a look at our Marketplace. Our Marketplace holds third-party sign up forms that integrate with our system and may have the capabilities you’re looking for. In the meantime, I would be more than happy to submit this feature request to the appropriate teams.

Senior Member

It appears on the marketplace that at $15 to $195/month is the only non-wordpress inline form builder and those forms are also too big. Thanks for submitting it as a feature request for the Constant Contact Inline Form builder. I'm basically just looking for a bit more customization to allow for smaller text and box height and width. See attached v2 of how large the form appears as the default builder and v3 is a mockup of how I would like it smaller under the post article.


Thanks for the feedback @GMGVEGAS2013! I'll update your case with this information.