Design Panel

About the Design Panel

The Design Panel is in the area on the right in the Forms Editor that contains your Elements and Assets. It will allow you to build your activity without hassle - drag and drop Elements or Assets into the canvas and be ready in no time!

To alternate between the Elements view and the Assets view, click on Assets or Elements in the  Design Panel.

In this article you'll find all sorts of information about the Design Panel, from the most basic to the most specific, so head over to the left navigation to jump to a specific topic.

canvas2.jpg

 


 

Design Elements

What is a Design Element?

To Customise your Forms & Pages activity, you'll need to use the Design Elements. Add text, striking images that reflect your brand, and gather all the essential information about your website's visitors and customers.

The Design Elements in the Forms & Pages tool are identical to those in the Email tool's Email Editor - if you're already familiar with designing your own emails, then you'll be able to create a beautiful Forms & Pages activity in just ten minutes!

Head over to our article about the Email Editor's Design Panel article to learn more about the Design Elements.

designPanel1.jpg

  


 

Collect Elements

What is a Collect Element?

Collect Elements are exclusive to the Forms & Pages tool, and available in the Forms Editor. They allow you to build beautiful, effective forms for your website so that you can store your visitors' and customers' data in APSIS One Profiles with their consent.

While Design Elements customise and shape the look and feel of your Forms & Pages Activity, Collect Elements are essential to collect information.

Read below to learn more about each Collect Element, or jump ahead in the navigation panel on the left.

collect1.jpg

 


 

Input Field Element

Use the Input Field Element to collect data from your website's visitors and enrich their APSIS One Profiles. This is where they will enter their details, like their name or email address, in order to complete your form.

Are you gathering Email or SMS consent?

If you intend to collect consent for email or SMS communications, not only will you need an Input Field Element, but also a Terms & Conditions Element as well as a Submit Button.

Without a Submit Button Element, your form would be incomplete as visitors wouldn't be able to finish the form. The Terms & Conditions Element is essential to requesting, and therefore receiving, consent for all sorts of communications and handling of personal data. Without the latter, email addresses and mobile numbers will be stored in APSIS One Profiles without Channel Consent.

landing1.jpg

 

Here's some useful information to get you started with the Input Field Element.

Click an item below to expand.

Adding an Input Field Element

How to Add an Input Field Element into the Canvas

1. Head over to the Design Panel on the right. 

Click and hold the Input Field Element as shown below.

input6.jpg

 

2. Drag the Element where you wish to place in, and drop it. 

 input7.jpg

 

3. Enter the placeholder text for your input field. This will guide your visitors and let them know what type of information they are to enter in your form.

To learn more about text formatting, click on Formatting the Input Field Element below.

input1.jpg

 

Input Field Element Options

How to Open and Review the Input Field Element Options

Click on the Input Field, either on the Canvas or on the Structure Panel. This will open the Input Field Options on the Design Panel

input8.jpg

 

Input Field Name 

input4.jpg

 

This is the internal name for your Input Field Element, and will only be displayed in the Structure Panel on the left hand side. 

input9.jpg

 

Validation

To select the value of the Input Field Element, expand the drop-down in the Validation text box and select a type of data.

This will allow your form to verify that the visitor fills in your input field with the right type of data, like using only numbers for a phone number field.

input10.jpg

 

Map to Attribute

To map the Input Field Element to an Attribute, check the Attribute check-box, then expand the drop-down in the Attribute text box and select which Attribute you wish to map.

The value that the visitor enters in your input field will be fed into their APSIS One Profile as a value for their Attribute.

input11.jpg

 

Style

To manually adjust the style of your Input Field Element, expand the Style drop-down.

Set the Border's thickness and Radius by manually entering the measurement in pixels, or click on the icons, hold, and drag them to the left to reduce and right to increase the size. 

input12.jpg

 

The default width of the Input Field Element is Full. With this setting, your input field's width will match the width of your Column or Row.

If you wish to adjust the size manually, click the drop-down menu, select Fixed, and adjust the width by either entering the measurement in pixels, or clicking on the icon, hold, and then dragging to the left to reduce and right to increase the size. 

input13.jpg

 

Choose a colour for the input field and its border next to Border and Fill. 

To make it transparent, click the X icon next to the colour code. The colour preview will be a white circle crossed with a red line.

Use the colour picker to choose a colour.

