Reusing a Field
Fields Labels can be used multiple times in the HTML. The user will only have to fill out the data field one time and the data value will be used every time the exact same label is found throughout the template.
Positioning of the Form Fields
The location of the Form Fields within the outputted HTML is specified by placing the following code in your template:
<!-- form -->
The rendered template will include all of the form fields and validation.
Social Sharing content
To allow users to have the Social Sharing icons option available in your Template Based Landing Pages, you will need add the following tag to your template:
<!-- social -->
If your template does not include this tag, the Social Sharing icons will not be rendered on the page, even if the user selects the option.
Allow users to enable Captcha to prevent spam
To allow users to have the option of having a Captcha included on their form, add the captcha_ready tag anywhere in your form. You should test that captchas work properly on your form once enabling this tag. (If this tag is in place, you should see a checkbox in the Advanced tab of the Landing Page allowing users to toggle a captcha)
<!-- captcha_ready -->
Design Considerations for “Form” portion of the Landing Page
The design should leave room for a box that is at least 360 pixels wide for the “form” portion of the landing page.
The design should assume that this box could stretch vertical for an unknown height. Users can pick which fields show up in the form and this portion of the form will stretch accordingly.
Styling the Form Fields and Labels
View the source of the rendered template to find the CSS classes which you can use to format the fields to your liking. Include the CSS classes in your templates style definition.
Related: “Hiding The Default Submit Button and Using Your Own Button” (toward the end of this document)
Special Mail Merge Tokens
The following special tokens will be replaced as the page is rendered. You can include these tokens in the body of your HTML, as well as within default values.
Date Tokens (used to give landing page feeling of recency. ie: “New Leads for May 2014”)
%%monthname%% Name of the current month
%%month%% Number of current month
%%year%% Current year
%%day%% Current day
%%weekof%% Date for Sunday of week
Mail Merge Tokens (data pulled from landing page owner’s Mail Merge Profile)
Token Description Examples
%%mm.fullname%% Full Name
%%mm.company%% Company
%%mm.address%% Mailing Address
%%mm.citystatezip%% City, State, Zip
%%mm.phone%% Phone
%%mm.email%% Email
%%mm.website%% Website
Special Use – Rarely Used
%%mm.accountid%% Account ID
%%mm.newsletter%% Name of newsletter
%%mm.freetext%% Phone 707-555-1234
Advice on Style Sheets
You’ll want to make sure you test your Landing Page with a variety of sample fields, including text boxes, comments fields, dropdown menus, checkboxes, and the special “Birthday Fields”. You’ll want to make sure that you set the style and widths of these elements appropriately.
Some of the built-in form elements can be seen below:
.formTable { margin-left:15px; }
.fieldLabel { color: #FFFFFF; font-size: 12px; }
.field {width:220px; padding:5px; font-size:14px; }
.fieldComments {width:220px; padding:5px; font-size:14px; }
.fieldSelect {width:220px; padding:5px; font-size:14px; }
#birthday_month {width:80px}
#birthday_day {width:70px}
#birthday_year {width:70px}
(Notice the width of the 3 birthday fields add up to the width of the other fields)
You can also style the .submitButton element. You can use resources like the following to build beautiful looking CSS buttons:
and many more can be found by searching Google for “css button generator”
Making fields “Clickable” to edit in Full Screen Editor
Some field types have an optional parameter which allows the field to be “right click editable” in the full screen editor. By default, clickable is set to “0” or off. Otherwise, the special html and javascript added to this fields might interfere with your HTML code. Only set clickable to “1” when it does not interfere. If you enable this, please test it for each field to make sure your template is compatible.
For example, if you have a customizable <title> tag, there would be no way a user could click this area to edit it. Other examples include non-visible elements, such as portions of CSS code, javascript, etc…
We recommend leaving background images as non-clickable.
Adding CSS Classes to Form Fields and Form Button
This is useful when using an existing style sheet or Bootstrap theme.
Form Button
Add this anywhere in your template. This will add the specified class or classes to the generated form button
<!-- form_button_class: "w-button button" -->
Form Fields
Add this anywhere in your template. This will add the specified class or classes to the generated form fields
<!-- form_field_class: "w-input field wf-affected wf-selected" -->
Hiding The Default Submit Button and Using Your Own Button
If you’d like to use your own form submit button, use the following steps:
1) In the <style> section of the page, hide the default submit button by adding the following code:
.submitButton {display:none;}
2) In your page body, add the following code where you would like your button:
<a href="javascript:if(validateForm() != false){myForm.submit()};" class="your_own_button_class">
<!--type:text; label:"Text for Button"; default:"Submit This Form!"; clickable:1;-->
</a>
The basic idea is that this HTML element run the validation script and submit the form when clicked. As you can see from the above example, you can add editable (even click-to-edit) regions to this code.
