Mouse over 'Web' on the main menu. From the drop down, select Acquisition > Acquisition Forms.
Now, click on 'New Acquisition Form' located in the bottom-right of your screen, this will take you to the screen below:
- Form Name — This is the name of the form that you will be referencing within the Acquisition Builder interface.
- Form ID — Provide an ID that confirms to proper CSS naming convention.
- Form Type — Select from one of the pre-defined forms. You can always change the labels of each form button.
- Submission — Provides three action buttons: Submit (the default-selected button), Cancel, and Close.
- Information — A single-button form. This type of form is best for lightboxes that display informational content only, and that the only user interaction needed is to simply close the form.
- Confirmation — A two-button form for getting a Yes/No option.
- Agreement — Another type of two-button form for an Agree/Cancel option. You can accomplish the same result with a Confirmation Form simply by changing the button labels. But we’ve provided the Agreement Form as a simple short-cut for your convenience.
- Layout
- Popup — Use this layout when you want a lightbox that appears centred in the browser window.
- Horizontal Bar — This layout is the best option when you want the lightbox to appear at either the top or the bottom of the browser window.
- Vertical Bar — This layout is best when you want the lightbox to appear at either the left or the right of the browser window.
- Inline — You must select this option if you want to use an embedded form that appears inline with the layout of your web page.
- Width — Specify the number of pixels wide you want the lightbox to appear.
- Height — Specify the number of pixels high you want the lightbox to appear.
- Overlay Color — You can set both the color and the transparency of the overlay.
- Popup Background — You can set the background of the lightbox to be either a color or an image. If you are using a color, then you can also set its transparency. If you are using an image, you can specify the URL of the image file to be either from your own web content server, or from the Maropost Image Library for your account. Bear in mind that you probably don’t want to use a high resolution image for a background. If you have one, then have your graphic designer create a lower resolution image whose dimensions are equal to the dimensions of your lightbox.
- Circular Background — Drag the slider to the left to get square edges for your lightbox. Dragging to the right increases the corner radius of the form.
- Grid — Before you can add any Form Element or Design Element, you must place a Grid element in your form. Drag the Grid from the palette and drop it into the Form at the right.
You can add as many Grid elements as you want to your lighbox.
You can split a Grid element into two side-by-side elements by clicking the Split button that appears in the center of the Grid. If you change your mind, then you can delete one of the split cells by clicking inside the cell, and the clicking the trash can icon in the lower-right corner of the screen. - Pop-up Scrollbar — Select this option if you want a scroll bar to appear in your lightbox. Most of the time you shouldn’t select this. However, this option is good for lightboxes for displaying information that is quite verbose such as Terms and Conditions.
- Form Elements — Drag a Form Element from the palette and drop it inside the Grid where you want the element to appear. You’ll note that you’ll get a field label with each form element. If you just want the form element by itself without a label, simply click on the field label and click the trash can icon in the lower-right corner of the screen.
- Text Box — This is a Text Area form element.
- Text Field — This is a Text Field form element. This element is what you typically use to capture information such as email address, first name, and last name.
- Dropdown — This is a single-select list field form element. This form element is good when you want to store pre-set keywords for segmentation purposes.
- Date — You will specify the format of the date when you set the Element Attributes (see below)
- Radio Button — This is another type of single-select option that lets you store a pre-set keyword. You can add as many radio buttons as you want. Remember to make sure that all the radio buttons have the same field name to be considered part of the same radio button group.
- Checkbox — Good for simple yes/no options.
- Design Elements
- Paragraph — Good for instructional text in your lightbox.
- Image — You can either use an image from your own web server, or one from the Maropost Image Library.
- Custom HTML Box — Sometimes you just want to write your own custom HTML for more advanced capabilities of your form. This Design Element gives you the ultimate flexibility to customize the appearance of your lightbox.
For example, you can use the Custom HTML Box to include a hidden form field value to pass into contact’s profile attributes upon form submission. In this case, your custom HTML would simply be:
<input type="hidden" name="mp_source" id="mp_hidden_field" value="google_word_campaign" class="form-element">
You can delete any element that you’ve added to your lightbox form by clicking first on the element and then clicking the trash can icon located in the lower right corner of the screen. You can duplicate any element by clicking on the element and then clicking the duplicate icon located in the same area. If you just want to reset the form back to its default then click the reset button located next to the trash can icon.
Element Attributes
When you’d added a Form Element to your lightbox, now it’s time to define its attributes. Click on the form element in your lightbox in the right-side of the screen. You’ll notice that the left-hand side of the screen changes to display the Attributes Settings.
The attribute settings will vary depending upon the type of Form Element. However, some attributes are common for all
- Name — The name of the form element.
- ID — Provide an ID that confirms to proper CSS naming convention.
- Class — Optional, but is provided to allow you to have the form field in the lightbox to be consistent with the CSS of your web site.
Element Validations
Here is where you can specify whether a form field is required as well as validate its input. The screen will inform you which button click will execute the validation rules depending upon the type of form you are using.
- Required — Select this option when you want to make any field a required field. If the user submits the form without entering anything in the field, then 'This field is required' will appear below the field.
- Custom Regex — Select this option if you want to validate the accuracy of the information entered in any text field. For example, to make sure that the user has entered an email address of valid format (it doesn’t check if the email itself is a real one) then enter the proper Regex validation expression. Another good example is to make sure that the user has entered a date value in the format you want instead of entering something totally invalid. You can also provide a custom error message if the user didn’t enter the data in the proper format.
Customizing Action Buttons
You can customize every action button in your lightbox. Just click on any button as it appears in the right-hand preview window. Note that when you do, the left side of the screen changes to display the Attributes Settings.
Here, you can customize not only the button label, but also its font family, font size, font color, background color, size, the button’s border radius, and even its hover color.
Saving Your Form
When you’re satisfied with how your form looks, click the [Save] button in the lower-right corner of the screen.
IMPORTANT: If you’ve made changes to a form that is being used in an existing Acquisition Builder, then you will need to re-save each Acquisition Builder where the form is used in order for your changes to be visible to the site visitor.
