Creating Form Templates

Form templates are ready-made templates that will pre-define the appearance of the forms you create with SalesAutopilot. The software includes several tasteful, ready-made templates, but you can design / have someone else design your own templates that will match your corporate identity and fit perfectly into your website. Thus, when you create a new form with SalesAutopilot, it will fit seamlessly into your website right away.

We recommend that you only start creating your own templates if you have a working knowledge of HTML and CSS. Otherwise, it's better to hire a professional to do it for you.

Using templates

You can select the template you will use for your form on the second page of the Create Form Wizard.

The form template will define the color scheme and the arrangement of its elements. If you want to see what the form would like with a certain template, click the "Show form preview" button at the bottom of the page. The form preview will open in a new tab.

Creating templates

Go to Settings / Templates / Form templates in the tree menu to access the built-in templates and your own templates (if you have previously created any).

The Modern and Legacy form templates are based on the same technology, while the Multi-block templates are somewhat more complex, so we will discuss them separately.

You can create your own template by modifying one of the built-in templates, but you can also build your template from scratch. We recommend that, when you are first starting to create your own templates, you start from one of the existing SalesAutopilot templates, because they contain certain special codes that are necessary for the proper operation of the form and for facilitating communication between the form and SalesAutopilot.

Creating Modern and Legacy form templates

The first step on the Form Templates page is to choose the form you will use and then click on the "Copy" button below the template. This will take you to the Edit form template page where you will see the source code of the form.

Pick a name for your template that will help you to easily recognize it in the future, and then familiarize yourself with its source code.

A form template consists of three parts: HTML source, CSS definitions, and the HTML content of the form's Thank You page.

The HTML source code contains special elements inside brackets. When the form is created, SalesAutopilot will replace these with different elements that are necessary for the form to work. The form template you create also has to contain these elements, which will contain the following elements of the form:

• css-file: a link to the form's CSS file. Here the software will insert the CSS definitions entered in the Form template CSS textarea of the Edit form template page.
• form-javascript: the Javascript code that is necessary for the proper working and error checking of the form.
• form-title: the title of the form that you entered in the form wizard. You can leave this blank if your form doesn't need a title.
• form-desc: a short introduction to the form that you entered in the form wizard. You can leave this blank if your form doesn't need a description.
• form-content: the fields of the form. You can only modify their appearance with CSS.
• submit-text: the label of the submit form button that you entered in the form wizard. You can leave this blank if you don't want the form to have a submit form button label.

IMPORTANT comments:

• if you are using Javascript in the form template, place it between the {literal} {/literal} tags
• the built-in form templates do not contain the HTML source code of the entire webpage, only the source code of the form. If you select an embedding method where the source code of the entire web page around the form's source code will be necessary, then the system will automatically generate that for you.

To modify the CSS of the form template, we recommend that you create a form using the original template, and then try out your own CSS definitions.

The basics of multi-block form templates

The multi-block form template feature is basically like a mini landing page editor application, which enables you to design entire squeeze pages, wizard pages, etc. Using multi-block form templates has the following major benefits:

• The form itself can be created with the same simple-to-use wizard, regardless of which type of template you use (Legacy, Modern, or Multi-block)
• The content of the page that is not the form itself can be edited with a WYSIWYG editor, which means that anyone can edit these pages, even those who know nothing about HTML
• Mutli-block form templates provide you with almost entirely customizable page and form arrangement

The first steps of creating multi-block form templates is identical to the steps of creating Modern and Legacy form templates.

The special elements that appear in the form template in brackets ([css-file], [form-javascript], etc.) are also the same.

In order to grasp the real difference between these template types, let's look at a form that was created using one of the built-in multi-block form templates…

…then let's look at the steps it took to create the form.

The first two steps are the same as in the "traditional" form wizard.

The real difference is on the third page of the wizard, where the elements around the form itself can be customized with the WYSIWYG editor that appears when you click on the element you want to edit.

Here is the third page of the wizard:

…and this is what it looks like when you edit it with a hidden tree menu.

Creating multi-block form templates

The heart and soul of multi-block templates, i.e. that they can be edited on the third page of the form wizard with a WYSIWYG editor, can be accomplished by placing the appropriate tags in the source code of the form.

The editable blocks have to be nested in div tags like this one:

<div mm_editable="mmsection3" mm_copy mm_delete>

The div tag can have the following attributes:

• mmsection3: the unique ID of the editable block, which has to be unique for the given template. This attribute is required.
• mm_copy: if the div has this attribute, then the block will be copyable. Optional.
• mm_delete: if the div has this attribute, then the block will be deletable. Optional.

It is important to note that currently the blocks cannot be nested.

Making the blocks arrangeable

The blocks next to each other can be arranged by dragging and dropping them. For this, the div that defines the div containing the block (the parent div of the block) has to contain an mmsortable-x class parameter, where the value of x has to be unique for every block you want to arrange. In other words, if the form has a section on the right where there are several blocks or at least one copiable block, and it has a footer with several blocks or at least one copiable block, then in both cases the enclosing div tag has to contain an mmsortable-x, such as, mmsortable-1 for the first one and mmsortable-2 for the second one.

In order to fully understand the rules above, we recommend that you create a copy of one of the built-in multi-block templates and then study its source code.

Creating the HTML source code of the Thank You Page

There is only one "restriction" that applies to creating the source code: you have to create a valid HTML code. Otherwise, when you edit the Thank You Page with the WYSIWYG editor, it will mess up the content of the Thank You Page.

Uploading or generating the thumbnail

To have the thumbnail generated by the system, click on the Generate thumbnail button, then wait for the thumbnail to be generated (approximately 10 seconds).

Once the thumbnail has been created, it will appear automatically. If you only want to display a portion of the template on the thumbnail, click on the Crop thumbnail button.

On the bigger image, select the area you would like to see on the thumbnail, then click on the Crop button in the top right corner. The thumbnail will be replaced with the cropped area.

If you would like to upload your own thumbnail image, click on the Browse… button. SalesAutopilot will automatically resize the image to 180x130px.