If you already have a standard colour, enter the colour code in the Hex box. Go ahead and enter the colour in RGB format if that's the method you prefer. The colour picker will save 16 of your recently used colours for each activity. Every new activity will have no recently used colours, but the colours will remain for each activity whenever you go back into editing.

colourPicker.jpg

 

Alignment

To adjust the alignment of your Input Field Element, expand the Alignment drop-down menu, and select the icon which represents either a left, centre, or right-side alignment.

input16.jpg

 

Margins

Set the margins of the Element, known as padding, by writing a measurement in pixels under Top, Right, Left and Bottom margins. You may also click on the margin iconshold, and drag to the left to reduce and right to increase their size. To reset the margins measurements to 0, select Clear all. 

input17.jpg

 

Confirm Field and Required Field

Toggle Confirm field on if you would like to create an additional input field where the visitor must enter their information once again to make sure it's correct.

This is especially handy for confirming email addresses and keeping your Consent lists and Topics in top shape.

An identical input field will be created underneath the original.

Toggle Required field on if this field should be mandatory. If toggled on, visitors will not be able to submit your form without filling out this field.

input18.jpg

 

Formatting an Input Field Element

How to Format the Text in the Input Field Element

1. Once you've added the Element, click inside the Input Field Element and enter the text in the box. Click on the text to open the inline text editor if it doesn't open automatically.

input1.jpg

 

2. Use the inline text editor to change the style of the text. 

input19.jpg

 

FontSize FormatColour

How to Change the Font of the Text in the Input Field Element

To change the font of the text, click on the font button in the inline text editor and choose a font from the list.

input20.jpg

 

We currently support the following web fonts: Arial, Comic Sans, Courier New, Helvetica, Lucida, Tahoma, Times New Roman, Trebuchet MS, and Verdana.

 We also support Google fonts!

Scroll down in the font drop-down and choose a Google font from the list: Aro, Lato, Lora, Merriweather, Merriweather Sans, Noticia Text, Open Sans, Playfair Display, Roboto and Source Sans Pro.

Deleting an Input Field Element

How to Delete an Input Field Element

1. Click on the Element you wish to remove.

input25.jpg

 

2. Click on the red X in the top right corner of the Element.

input26.jpg

 

Cloning an Input Field Element

How to Clone an Input Field Element

1. Click on the Element you would like to clone. 

input25.jpg

 

2. On the right, the Input Field Options will open in the Design Panel.

Click Clone at the bottom of the panel.

Your Input Field Element will be cloned directly under the original, in the same row. 

input28.jpg

 

 


 

Checkbox Element

Use the Checkbox Element to include a variety of options in your Forms & Pages activity, and make the process of completing your form quick and easy.

Here's some useful information to get you started with the Checkbox Element.

Click an item below to expand. 

Adding a Checkbox Element

How to Add a Checkbox Element into the Canvas

1. Head over to the Design Panel on the right.

Click and hold the Checkbox Element as shown below.

check1.jpg

 

2. Drag the Element where you wish to place it and drop it.

check2.jpg

 

3. Now you can edit your Checkbox Element! Fill in the text for each option by editing Untitled option.

To learn more about text formatting, click on Formatting the Checkbox below.

check3.jpg

 

Checkbox Element Options

How to Open and Review the Checkbox Element Options

Click on the Checkbox Element, either on the Canvas or the Structure Panel. This will open the Checkbox Options on the Design Panel.

checkNew1.jpg

 

Checkbox Name

check5.jpg

 

This is the internal name for your Checkbox Element, and will only be displayed in the Structure Panel on the left hand side. 

check6.png

 

Mapping

Under Mapping, you can map the options of your Checkbox Element to either an Attribute in your APSIS One account, or as a Form response which will be saved as Event data.

For example, if you'd like to get to know which sports your customers are interested in, you could map the Checkbox Element to a Sports Attribute, and get an overview of whether they like to play tennis, baseball, basketball... To read more about Attributes, head over to this article.

dropNew1.jpg

 

Select Attribute from the Data Type drop-down menu to map the Checkbox Element to an Attribute. If you would like to collect the visitors' answers to these options as Event data, select Form response only.

check8.jpg

 

Under Option 1 and Option 2, enter the Attribute value for each option. When a visitor ticks the checkbox that corresponds with each option, the value you enter here will be added to their APSIS One Profile as a value for the Attribute.

