Language

We're making it easier to get around Constant Contact with a brand new left navigation. Not all accounts have that change yet, so if your navigation looks different from our articles, that's why–but everything from the top can now be found on the left!

Email and Digital Marketing
How can we help you?
Search our help articles, video tutorials, and quickstart guides

You've got this. You've got us. Search our Knowledge Base to quickly find answers to your questions.

Install a contact sign-up form on a website

Article: 000018053
Updated: March 26, 2025

Add the HTML code for an Inline, Banner, Flyout, or Pop-up Sign-up Form to a website using various website builders

Exclamation Point IconImportant: This article requires you to use HTML code. If you work with a webmaster, they can help you install the code into your website. If you're using a website builder, please contact their support for help with placing the code. Your website builder or hosting platform must support Javascript for the sign-up form code to work. 

 

After creating and activating your sign-up form, the next step is to add the code to your website so your visitors can start submitting their contact information. There are two main steps for the installation the process:

  1. Get the code for your sign-up form:
  1. Install the sign-up form code on a website

Whenever a contact joins your list through your Inline, Banner, Flyout, or Pop-up Sign-up Form, they're able to unsubscribe at any time through the "Unsubscribe" link in your email footer. Want to be notified when you get new sign-ups? You can have a daily or weekly email sent to you summarizing your new and unsubscribed contacts.

 

Light Bulb IconDid you know? If you're not comfortable with adding code to your website, our Sign-up Landing Pages are HTML-free! The URL for the landing page can be linked to buttons, images, and text very easily in most website builders.

 

Get the code for your sign-up form

The first step for displaying your activated sign-up form on your website is to copy the HTML code for the form. For a Banner, Flyout, or Pop-up Sign-up Form, you only need to add the Universal Code. For an Inline Sign-up Form, there are two pieces of code that need to be installed on your website: the Universal Code and the Inline Code.

 

Universal Code for all sign-up form types

This piece of code connects your Inline, Banner, Flyout, or Pop-up Sign-up Form to your Constant Contact account. It's used for customization and configuration of your sign-up form. It also connects your form to your Constant Contact account so that the contact information you collect through your website is automatically stored in the contact list of your choice within your account. If you want to add your form to multiple pages of your website, you only have to install the Universal Code once.

  1. In your Constant Contact account, click Audience Growth > Sign-up Forms.
  2. Click the View universal code button.

    Sign-up Forms tab selected, Sign-up forms page with active forms, and View universal code button 
     
  3. Click Copy to clipboard.

    Universal code overlay with code field and Copy to clipboard button
     

Make sure your sign-up form is activated to ensure that it immediately displays on your website. Then you're ready for the final step of installing the code on your website:

  • If you're installing the Banner, Flyout, or Pop-up Sign-up Form, this is the only code you need and you can move on to installing the code in your website.
  • If you're installing an Inline Sign-up Form, you also have to copy the Inline Code before you can proceed.

 

Inline code for Inline Sign-up Forms only

This piece of code is used to determine where on your website your new Inline Sign-up Form displays. For example, it can be placed on your website's homepage, in the header or footer section, or in a side-panel, etc. The form can live on a single webpage, or you can add the code to multiple pages. Wherever you choose, the optimal size of the form is 312 pixels wide.

  1. In your Constant Contact account, click Audience Growth > Sign-up Forms.

    Sign-up forms page with Audience Growth menu expanded and Sign-up forms options selected 
     
  2. Click the three dots to open the menu on your Inline Sign-up form and select View inline code.

    Sign-up Forms tab, Sign-up forms page with active Inline Sign-up Form menu expanded, and View inline code option
     
  3. Click Copy to clipboard.

    Inline Code overlay with code field and Copy to clipboard button
     

If you ever want to move your form to a different location on your site, copy the <b>Inline code</b> and move it to where you want the form to exist. You can also paste the Inline code in several different places in your website; you'll still only need to add the Universal Code to your footer once.

 

