Using Form Embed Codes

Tip: Are you looking for information about Constant Contact’s Email and Digital Marketing product? This article is for Constant Contact’s Lead Gen & CRM product. Head on over to the Email and Digital Marketing articles by clicking here. Not sure what the difference is? Read this article.

Regarding Supported Forms

Lead Gen & CRM supports three types of forms: Constant Contact forms, third-party forms, and native forms.

Native forms and third-party forms both rely on field mapping within Lead Gen & CRM, but only native and Constant Contact forms require a script tag embed. It is important that the code does not get altered after it is placed in the location where you want the form. Any alteration will prevent the form from rendering or tracking properly.

Currently, native forms can only track one form per page. If you have more than one form per page, you must provide an ID for the form so it can be tracked.

Additionally, CSS related to Lead Gen & CRM forms must follow or overwrite the standard set of CSS. 
 

Using Embed Codes

To locate and use a form's embed code:
 

1. Click Forms in the left toolbar.
2. In the Form List section, locate the desired form and click    Actions > Embed Code.
   
   

    

3. Copy the code that appears in the modular window and paste the code onto your site.
4. Click Close.
   
   

Regarding Embedding Code

Note: Constant Contact offers Professional Services to assist with custom coding.

When embedding form code into your site, be aware of the following:

• Each form has a different embed code. There is not a single embed code for all of the forms you create in Lead Gen & CRM. Make sure you are using the correct one when adding forms to a site.
• Code placement varies by site. There is no single location where the form goes by default. You will need to place the embed code in the portion of your site code that reflects where you want the form to display. As such, due to individual site styles and formats, each placement and resulting code will be different.  
• Some external plugins may try and rewrite or simplify the form embed codes. For example, Wordpress has a plugin called Autoptimize that rewrites and moves script blocks to the end of the page. You will need to either change settings or turn off the optimizer.  
• You cannot use embed code with Lead Gen & CRM emails. For security reasons, most Internet service providers (ISPs) block scripts in emails. 

Example Lead Gen & CRM Embed Code

Lead Gen & CRM embed codes appear like the following example code, though the account, formID, and domain values will vary from your values, as they are different for your company and form:

<!-- Lead Gen & CRM Form for (your form's name here) -->
<script type="text/javascript">
 var ss_form = {'account': 'yyyyyyyyyyyyyyy', 'formID': 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'};
 ss_form.width = '100%';
 ss_form.domain = 'app-zzzzzzzzzz.marketingautomation.services';
 // ss_form.hidden = {'field_id': 'value'}; // Modify this for sending hidden variables, or overriding values
 // ss_form.target_id = 'target'; // Optional parameter: forms will be placed inside the element with the specified id
 // ss_form.polling = true; // Optional parameter: set to true ONLY if your page loads dynamically and the id needs to be polled continually.
</script>
<script type="text/javascript" src="https://koi-zzzzzzzzzz.marketingautomation.services/client/form.js?ver=2.0.1"></script>

Hidden Fields

You can use hidden fields in forms to pass instructions to the Lead Gen & CRM form when rendering. The following is default hidden field code: ss_form.hidden = {'Company': 'Anon'};

Any fields on the form can be given a value to overwrite any user provided value. Therefore, they will also be hidden from showing up on the form. 

As an example, consider the following: ss_form.hidden = {'Company': 'Acme Co.'};

This will ensure that the Company field will be set to Acme Co. when the form is submitted. The visitor filling out the form will not even be able to see the field, let alone enter text into the field. This is useful for preventing bots from submitting data on a form.
 

Placeholder Text

Placeholder text is grayed out text that will appear on a field in a form. It will give the individual filling out the form instructions about the expected action in the field. For example, a name field may have placeholder text that reads Enter your name here.

You can enable placeholder text over fields by setting the _usePlaceholders parameter to true. As an example, consider the following:
ss_form.hidden = {'Company': 'Acme Co.', '_usePlaceholders': true};

This setting also needs to be coupled with changes in your .CSS file to prevent the labels from showing up twice. Set labels to display: none; for text input fields.
 

Native Form Embed Codes

Native form embed codes will appear similar to the following example code, though the baseURI, endpoint, and src values will vary from your values, as they are different for your company and form: 

<script type="text/javascript">

   var __ss_noform = __ss_noform || ;

   __ss_noform.push(['baseURI', 'http://app.constantcontact.com/webforms/receivePostback/MwYA/']);

   __ss_noform.push(['endpoint', '70bbd19b-4f2c-45af-a25f-0a6aa2b55a19']);

</script>

<script type="text/javascript" src="http://app.constantcontact.com/client/noform.js?ver=1.0" ></script>

Optional Native Form Embed Options

Some forms will need special parameters added to the embed code to work properly. By default, native form embeds will grab the first form on the page that uses POST to submit data.

When adding special parameters, do the following:
 

• Specify the form by ID. This is useful if there is more than one form on the page.
• Set the ID property. In the code, formID is the ID property on the form tag. Add this immediately after the endpoint is defined: __ss_noform.push(['form', 'formID']); 
• Specify a function. This validates the form before it submits to Lead Gen & CRM.
• Set a validate function. In the code, validate is the name of the function that returns true or false depending on whether or not the form contains valid input from the user. If the form fails to validate, it will prevent the form from submitting the lead information to Lead Gen & CRM. Add this anywhere after the endpoint is defined in the embed: __ss_noform.push(['validate', validateThis]);

Did this article answer your question?