If you choose Form response only, then the response will be saved as Event data.

If the visitor chooses more than one option, multiple values will be added as either an Attribute or Event data, separated by commas ( , ). For example: Sports equals "Tennis", "Baseball", "Basketball".

dropNew1.jpg

 

Style

To manually adjust the style of your Checkbox Element, expand the Style drop-down.

Set the space between the Checkboxes by manually entering the space in pixels, or click on the icon, hold, and then drag it left and right to increase and reduce the size between the Checkboxes.

check10.jpg

 

Choose a colour for the checkboxes and their border next to Border and Fill. 

Use the colour picker to choose a colour.

If you already have a standard colour, enter the colour code in the Hex box. Go ahead and enter the colour in RGB format if that's the method you prefer. The colour picker will save 16 of your recently used colours for each activity. Every new activity will have no recently used colours, but the colours will remain for each activity whenever you go back into editing.

colourPicker.jpg

 

Alignment

To adjust the alignment of your Checkbox Element, expand the Alignment drop-down menu, and select the icon which represents either a left, centre, or right-side alignment.

input16.jpg

 

Margins

To adjust the margins of your Checkbox Element, expand the margins drop-down menu, and set the Top, Right, Left, and Bottom margins by manually entering the measurement in pixels. You can also click on the icons, hold, and drag them to the left and right to reduce and increase the size of the margins. To reset the margins measurement to 0, select Clear all. 

input17.jpg

 

Required Field

Toggle Required field on if this field should be mandatory. If toggled on, visitors will not be able to submit your form without choosing at least one option.

check12.jpg

 

Formatting a Checkbox Element

How to Format the Text in the Checkbox Element

1. Once you've added the Element, click inside the Checkbox Element and enter the text in the box. Click on the text to open the inline text editor if it doesn't open automatically.

check13.jpg

 

2. Use the inline text editor to change the style of the text.

check14.jpg

 

FontSize FormatColour

How to Change the Font of the Text in the Checkbox Element

To change the font of the text, click on the font button in the inline text editor and choose a font from the list.

check15.jpg

 

We currently support the following web fonts: Arial, Comic Sans, Courier New, Helvetica, Lucida, Tahoma, Times New Roman, Trebuchet MS, and Verdana. 

 We also support Google fonts!

Scroll down in the font drop-down and choose a Google font from the list: Aro, Lato, Lora, Merriweather, Merriweather Sans, Noticia Text, Open Sans, Playfair Display, Roboto and Source Sans Pro.

Deleting a Checkbox Element

How to Delete a Checkbox Element

1. Click on the Element you wish to remove.

check13.jpg

 

2. Click on the red X in the top right corner of the Element.

input26.jpg

 

Cloning a Checkbox Element

How to Clone a Checkbox Element

1. Click on the Element you would like to clone.

check13.jpg

 

2. On the right, the Checkbox Options will open in the Design Panel.

check4.jpg

 

3. Click Clone at the bottom of the panel.

Your Checkbox Element will be cloned directly under the original, in the same row.

input28.jpg

 

 


 

Radio Element 

Use the Radio Element to create a set of related options that will allow your website's visitors to choose just one option. As only one value can be selected, this will automatically deselect all the others.

radio8.jpg

 

Here's some useful information to get you started with the Radio Element.

Click an item below to expand.

Adding a Radio Element

How to Add a Radio Element into the Canvas

1. Head over the Design Panel on the right. 

Click and hold the Radio Element as shown below.

radio1.jpg

 

2. Drag the Element where you wish to place it, and drop it.

radio2.jpg

 

3. Edit the options directly in the Radio Element. To add more options, click Add option.

radio15.jpg

 

To learn more about text formatting, click on Formatting the Radio below.

radio3.jpg

 

Radio Element Options

How to Open and Review the Radio Element Options

Click on the Radio Element, either on the Canvas or the Structure Panel. This will open the Radio Options on the Design Panel.

radioNew1.jpg

 

Radio Name

radio5.jpg

 

This is the internal name for your Radio Element, and will only be displayed in the Structure Panel on the left hand side.

radio6.jpg

 

Mapping

Under Mapping, you can map the options of your Radio Element to either an Attribute in your APSIS One account, or as a Form response which will be saved as Event data.