Install the sign-up form code on a website

The final step for displaying your activated sign-up form on your website is to paste the code into your website's code.

  • For the Inline Sign-Up Form - The Universal Code needs to be pasted into your website's footer, somewhere between the <footer> tags that fall before the </body> tag. The placement of the Inline Code determines where the form displays. Typically you can paste the code anywhere in the section of code for your website's body if you want the form to appear on just one page.
  • For the Banner, Flyout, or Pop-up Sign-Up Form - The Universal Code can be placed anywhere on your website where you want the form to display. You can place the code on multiple pages or place the code in your website's footer to display the form on every page. 

After the code is embedded in your website, any changes you make to the content (title and description text, contact information fields, and list options) or design (background and button color) of your sign-up form in your Constant Contact account are automatically reflected on your website.

The form relies on the styles built into your website. To change the appearance of the sign-up form beyond the background and button color, you have to choose a new theme for your website or update the CSS in your website. Your webmaster or the support for your website builder can help you with this.

 

Light bulb iconDid you know? It's possible to add both the Inline Sign-up Form and either a banner, Flyout, or Pop-up Sign-up form to your website, but they can sometimes appear together on the same page. We recommend only using one type of form at a time. 

 

Instructions (Listed alphabetically by site builder)

To install the sign-up form code on a website created with a website builder, follow the instructions below for your specific builder tool. If you're having trouble or you don't see your website builder listed, your webmaster can help you place the code, or you can contact the support for your website builder for further assistance.

Exclamation Point IconImportant: If you add the code to your website and it doesn't immediately display, check to make sure that your sign-up form is activated. 

 

BigCommerce

If you use BigCommerce for your site, we recommend using our Banner, Flyout, or Pop-up Sign-up Form instead of our Inline form. These forms only require the use of the Universal Code which you can easily install in the footer of your BigCommerce site.

For help adding the code to your BigCommerce website, please contact your webmaster or view BigCommerce's support.

 

Dreamweaver

Adding Universal Code for the Inline, Banner, Flyout, and Pop-up Sign-Up Forms:

  1. Copy the Universal Code for your sign-up form.
  2. Open your HTML file in Dreamweaver.
  3. Scroll all the way down to the footer section of the code and paste your Universal Code before the </ body> tag.

 

Adding Inline Code for the Inline Sign-Up Form:

  1. Copy the Inline Code for your sign-up form.
  2. Go back to Dreamweaver and decide where you want your form to display. Once you've picked a spot, paste the Inline Code into your HTML code.

For help adding the code to your Dreamweaver website, please contact your webmaster or view Dreamweaver's support.

 

Elementor for WordPress and WooCommerce

Adding Universal Code for the Inline, Banner, Flyout, and Pop-up Sign-Up Forms:

  1. Copy the Universal Code for your sign-up form.
  2. In Elementor, edit your footer.
  3. Add an HTML widget to the footer
  4. Paste the code in to the widget.

 

Adding Inline Code for the Inline Sign-Up Form:

  1. Copy the Inline Code for your sign-up form.
  2. In Elementor, add an HTML widget. Your sign-up form displays wherever you place the widget.
  3. Paste the code into the widget.

For help adding the code to your WordPress or WooCommerce website using Elementor, please contact your webmaster or view Elementor's support.

 

GoDaddy Website Builder

At this time, the inline and pop-up sign-up forms are incompatible with GoDaddy's Website Builder.

A Sign-up Landing Page can also be linked to your GoDaddy site:

Inline-style form:

  1. Create a Sign-up Landing Page.
  2. Copy the URL for your Sign-up Landing Page.
  3. Open the GoDaddy website editor.
  4. Click the Popup button in the bottom right-hand corner of the page.
  5. In the Action Button section, change the button label to "Subscribe" or Sign-up."
  6. Under Link to, choose "Website URL" and paste in the URL for your Sign-up Landing Page.
  7. Click Done.
  8. Click Publish.

 

