Adding Forms to Landing Pages

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.

Forms and GDPR Requirements

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

Adding Forms

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, select the Page Templates tab. 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. 

Adding Forms via the Embed Code

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 display on the live page, however.

Editing Inserted Forms

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.