For example, if you'd like to get to know whether your visitor is completing your form as a private customer or as a business, you can use a Radio Element to get that information from them. To read more about Attributes, head over to this article.

dropNew1.jpg

 

Select Attribute from the Data type drop-down menu to map the Radio Element to an Attribute. If you would like to collect the visitors' answers to these options as Event data, select Form response only. 

If you chose to map to an Attribute, expand the Attribute drop-down menu. Scroll through to choose from a list of Default and Custom Attributes in your APSIS One account.

check8.jpg

 

Under Option 1 and Option 2, enter the Attribute value for each option. When a visitor picks an option, the value you enter here will be added to their APSIS One Profile as a value for the Attribute.

If you choose Form response only, then the response will be saved as Event data.

If a visitor chooses more than one option, multiple values will be added as Attributes or Event data, separated by commas (,). For example, Sports equals "Tennis", "Baseball", "Basketball".

dropNew1.jpg

 

Style

To manually adjust the style of your Radio Element, expand the Style drop-down.

Set the space between the options by manually entering the space in pixels. You can also click on the icon, hold, and then drag it left to increase and right to reduce the size between the options.

check10.jpg

 

Choose a colour for the radio button and its border next to Border and Fill. 

Use the colour picker to choose a colour.

If you already have a standard colour, enter the colour code in the Hex box. Go ahead and enter the colour in RGB format if that's the method you prefer. The colour picker will save 16 of your recently used colours for each activity. Every new activity will have no recently used colours, but the colours will remain for each activity whenever you go back into editing.

colourPicker.jpg

 

Alignment 

To adjust the alignment of your Radio Element, expand the Alignment drop-down menu and select the icon which represents either a left, centre, or right-side alignment.

input16.jpg

 

Margins

To adjust the margins of your Radio Element, expand the Margins drop-down menu, and set the Top, Right, Left, and Bottom margins by manually entering the measurement in pixels. You can also click on the icons, hold, and drag them to the left to reduce and right to increase the size of the margins. To reset the margins measurements to 0, select Clear all. 

input17.jpg

 

Other Option and Required Field

Toggle Other option on if you would like to create an additional input field for a custom choice for visitors.

For example, if a visitor doesn't find any of the options suitable, they can pick this option and fill in their custom answer as text.

An other option with an input field will be created underneath the options you create. You can edit the placeholder text of your other option in the Radio Element, inside the Canvas.

Toggle Required field on if this field should be mandatory. If toggled on, visitors will not be able to submit your form without filling out this field.

radio7.jpg

 

If you want to add more options to your Radio Element, click Add Option  and the new option will appear underneath the existing ones.

radio9.jpg

 

Formatting a Radio Element

How to Format a Radio Element's Text

1. Once you've added the Element, click inside the Radio Element and enter the text into the box. Click on the text to open the inline text editor if it doesn't open automatically.

radio3.jpg

 

2. Use the inline text editor to change the style of the text. 

check14.jpg

 

FontSize FormatColour

How to Change the Font of the Text in the Radio Element

To change the font of the text, click on the font button in the inline text editor and choose a font from the list.

radio11.jpg

 

We currently support the following web fonts: Arial, Comic Sans, Courier New, Helvetica, Lucida, Tahoma, Times New Roman, Trebuchet MS, and Verdana. 

 We also support Google fonts!

Scroll down in the font drop-down and choose a Google font from the list: Aro, Lato, Lora, Merriweather, Merriweather Sans, Noticia Text, Open Sans, Playfair Display, Roboto and Source Sans Pro.

 

Deleting a Radio Element 

How to Delete a Radio Element

1. Click on the Element you wish to remove.

radio10.jpg

 

2. Click on the red in the top right corner of the Element.

input26.jpg

 

Cloning a Radio Element

How to Clone a Radio Element

1. Click on the Element you would like to clone.

radio10.jpg

 

2. On the right, the Radio Options will open in the Design Panel.

radioNew1.jpg

 

3. Click Clone at the bottom of the panel. 

Your Radio Element will be cloned directly under the original, in the same row. 

input28.jpg

 

 


 

Terms & Conditions Element 

The Terms & Conditions Element is essential to gathering consent. If you intend to collect consent for email or SMS communications, not only will you need Terms & Conditions Element, but also an Input Field Element, as well as a Submit Button.