Pop-up-style form:

Install a Sign-up Landing Page into the built-in pop-up in GoDaddy.

  1. Create a Sign-up Landing Page.
  2. Copy the URL for your Sign-up Landing Page.
  3. Copy the code below and:
  • Replace LANDING_PAGE_URL with the URL for your Sign-up Landing Page.
  • Adjust height number (height="470px") as needed to accommodate for additional form fields. 
    &lt;div style="text-align:center"&gt;
&lt;iframe src="LANDING_PAGE_URL" scrolling="no" frameborder="0" style="text-align:center" marginheight="0px" marginwidth="0px" height="470px" width="600px" &gt;&lt;/iframe&gt;
&lt;/div&gt;
  1. Open the GoDaddy website editor.
  2. Click + Add Section.
  3. Click Files & Web > HTML.
  4. Paste the code into the Custom Code field.
  5. Click Publish.

For help adding a pop-up box or custom code to your GoDaddy Site, please contact your webmaster or view GoDaddy's support.

 

Google Sites

At this time, Google Sites is incompatible with our Banner, Flyout, and Pop-up Sign-up Form. If you have multiple pages where you want to display an Inline Sign-up form, the code needs to be added to each individual page.

 

Adding Universal Code for the Inline Sign-Up Form:

  1. Copy the Universal Code for your sign-up form.
  2. Click Insert > Embed.
  3. Click "Embed code.”
  4. Paste the Universal Code into the field.
  5. Click Next.
  6. Click Insert.
  7. Move the block to the location on your site where you want your sign-up form to display.
  8. Resize the block as necessary so the full sign-up form is visible.

 

Adding Inline Code for the Inline Sign-Up Form:

  1. Copy the Inline Code for your sign-up form.
  2. Edit the "Embed code" block where you added the Universal Code.
  3. Paste the Inline Code underneath the Universal Code.
  4. Click Next.
  5. Click Insert.

For help adding the code to your Google Site, please contact your webmaster or view Google's support.

 

Hubspot

Adding Universal Code for the Inline, Banner, Flyout, and Pop-up Sign-Up Forms:

  1. Copy the Universal Code for your sign-up form.
  2. Click Settings.
  3. Click Content > Pages.
  4. Select the domain you want to apply your sign-up form to.
    Note: If you apply code to the footer for a specific domain, changes you make to "All domains" won't apply to that individual domain and you have to add the changes manually to it.
  5. In the Site Footer HTML section, click Override default settings.
  6. Paste the Universal Code into the footer code.
  7. Click Save.

 

Adding Inline Code for the Inline Sign-Up Form:

  1. Copy the Inline Code for your sign-up form.
  2. Click Content and click on the name of the page you want to add your sign-up form to.
  3. Click on a Rich Text module in your layout, or add one using the Common modules. filter in the menu on the left-hand side of the layout.
  4. In the menu on the left-hand side of the layout, click Advanced > Custom code.
  5. Paste the Inline Code into the source code.
  6. Click Save changes.

For help adding the code to your HubSpot footer or webpage, please contact your webmaster or view HubSpot's support.

 

iPage WebsiteBuilder

Adding Universal Code for the Inline, Banner, Flyout, and Pop-up Sign-Up Forms:

  1. Copy the Universal Code for your sign-up form.
  2. Drag an Embed HTML element into your website.
  3. Click "Insert HTML."
  4. Paste the Universal Code into the Header HTML section.

 

Adding Inline Code for the Inline Sign-Up Form:

  1. Copy the Inline Code for your sign-up form.
  2. Paste the Inline Code into the Body HTML section.
  3. Click OK to save the code.
  4. Resize the block as necessary so the full sign-up form is visible.
  5. Click Publish.

For help adding the code to your iPage website, please contact your webmaster or view iPage's support.

 

Shopify

