Adding Forms to Landing Pages

You can insert a form directly into your landing page and customize the display settings

Forms that you created within Lead Gen & CRM can be embedded into a landing page. To add a form to a Lead Gen & CRM landing page, insert a Form block via the Elements tab in the Content Editor or paste the form's embed code directly into the page's HTML body.

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.

---

Article Contents

• Ensuring GDPR compliance for landing page forms
• How to embed a form using the content editor
• How to add a form using custom embed code
• Editing forms that have been inserted into a landing page
• Solving common landing page form problems

 

 

Users:

Administrators	✓
Company Managers	✓
Marketing Managers	✓
Sales Managers
Salespersons
Jr. Salespersons

Ensuring GDPR compliance for landing page forms

Forms establish tracking. The European Union's new data protection law, the General Data Protection Regulation (GDPR), is meant to protect the data and rights of individuals who are in the European Union and European Economic Area (EU/EEA). One of these protections is consent. In this case, the consent to allow or deny tracking and the gathering of their personal information. You must give visitors the chance to either allow or deny tracking before it happens. Once you have added forms to a landing page, you will need to enable GDPR settings on both the landing page and the form.

For more information on the GDPR and how you must incorporate its protections into your pages and forms, refer to the following:

• Adding GDPR Cookie Banners to Landing Pages
• The European Union General Data Protection Regulation (GDPR)
• How the GDPR Impacts Lead Gen & CRM and You

How to embed a form using the content editor

You can insert the forms you've created from the form tab in Lead Gen & CRM into a landing page. Create a form there before inserting it into your landing page. To add a form to a landing page, do the following:
 

1. From the Landing Pages tab in the left toolbar, create a new landing page or edit an existing landing page.
   
   Note: To jump-start your landing page, you can select the Page Templates tab and choose from one of our professionally pre-designed page templates to help you accelerate your project. 
   
    
2. Click    Add Content in the Content Editor panel.
3. Click the Layouts tab.
4. Select the desired layout.
   
    
5. Click on the Elements tab.
6. Click the Form block.
7. Click on the layout that you've just added to your landing page. 
   
   Note: If elements already exist on the page, you'll see a purple line instead, which will help guide you to the location where your Form can be placed. 
   
    
8. Click the X to close the panel and begin editing your form block. 
   
    
9. Click on the form block that you've just added to the page. 
10. In the Form Settings panel, select the form you'd like to insert from the Select A Form dropdown. 
    
    Note: These are forms you've created from the form tab in Lead Gen & CRM. Create a form there before inserting it into your landing page. 
    
    
11. Optionally, choose what happens after the form is submitted:
    1. Click the Override Redirect URL with a Page drop-down menu and choose a page in the funnel to display after the form is filled out.
    2. Enter a URL in the Override Redirect URL with a Custom URL text box to display a website after the form is filled out. This will disable displaying the page in the Override Redirect URL with a Page menu.
12. Click the Use Placeholder checkbox if you'd like the form's placeholder text to appear within the form's fields. That text will be replaced when page visitors begin typing in their own answers. 
13. Choose to use the style of your form:
    1. Landing Page Theme: Takes its theme directly from the landing page template
    2. Form Theme: Takes its theme from the CSS entered in the Form Builder
       
        

Note: If you need to modify the settings that apply to the form — including the form title, included fields, placeholder text, button link, and theme — you'll need to leave Lead Gen's Landing Page section and go to the Forms section. Click the green Form Editor button to access the form settings and make the necessary changes. 

How to add a form using custom embed code

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

Lead Gen & CRM allows you to access the code for each landing page. You can add the form's embed code directly to the landing page code. To add the embed code directly to the landing page, first obtain the desired form's embed code.

1. Click   Add Content in the Content Editor panel.
2. Select the Layouts tab.
3. Select the desired layout.
   
    
4. Click    Edit Code in the left panel.
5. In the Body tab, find the following line:
   
   <div class="inner-col empty"></div>
   
    
6. Delete the word empty, and paste the copied form embed code between the <div> tags.
7. Click Save.
   
   
   

Note: When placing the embed code, it will not display in the editor. It will, however, display on the live page.

Editing forms that have been inserted into a landing page

Once you have added a form, you can edit it directly in the editor panel. To edit forms in the landing page, do the following:

1. Click on the inserted form element to open up the properties editor panel.
2. Make the needed changes. 
   
   

Solving common landing page form problems

Why isn't my embedded form showing up in the Landing Page Editor?

Forms added through custom HTML embed code will not be displayed inside the editor view. They only render once you preview or view the live, published page.

How do I change the fields, button text, or title on my form?

You cannot change form fields directly inside the landing page builder. Click the green Form Editor button (or navigate to the Forms tab in Lead Gen & CRM) to update fields, titles, and options.

Why is my form not matching the style of my landing page?

Check your form's style settings. Under Form Settings, select Landing Page Theme to match the page template's styling, or select Form Theme if you prefer to use the CSS defined in the Form Builder.

How do I redirect visitors to a custom thank-you page after submitting the form?

Open the Form Settings panel in the editor. Use Override Redirect URL with a Page to redirect within your funnel, or enter a link into Override Redirect URL with a Custom URL to send them to an external site.

How do I make field instructions appear inside the input boxes?

Check the Use Placeholders box in the Form Settings panel. This displays placeholder text inside the input fields, which automatically disappears when visitors start typing.

Do I need to enable GDPR settings on both the landing page and the form?

Yes. Forms establish tracking, so to comply with GDPR requirements, you must enable consent settings on both the form itself and the host landing page.

Questions?