The Terms & Conditions Element is essential to requesting, and therefore receiving, consent for all sorts of communications and handling of personal data. Without the latter, email addresses and mobile numbers will be stored in APSIS One Profiles without Channel Consent.

landing2.png

 

Here's some useful information to get you started with the Terms & Conditions Element. 

Click an item below to expand. 

Adding a Terms & Conditions Element

How to Add a Terms & Conditions Element into the Canvas

1. Head over to the Design Panel on the right.

Click and hold the Terms & Conditions Element as shown below.

terms1.jpg

 

2. Drag the Element where you wish the place it and drop it. 

terms2.jpg

 

3. Now you can edit your Terms & Conditions Element! To learn more about text formatting, click on Formatting the Terms & Conditions Element  below.

terms3.jpg

 

Terms & Conditions Element Options

How to Open and Review the Terms & Conditions Element Options

Click on the Terms & Conditions Element, either on the Canvas or the Structure Panel.  This will open the Terms & Conditions Element Options on the Design Panel.

terms4.jpg

 

Name

terms5.jpg

 

This is the internal name for your Terms & Conditions Element, and will only be displayed in the Structure Panel on the left hand side.

terms6.jpg

 

Mapping

Expand the Consent list and Topics drop-down menu to select where you would like to map the Profile's consent.

terms7.jpg

 

Style

Choose a colour for the Terms & Conditions checkbox and its border next to Border and Fill. 

terms8.jpg

To make it transparent, click the X icon next to the colour code. The colour preview will be a white circle crossed with a red line.

Use the colour picker to choose a colour.

If you already have a standard colour, enter the colour code in the Hex box. Go ahead and enter the colour in RGB format if that's the method you prefer. The colour picker will save 16 of your recently used colours for each activity. Every new activity will have no recently used colours, but the colours will remain for each activity whenever you go back into editing.

colourPicker.jpg

 

Alignment

To adjust the alignment of your Element, expand the Alignment drop-down menu, and select the icon which represents either a left, centre, or right-side alignment. 

input16.jpg

 

Margins

Select the margins of the Element, known as padding, by writing a measurement in pixels under Top, Right, Left and Botton margins. You can also click on the margin icons, hold, and drag to the left to reduce and right to increase their size. To reset the margin measurements to 0, select Clear all. 

input17.jpg

 

Formatting the Terms & Conditions Element

How to Format the Terms & Conditions Element's Text

1. To edit a Terms & Conditions Element's text, click on the Element and edit the text directly.

terms3.jpg

 

2. Use the inline text editor to adjust the style of the text. 

check14.jpg

 

FontSize FormatColour

How to Change the Font of the Text in the Terms & Conditions Element

To change the font of the text, click on the font button in the inline text editor and choose a font from the list.

terms9.jpg

 

We currently support the following web fonts: Arial, Comic Sans, Courier New, Helvetica, Lucida, Tahoma, Times New Roman, Trebuchet MS, and Verdana. 

 We also support Google fonts!

Scroll down in the font drop-down and choose a Google font from the list: Aro, Lato, Lora, Merriweather, Merriweather Sans, Noticia Text, Open Sans, Playfair Display, Roboto and Source Sans Pro.

Deleting a Terms & Conditions Element

How to Delete a Terms & Conditions Element

1. Click on the Element you wish to remove.

terms3.jpg

 

2. Click on the red X in the top right corner of the Element. 

input26.jpg

 

Cloning a Terms & Conditions Element

How to Clone a Terms & Conditions Element

1. Click on the Element you would like to clone.

terms3.jpg

 

2. On the right, the Terms & Conditions Element Options will open in the Design Panel.

terms14.jpg

 

 

3. Click Clone at the bottom of the panel.

Your Terms & Conditions Element will be cloned directly under the original, in the same row. 

input28.jpg

 

 


 

Submit Button Element

The Submit Button is essential to any Form activity! When they click, visitors will submit responses to your Form, which will be added into their APSIS One Profiles.

landing3.jpg

 

Here's some useful information to get you started with the Submit Button Element.

Click an item below to expand. 

Adding a Submit Button Element

How to Add a Submit Button Element into the Canvas

1. Head over to the Design Panel on the right.

Click and hold the Submit Button Element as shown below. 

submit1.jpg

 

2. Drag the Element where you wish to place it and drop it. 

submit2.jpg

 