Adding Universal Code for the Inline, Banner, Flyout, and Pop-Up Sign-Up Forms:

  1. Copy the Universal Code for your sign-up form.
  2. In your Shopify account, click Online Store and click the Customize button.
  3. Click Theme actions > Edit Code.
  4. Click Sections > footer.liquid. 
  5. Paste the Universal Code after the last line of existing code and click Save.

 

Adding Inline Code for the Inline Sign-Up Form:

  1. Copy the Inline Code for your sign-up form.
  2. Click Sections and click on the content block where you want to add the sign-up form. For example, hero.liquid adds the sign-up form after your main image, and slideshow.liquid adds the sign-up form after the slideshow block.
  3. Paste the Inline Code after the last line of existing code and click Save.

To see the sign-up form, you must preview your website.

For help adding the code to your Shopify website, please contact your webmaster or view Shopify's support.

 

SiteBuilder

Adding Inline Code for the Inline Sign-Up Form:

  1. Copy the Inline Code for your sign-up form.
  2. In the Sitebuilder website editor dashboard, click Elements.
  3. Paste the Inline Code into the HTML block.

 

Adding Universal Code for the Inline, Banner, Flyout, and Pop-Up Sign-Up Forms:

  1. Copy the Universal Code for your sign-up form.
  2. In the Sitebuilder website editor dashboard, click Elements.
  3. Paste the Universal Code into the HTML block below the Inline Code.
  4. Drag the HTML block to the desired page and location on your website.

For help adding the code to your SiteBuilder website, please contact your webmaster or view SiteBuilder's support.

 

Squarespace

Adding Universal Code for the Inline, Banner, Flyout, and Pop-Up Sign-Up Forms:

  1. Copy the Universal Code for your sign-up form.
  2. In Squarespace, click Website > Pages > Website Tools (found at the bottom of the page).
  3. Click on Code Injection. 
  4. Paste the Universal Code into the Header section. 
  5. Click Save.

 

Adding Inline Code for the Inline Sign-Up Form:

  1. Copy the Inline Code for your sign-up form.
  2. In Squarespace, select the desired page where you want your sign-up form to display and click Edit.
  3. Click the Add Block button in the top right corner of the content editor.
  4. Scroll through the options and select Code.
  5. Paste the Inline Code into the block and click Apply.
  6. Drag the code block to the desired location on the page.
  7. Click Save.

For help adding the code to your Squarespace website, please contact your webmaster or view Squarespace's support. Please note that code injection is a premium feature available in Squarespace's Business and Commerce plans.

 

Website.com

Inline Form Code and Universal Code for Inline, Banner, Flyout, and Pop-up Forms

  1. Click the + button to add new content to your website.
  2. Select "Other."
  3. In the Custom HTML section, click HTML.
  4. Click in the Custom HTML container and click EDIT HTML CODE.
  5. Copy the Inline Code and paste it in the HTML field.
  6. Copy the Universal Code and paste it in the HTML field.

To see the sign-up form, you must preview your website.

For help adding the code to your website.com website, please contact your webmaster or view website.com's support.

 

Weebly

Adding Universal Code for the Inline, Banner, Flyout, and Pop-Up Sign-Up Forms:

  1. Copy the Universal Code for your sign-up form.
  2. In Weebly, click Settings > SEO.
  3. Paste the code into the Footer Code section.
  4. Save your changes.
  5. Click Publish.

 

Adding Inline Code for the Inline Sign-Up Form:

  1. Copy the Inline Code for your sign-up form.
  2. In the Weebly website editor dashboard, select the "Embed code" option on the left hand toolbar.
  3. Click and drag the block to the desired page and location on your website.
  4. Paste the Inline Code into the block.
  5. Save and Publish.

For help adding the code to your Weebly website, please contact your webmaster or view Weebly's support.

 

Wix

