Using APSIS Forms
Building Form Fields
To get you started quicker, you will have a preset amount of form fields including Email, Firstname, Lastname, Submit button and many more. If you need more, you can create an unlimited amount of form fields, and the settings of each form module are built as follows:
Name: The name of the Form Module (in APSIS Forms)
Field type: What kind of field the form module should be (e-mail, text, radio button etc)
Demographic data field: In order to connect the module to the correct demographic data field, choose the correct in the drop down, or create a new one.
Language = All form modules will be in English per default. To make it easier for those who have websites in different languages, you can update an existing form field with a new language instead of creating a new one. You simply press on “Add new language” and select the language of your choice.
Title = the name of the form module externally (how it will look to a visitor). Depending on the language you have chosen, change the title to the correct text. Please note! The title will be empty when you add a new language, so you remember to fill this in before pressing Save.
NOTE! If you have selected the fields Dropdown, Checkbox or Radio button you will note that you will be presented with two columns (English text & Translated text) English text is what the Formbuilder stores in the database and Translated Text is what the visitor will see on that question, e.g. that you need to fill both these in regardless of what language you chose in the Language-option.
Placeholder = if you want to have a pre-set value in the form field (used for descriptions etc), use the placeholder and type in the text of your choice.
Advanced = With the advanced options of form fields, you can control the markup generated in your form. Usually, you will not need to use this, but if you want to dig a little deeper, there's a separate guide here.
Once you have made all the Form Fields of your choice, it’s time to create the form itself!
First, go to Activities in the left sidebar-menu.
Start by clicking on Create New Form in the top right corner. You will now be presented with a couple of forms presets to make it easier for you to create the form of your choice. Select the preset you want to use, or click on create a blank form if you want to create it from scratch. NOTE that all forms regardless of preset or blank will always include an Email field and a Submit button.
After this, name your form and choose the Language (the outcome of the form fields is controlled by the language-settings you made in the Form Fields-section, so if you choose Swedish; you will see the Swedish Form Fields). When you are done, press Create Form.
Once you have done this, you will be transfered into the form-builder itself where you will see the form fields that you have created on the right hand side. To apply them, simply drag and drop them onto the left hand surface and put them in the order that you want. If you want to change the text or make a field required, simply press one of the form fields in the right hand surface and apply the settings (such as what questions that should be mandatory), then press Save.
Once you are happy with your design, you can move on to the Settings-tab.
In the Settings-tab, you can do the following:
Form name = the name of the form
Group = if you are about to create a lot of forms, putting them into groups makes it easier for you to find them later on.
Template name = the name of the template which the form will use (read more about this in the Designing the Form-chapter)
Max fields to display = since the APSIS Lead forms are “intelligent”, you can choose to display X amount of form fields/questions at the same time. That means, that the first time a person fills out the form, X questions will be asked. The 2nd time that same person comes back and fills out another form; the form will recognise the person and since we already know the answer to the first X questions, the form will display other questions instead.
Hide known fields = if you have ticked above, you can choose to hide the questions that you already know the answer to.
Replace form-tag with div-tag = mandatory if you are using SiteCore, EpiServer or other CMS installations where the CMS is built up by form-tags. Ticking this box will make the form appear correct once published.
Selected language = the language of the form that you chose when you created it
Additional translations = if you want the same form in multiple languages (instead of creating a new one), you can add a new language in this setting. Once you have done this, the form will be prepared for the new language. Note that if you do this you need to add an extra line of code into the implementation, read more under the Publish chapter.
Form submit settings
Action after submit = choose what will happen after a person submits a form (mandatory to have this for the form to work)
Message = the form is removed and a message of your choice will appear on the screen
Redirect = redirects the person to a thank-you page/landing page etc.
Track - View/Submit Form = if you want to track the statistics of the form views/submission in Google Analytics and/or Google Tag Manager, check the preferred box and apply the needed settings.
Now you are done with the settings, it’s time to publish the form!
Press Save and then go to the Publish tab.
Designing the form can be done in three ways:
Adapt the websites CSS onto the form.
When you have implemented the form on your website, the form will automatically adapt the CSS-styling, so that the form will look like the rest of your website. This works in most CMS, depending on how you have setup the CSS. If you are using a CMS that is built up with form-tags (e.g. EpiServer or SiteCore), you would need to tick the "Replace form-tag with div-tag" checkbox in the Form settings.
Create a Template of your own using the internal Template Builder
To create a Form Template, press Templates in the top menu and then Create New.
Under Template Settings, start by naming the template. Once this is done, you can design the form. All the settings are on the left hand side (size, fonts, colours etc), and the output/result is displayed on the right hand side so that you can see exactly how the form will look.
Once you have chosen and applied a design, press Save Template.
Create a Template of your own using CSS
If you want to apply your own CSS instead of using our Template builder, click Custom Templates in the top menu, then choose Template style = Form and apply your code there. Then press Save.
Once you have created a template of your own, go back to the form that you created, press Settings then change the template under “Template Name”, and press Save.
After clicking on the Publish-tab, you will be presented with three options on how to collect and publish the form:
Collect = choose what product that should collect the data (APSIS Lead or APSIS Pro)
Type = what kind of publish that you want to use:
Inline = presents you with a code that needs to be published onto your website in order to present the form.
Standalone = presents you with an URL that acts like a landing-page for your form.
APSIS Pro = data will be pushed to APSIS Pro (on the list that you have chosen). You can here also double-check the data mapping so that you can make sure that the data from the form is correctly connected to the DD-fields you have in PRO.
APSIS Lead = data will be pushed to APSIS Lead and be visible in the Visitors list and in Contacts.
Double Opt-In = if you want your form to use double opt-in (person who fills out the form will get an email that they need to confirm before getting added into list APSIS Pro), check this option. Design etc. of that email will be created and designed in APSIS Pro.
#1 Add this code to your website’s head section or just before the closing body tag.
NOTE! If you have added additional languages into your form, you need to add an additional line of code after the formId
- English = en
- Swedish = se
- Danish = da
- Norwegian = nb
- Finnish = fi
- Chinese (Simplified) = zh-CH
- Chinese (Traditional) = zh
- French = fr
- German = de
#2 Add this code to your website where you want the form rendered.
#3 You can update this placeholder to match any element on your website so the form will be rendered inside that element instead.
For further information, please contact APSIS Support.
Choose the preferred site from the drop-down-list
The form-URL is presented
When you have decided what option to choose and are happy with the settings, press Publish. The form is now activated and will be presented onto your website, ready to collect data from your visitors. Neat!