3. Now you can edit your Submit Button! To learn more about text formatting, click on Formatting the Submit Button below. 

submit3.jpg

 

Submit Button Element Options

How to Open and Review the Submit Button Element Options

Click on the Submit Button, either on the Canvas or on the Structure Panel. This will open the Submit Button Options on the Design Panel. 

submit4.jpg

 

Name

This is the internal name for your Submit Button Element, and will only be displayed in the Structure Panel on the left hand side. 

submit5.jpg

 

Style

Set the Border, Radius and Padding by manually entering the measurement in pixels, or click on the icons, hold, and drag them to the left and right to reduce and increase the size. 

Under Width, choose Fit to match the size of the button to the text, or Full to fill the entire Row or Column.

submit6.jpg 

 

Choose a colour for the Submit Button and its border.

To make it transparent, click the X icon next to the colour code. The colour preview will be a white circle crossed with a red line.

Use the colour picker to choose a colour.

If you already have a standard colour, enter the colour code in the Hex box. Go ahead and enter the colour in RGB format if that's the method you prefer. The colour picker will save 16 of your recently used colours for each activity. Every new activity will have no recently used colours, but the colours will remain for each activity whenever you go back into editing.

colourPicker.jpg

 

 

Alignment

To adjust the alignment of your Element, expand the Alignment drop-down menu, and select the icon which represents either a left, centre, or right-side alignment.

input16.jpg 

 

Margins

Set the margins of the Element, known as padding, by writing a measurement in pixels under Top, Right, Left and Bottom margins. You may also click on the margin icons, hold, and drag to the left to reduce and right to increase their size. To reset the margins measurements to 0, select Clear all. 

input17.jpg

 

Formatting a Submit Button Element

How to Format the Text in the Submit Button Element

1. To edit a Submit Button's text, click on the Element and edit the text directly.

submit3.jpg

  

2. Use the inline text editor to adjust the style of the text.

submit7.jpg 

 

FontSize FormatColour

How to Change the Font of the Text in the Submit Button Element

To change the font of the text, click on the font button in the inline text editor and choose a font from the list.

submit8.jpg

 

We currently support the following web fonts: Arial, Comic Sans, Courier New, Helvetica, Lucida, Tahoma, Times New Roman, Trebuchet MS, and Verdana. 

 We also support Google fonts!

Scroll down in the font drop-down and choose a Google font from the list: Aro, Lato, Lora, Merriweather, Merriweather Sans, Noticia Text, Open Sans, Playfair Display, Roboto and Source Sans Pro.

Deleting a Submit Button Element

How to Delete a Submit Button Element

1. Click on the Element you wish to remove.

submit3.jpg

 

2. Click on the red X in the top right corner of the Element.

input26.jpg

 

Cloning a Submit Button Element

How to Clone a Submit Button Element

1. Click on the Element you would like to clone. 

landing3.jpg

 

2. On the right, the Submit Button Options will open in the Design Panel.

Click Clone at the bottom of the panel.

Your Element will be cloned directly under the original, in the same row. 

input28.jpg

 

 


 

Dropdown Element

Use the Dropdown Element to create attractive drop-down menus that visitors can easily navigate and select their desired answer from. For example, this Element comes in handy when asking a visitor to choose their country in order to map their Country Attribute.

Here's some useful information to get you started with the Dropdown Element.

Click an item below to expand.

Adding a Dropdown Element

How to Add a Dropdown Element into the Canvas.

1. Head over the to Design Panel on the right.

Click and hold the Dropdown Element as shown below. 

drop1.jpg

 

2. Drag the Element where you wish to place it, and drop it.

drop2.jpg

 

3. Enter the headline text and the placeholder text for your Dropdown Element. This will guide your visitors and let them know which category they are choosing from, and which options they can select.

To learn more about text formatting, expand Formatting the Dropdown Element below. 

drop16.jpg 

Dropdown Element Options 

How to Open and Review the Dropdown Element Options

Click on the Dropdown Element, either on the Canvas or the Structure Panel. This will open the Dropdown Element Options on the Design Panel. 

dropNew2.jpg

 

 Dropdown Element Name

drop5.jpg

 

This is the internal name for your Dropdown Element, and will only be displayed in the Structure Panel on the left hand side. 

drop6.jpg

 

Mapping

Under Mapping, you can map the options of your Dropdown Element to either an Attribute in your APSIS One account, or as a Form response which will be saved as Event Data.