Adding Universal Code for the Inline, Banner, Flyout, and Pop-Up Sign-Up Forms:

  1. Click the Add Elements (+) button.
  2. Click Embed Code > Popular Embeds.
  3. Select Embed HTML.
  4. In the What do you want to add? section of the HTML Settings overlay, select the Code option.
  5. Copy the Universal Code for your sign-up form.
  6. Paste the Universal Code into the field.
    Note: The Universal Code doesn't show "HTTPS," but it is compatible.
  7. Click Update.
  8. Resize the block as necessary so the full sign-up form is visible.

 

Adding Inline Code for the Inline Sign-Up Form:

  1. Click the Add Elements (+) button.
  2. Click Embed Code > Embed HTML.
  3. In the What do you want to add? section of the HTML Settings overlay, select the Code option.
  4. Copy the Inline Code for your sign-up form.
  5. Paste the Inline Code underneath the Universal Code.
    Note: The Inline Code doesn't show "HTTPS," but it is compatible.
  6. Click Update.
  7. Resize the block as necessary so the full sign-up form is visible.

If you have multiple pages where you want to display an Inline Sign-up form, you can create the form and add the code to each page.

 

The Constant Contact Form app by Digioh adds a lightbox sign-up form to your webpage and you don't need to create an Inline or Pop-up Sign-up Form within Constant Contact.

  1. Go to this link: https://www.wix.com/app-market/constant-contact-form
  2. Under the "Constant Contact Form" app by Digioh, Click Add to Site.

For help adding code to your Wix site, please contact your webmaster or view Wix support. For help using the Constant Contact Form app, please view Digioh's support.

 

Wordpress.org

Adding Universal Code for the Inline, Banner, Flyout, and Pop-Up Sign-Up Forms:

  1. Copy the Universal Code for your sign-up form.
  2. From the Dashboard on the left-hand side, select Appearance > Customize.
  3. Click Widgets.
  4. Click Footer Sidebar, Footer #, or Footer Area #, Footer Column #, etc.
    Note: Depending on your chosen theme, you may need to first add a new widget.
  5. Choose Custom HTML.
  6. Paste the Universal Code into the Content field. Leave the Title field blank.
  7. Click "Done."
  8. Click Publish.

 

Widgets can vary depending on your chosen theme. If you don't see a widget for your footer, try looking for the footer settings for your chosen theme by clicking Appearance > Customize and then clicking Footer (if available) to edit the footer content. Sometimes the theme has its own named tab in the Dashboard Menu, and you can edit the footer from there. If you don't see any of these options, you have to edit the footer code by clicking Appearance > Editor > footer.php. Please note that if you later change the theme, the sign-up form code is stripped out of the footer.php and you have to add it back in again.

 

Adding Inline Code for the Inline Sign-Up Form:

  1. Copy the Inline Code for your sign-up form.
  2. From the Dashboard on the left-hand side, select Pages > All Pages.
  3. Click on the name of the page where you want to add the code.
  4. Click the Text tab on the right-hand side.
  5. Paste the Inline Code into the text block where you want the form to display.
  6. In the Publish section, click Update.

For help adding the code to your Wordpress.org website, please contact your webmaster or view Wordpress.org's support.

 

Wordpress.com

Wordpress.com is not the same as Wordpress.org. Wordpress.com doesn't support 3rd party Javascript or plugins of any kind. If you're using Wordpress.com, we recommend creating a Landing Page Sign-up Form. You can then copy the Landing Page's URL and link it to a button or text link on your Wordpress.com website.

 

Light Bulb IconDid you know? We've integrated with WordPress so that Wordpress.com Business Plan users and Wordpress.org users also have the option to use the WordPress plugin to collect sign-ups. Learn more.

 

For help adding the code to your Wordpress.com website, please contact your webmaster or view Wordpress.com's support.

 

Any links we provide from non-Constant Contact sites or information about non-Constant Contact products or services are provided as a courtesy and should not be construed as an endorsement by Constant Contact.

Questions?

Ask the Community

Did this article answer your question?

Yes
Partially
No

Related Answers

Constant Contact Logo

Copyright © 2025 · All Rights Reserved · Constant Contact · Privacy Center