Inserting Forms and Form Styling Guide

Introduction

Forms are a great way to engage visitors on a website. Forms allow you to gather information about the visitor-- you can ask them for any type of information you like and after a person submits the form, eTrigue tracks them for ongoing tracking.

In DemandCenter, you can easily create forms using our Drag and Drop form builder, then easily insert them onto an eTrigue landing page.

Creating the Form

Before you can insert a form onto a landing page, you must first create the form in DemandCenter. Once you have created your form, the form will be ready for use with the Drag and Drop Landing Page Builder.

Inserting a Form onto a Landing Page

  1. Go to Assets and browser your asset explorer to open your landing page. If you haven't created a landing page yet, click New Asset > Landing Page to create a brand new landing page.

  2. Click on the Rows tab and choose Forms under the drop-down menu.


  3. The section will be refreshed and your forms will appear as preview boxes. You can also search for your form using the keyword box.


  4. Once you have found your form, drag the form, and drop it inside a Content block where you want the form to appear. In the example below, the form is being dropped into the middle Content block right above the social media icons.


That's it! The form is ready and live on your page.

 

How to Customize the Appearance of the Form

When a form has been inserted onto a landing page, the form will have a default styling layout. However, you can customize some of the form's styling. In the Drag and Drop Landing Page Builder, click on your form to adjust its Content Properties.


Content Properties

In the Content Properties box, adjust the HTML to customize the look and feel of your form. Provided below is a short guide on controlling the most common elements of your form.


Reduce spacing between the input fields

.etg_fld {margin-bottom: 1.3em;

Lower or increase the value next to "em".

Adjust the width of the input fields

#etg_form select {padding:.5em; width:98%;}

Change the % after "width:".

Change the text of of your field boxes

<label class="etg_text"><div class="etg_lbl">First Name</div>

Locate the <label> and <div> corresponding to the field you want to change and then update the name inside the <div> tag. In the code block above, "First Name" is what you would change.

Change the color styling of your submit button

#etg_submitbutton {color:#fff; background:#3aaee0;

After the # symbol, enter the hex triplet of the color that you would like to apply.

"color" adjusts the color of the text in the submit button.
"background" adjusts the color of the entire button.

If you need help with finding the right color, use this resource to find your hex triplet.

Change the text of your submit button

<span id="etg_submitlabel">change this text</span>
<span id="etg_submitprogress"><span>change this text</span>

Right before the TWO closing </span> tags, change the text.