For example, if you'd like to get to know which sport your customers are interested in, you could map the Dropdown Element to a Sports Attribute, and get an overview of whether they like to play tennis, baseball, or basketball. To read more about Attributes, head over to this article

dropNew1.jpg

 

Select Attribute from the Data Type drop-down menu to map the Dropdown Element to an Attribute. If you would like to collect the visitors' answers to these options as Event data, select Form response only.

drop8.jpg

 

Click the Add Option button below, if you'd like to add more options to your Dropdown Element.

drop9.jpg

 

Under Option 1 and Option 2, enter the Attribute value for each option. When a visitor selects the option that corresponds with each option, the value you enter here will be added to their APSIS One Profile as a value for the Attribute.

If you choose Form response only, then the response will be saved as Event data.

If the visitor chooses more than one option, multiple values will be added as either an Attribute or Event data, separated by commas ( , ). For example: Sports equals "Tennis", "Baseball", "Basketball".

drop10.jpg

 

Dropdown Style

To manually adjust the style of your Dropdown Element, expand the Style drop-down.

Toggle between Line and Box to choose whether you want your Dropdown Element to be styled as text with a line underneath, or text inside a box. 

drop11.jpg

 

Use the colour picker to choose a colour for the various states of the Dropdown Element.

Inactive is a Dropdown Element Option that is not selected.

Active is a Dropdown Element Option that has been selected by the user.

Border is the colour chosen for the border of the Dropdown Element Options.

Hover is the colour of the Options when in a hover state, or when the user's cursor passes over the Option.

If you already have a standard colour, enter the colour code in the Hex box. Go ahead and enter the colour in RGB format if that's the method you prefer. The colour picker will save 16 of your recently used colours for each activity. Every new activity will have no recently used colours, but the colours will remain for each activity whenever you go back into editing.

colourPicker.jpg

 

You can also adjust the Width of the Dropdown Element by expanding the Width drop-down menu.

Select Fit for the Dropdown Element to automatically fit in the center of the Forms & Pages activity.

drop12.jpg

 

To manually adjust the width, select Fixed from the drop-down menu.

Enter the Width in pixels in the number box, or click, hold and drag the icon to the left to decrease and the right to increase the width in pixels.

drop13.jpg

 

Alignment 

To adjust the alignment of your Dropdown Element, expand the Alignment drop-down menu, and select the icon which represents either a left, centre, or right-side alignment.

input16.jpg

 

Margins

To adjust the margins of your Dropdown Element, expand the Margins drop-down menu, and set the TopRightLeft, and Bottom margins by manually entering the measurement in pixels. You can also click on the icons, hold, and drag them to the left to reduce and right to increase the size of the margins. To reset the margins measurements to 0, select Clear all. 

input17.jpg

 

Multi-Select

For visitors to choose multiple options from your Element, toggle Multi-Select on.

If the visitor chooses more than one option, multiple values will be added to the Attribute, separated by commas ( , ). For example: Sports equals "Tennis", "Baseball", "Basketball".

You can change the colour of the options which are multi selected by entering the colour code in the HEX box, or clicking on the colour picker to select a colour.

drop14.jpg

  

Required Field 

Toggle the Required Field switch if this Element should be mandatory. If toggled on, visitors will not be able to submit your form without filling in this field. 

check12.jpg

 

Formatting a Dropdown Element

How to Format the Text in a Dropdown Element 

1. Once you've added the Element, click inside the Dropdown Element and enter the text in the text box. Do this for both the headline text, and the placeholder text. Click on the text to open the inline text editor if it doesn't open automatically. 

drop16.jpg

 

2. Use the inline text editor to change the style of the text.  

check14.jpg

 

FontSize FormatColour

How to Change the Font of the Text in the Dropdown Element

To change the font of the text, click on the font button in the inline text editor and choose a font from the list. 

drop17.jpg

 

We currently support the following web fonts: Arial, Comic Sans, Courier New, Helvetica, Lucida, Tahoma, Times New Roman, Trebuchet MS, and Verdana.

 We also support Google fonts!

Scroll down in the font drop-down and choose a Google font from the list: Aro, Lato, Lora, Merriweather, Merriweather Sans, Noticia Text, Open Sans, Playfair Display, Roboto and Source Sans Pro.

Deleting a Dropdown Element 

