Customize E-mail Collector Form


Customize E-mail Collector Form


  I would like my collector form to be smaller and I can't figure out how to update the HTML to reflect the look I want. I've already made a few small updates (like using placeholder text instead of a label). I've listed the other three changes below and hope someone can help me figure it out. Thanks in advance!


1) I am only putting 2 fields (and the submit button) in the form. I would like all 3 fields to appear across the page horizontally rather than vertically.

2) I would like for the width of the form to be constrained to 500 pixels.

3) Is there any way to change the color of the submit button to Navy Blue #140369?


Here is my current (updated) HTML. Thanks!

<!--Begin CTCT Sign-Up Form-->
<!-- EFD 1.0.0 [Sat Jan 07 21:30:28 EST 2017] -->
<link rel='stylesheet' type='text/css' href=''>
<div class="ctct-embed-signup" style="font: 16px Source Sans Pro, sans-serif; font: 1rem Source Sans Pro, sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased;">
<div style="color:#140466; background-color:#F5F5F5; border-radius:5px;">
<span id="success_message" style="display:none;">
<div style="text-align:center;">Thanks for signing up!</div>
<form data-id="embedded_signup:form" class="ctct-custom-form Form" name="embedded_signup" method="POST" action="">
<h2 style="margin:0;"></h2>
<!-- The following code must be included to ensure your sign-up form works properly. -->
<input data-id="ca:input" type="hidden" name="ca" value="2760487c-36f9-4dcf-8711-1400ab6d955f">
<input data-id="list:input" type="hidden" name="list" value="1045683862">
<input data-id="source:input" type="hidden" name="source" value="EFD">
<input data-id="required:input" type="hidden" name="required" value="list,email,first_name">
<input data-id="url:input" type="hidden" name="url" value="">
<p data-id="Email Address:p" > <input data-id="Email Address:input" type="text" name="email" placeholder="E-mail" value="" maxlength="80"></p>
<p data-id="First Name:p" > <input data-id="First Name:input" type="text" name="first_name" placeholder="Name" value="" maxlength="50"></p>
<button type="submit" class="Button ctct-button Button--block Button-secondary" data-enabled="enabled">Sign Up</button>
<div><p class="ctct-form-footer">By submitting this form, you are granting: Compass Yoga, 5714 Edmondson Pike, Nashville, Tennessee, 37211, United States, permission to email you. You may unsubscribe via the link found at the bottom of every email. (See our Email Privacy Policy for details.) Emails are serviced by Constant Contact.</p></div>
<script type='text/javascript'>
var localizedErrMap = {};
localizedErrMap['required'] = 'This field is required.';
localizedErrMap['ca'] = 'An unexpected error occurred while attempting to send email.';
localizedErrMap['email'] = 'Please enter your email address in format.';
localizedErrMap['birthday'] = 'Please enter birthday in MM/DD format.';
localizedErrMap['anniversary'] = 'Please enter anniversary in MM/DD/YYYY format.';
localizedErrMap['custom_date'] = 'Please enter this date in MM/DD/YYYY format.';
localizedErrMap['list'] = 'Please select at least one email list.';
localizedErrMap['generic'] = 'This field is invalid.';
localizedErrMap['shared'] = 'Sorry, we could not complete your sign-up. Please contact us to resolve this.';
localizedErrMap['state_mismatch'] = 'Mismatched State/Province and Country.';
localizedErrMap['state_province'] = 'Select a state/province';
localizedErrMap['selectcountry'] = 'Select a country';
var postURL = '';
<script type='text/javascript' src=''></script>
<!--End CTCT Sign-Up Form-->



Thank you for reaching out to the API Support team here at Constant Contact.

The Embed Code that you are using is just standard HTML and can be modified accordingly. If you notice it is using an external style sheet which determines the look of the form. This includes the way the buttons look include shape, size, and color. If you want to change this aspect of any part of the form you will need to remove our style sheet, or override our styles. Just keep in mind if you remove our style sheet you will need to go through and code in your own styles for the form on your own.

In order to remove the style sheet you will need to locate the below line of code and remove it.

<link rel='stylesheet' type='text/css' href=''>

**edited post to remove article link that is no longer valid**

Please let me know if you have any other questions!

David B.
API Support Specialist

as of december 2017, it appears that this isn't possible since the embeddable code doesn't seem to be editable anymore. Also that article referenced is no longer available. 

Hi @ToddV8,


The embedded code form that the above posts are referring to is no longer available to new accounts. If an older account still have the form active on a website the code will work and the code can be edited.


We have decided to move away from that older HTML form towards a more streamlined form that is not available within the Constant Contact account under the link for Sign-Up forms.


Because we have moved away from the older style of HTML form the articles referring to it have also been removed. I will make sure to edit the above post to remove the link since it no longer works.

Jimmy D.
Tier II API Support Engineer

So how would one go about modifying their sign up forms moving forward?



Right now Constant Contact does not offer a customizable HTML signup form. We instead offer our more advanced Inline Form which is edited from within our website. There are two small snippets of code to place on your website that are generated from within the Constant Contact account. Please see this link for details on using this new form:

David B.
Tier II API Support Engineer

Hi David,


Is it possible to customize our sign-up form (embedded in a WordPress website) to show placeholder text that says "Email Address"?


I think this is not possible, but I just wanted to be sure! Thank you in advance.



Our inline form that is available within your account is not able to have a placeholder and instead has a label above the field. You may find using our Constant Contact Forms for Wordpress plugin more to your liking as this does let you set placeholder text. For more details about it see:


David B.
Tier II API Support Engineer

Developer Portal

View API documentation, code samples, get your API key.

Visit Page