How to Delete a Dropdown Element 

1. Click on the Element you wish to remove.

drop3.jpg

 

2. Click on the red X in the top right corner of the Element.

input26.jpg

 

Cloning a Dropdown Element 

How to Clone a Dropdown Element

1. Click on the Element you wish to clone.

drop3.jpg

 

2. On the right, the Dropdown Element Options will open in the Design Panel. 

drop4.jpg

 

Click Clone at the bottom of the panel. 

Your Dropdown Element will be cloned directly under the original, in the same row.  

input28.jpg

 

 


 

Text Box Element

Coming soon...

Use the Text Box Element to create a space where visitors will be able to enter their own text as an answer to your form. Use it as a space for additional comments, important information, or a way for visitors to send their feedback.

Here's some useful information to get you started with the Text Box Element.

Click an item below to expand. 

Adding a Text box Element

How to Add a Text box Element into the Canvas.

1. Head over the to Design Panel on the right.

Click and hold the Text box Element as shown below. 

2. Drag the Element where you wish to place it, and drop it.

3. Now you can edit your Text box Element! 

To learn more about text formatting, click on Formatting the Text Box Element below. 

Text Box Element Options 

How to Open and Review the Text Box Element Options

Click on the Text Box Element, either on the Canvas or the Structure Panel. This will open the Text Box Element Options on the Design Panel. 

 

Text Box Element Name

This is the internal name for your Text Box Element, and will only be displayed in the Structure Panel on the left hand side. 

 

Styling 

To manually adjust the style of your Text Box Element, expand the Style drop-down.

Set the Border's thickness and Radius by manually entering the measurement in pixels, or click on the icons, hold, and drag them to the left to reduce and right to increase the size. 

The default width of the Text Box Element is Full. With this setting, your input field's width will match the width of your Column or Row.

If you wish to adjust the size manually, click the drop-down menu, select Fixed, and adjust the width by either entering the measurement in pixels, or clicking on the icon, hold, and then dragging to the left to reduce and right to increase the size. 

Choose a colour for the input field and its border next to Border and Fill. 

To make it transparent, click the X icon next to the colour code. The colour preview will be a white circle crossed with a red line.

Use the colour picker to choose a colour.

If you already have a standard colour, enter the colour code in the Hex box. Go ahead and enter the colour in RGB format if that's the method you prefer. The colour picker will save 16 of your recently used colours for each activity. Every new activity will have no recently used colours, but the colours will remain for each activity whenever you go back into editing.

 

Alignment 

To adjust the alignment of your Text Box Element, expand the Alignment drop-down menu, and select the icon which represents either a leftcentre, or right-side alignment.

 

Margins

Set the margins of the Element, known as padding, by writing a measurement in pixels under Top, Right, Left and Bottom margins. You may also click on the margin iconshold, and drag to the left to reduce and right to increase their size. To reset the margins measurements to 0, select Clear all. 

 

Required Field 

Toggle Required field on if this field should be mandatory. If toggled on, visitors will not be able to submit your form without filling out this field. 

Formatting a Text Box Element

How to Format the Text in a Text Box Element 

1. Once you've added the Element, click inside the Text Box Element and enter the text in the text box. Click on the text to open the inline text editor if it doesn't open automatically. 

2. Use the inline text editor to change the style of the text. 

FontSize FormatColour

How to Change the Font of the Text in the Text Box Element

To change the font of the text, click on the font button in the inline text editor and choose a font from the list.

We currently support the following web fonts: Arial, Comic Sans, Courier New, Helvetica, Lucida, Tahoma, Times New Roman, Trebuchet MS, and Verdana.

 We also support Google fonts!

Scroll down in the font drop-down and choose a Google font from the list: Aro, Lato, Lora, Merriweather, Merriweather Sans, Noticia Text, Open Sans, Playfair Display, Roboto and Source Sans Pro.

Deleting a Text Box Element 

How to Delete a Text Box Element 

1. Click on the Element you wish to remove.

2. Click on the red X in the top right corner of the Element.

Cloning a Text Box Element 

How to Clone a Text Box Element

1. Click on the Element you wish to clone.

2. On the right, the Text Box Element Options will open in the Design Panel. 

Click Clone at the bottom of the panel. 

Your Text Box Element will be cloned directly under the original, in the same row.  

 

Was this article helpful?