Learn how to customize or design your web forms, including the Standard web form, the Confirmation form, and the Opt-out form. By customizing your web forms, are able to:

• Organize your fields by using drag to reorder the fields in the form.
• Edit the styles within the form, including background colors and paragraph, section headers, field labels, and error messages text.
• Add your own image to the Submit button.
• Validate your data.

The required fields from your database auto-populate in the Form editor, while the non-required fields are in the Form Object section. The default value fields are hidden at the base of the editor. The Selection (choose one) field type is available for use in Classic Web Forms. The Selection (Multiple) field type is not available for use in Classic Web Forms. In order to use the Selection (Multiple) field type in a web form, a Standard Web Form would have to be created.

Currently, the ability to map a multi-select field is not available after a custom form is imported into Acoustic Campaign landing pages.

Customize your web form

1. Click the yellow placeholder to open the Form design editor.
2. Design your form in the Form editor section.
3. Click Save and close.
4. Verify that the form is correct.
5. Click Save to commit the changes to the site/email.

Custom phone field validation of web forms

Some Acoustic Campaign users can require specialized phone field formats that conform to international standards in their web forms. Examples: United Kingdom: 20 7288 6343 Australian Format: 047 555 6666 By default, Acoustic Campaign phone field validation uses North American formatting, for example, (123) 555-6677 or 123-555-6677. However, by using the Custom Regular Expression option in the Phone Field Object Property, a user can enforce customized formatting without extensive programming knowledge.

In programming, a regular expression is a sequence of text that helps programs enforce or process different combinations of text patterns. In this case, it is used to enforce phone number format validation. For example, if you selected North American phone format 123-555-6677, it looks like: \d{3}-\d{3}-\d{4}. What it means: \d = Matches any digit character (0-9). {3} + specifies the number of digits in each section. The dash (-) is placed between each {#}. Alternately, a space can exist here as well: \d{3} \d{3} \d{4} which validates as 123 555 6677.

1. To create a Custom Regular Expression to validate a phone field, take the following steps.
2. If you are not yet familiar with Acoustic Campaign web form phone field validation options, see the Custom Phone Field Validation of Web Forms article.
3. In the Phone field Object Property validation section, select Custom Regular Expression.
4. Check Make field required on form.
5. Enter your Custom Regular Expression.
6. UK and European (## #### ####) formats enter - \d{2} \d{4} \d{4}
7. Australian (### ### ####) formats enter - \d{3} \d{3} \d{4}
8. Save and Publish site.

When the form goes live, an 'Invalid Entry' error message appears when the wrong format is entered. You can create an appropriate error message by creating a Custom Label & Message template. The value for 'web.form.custom.regular.expression' can be edited to match the format. To learn how to create custom error messages for Landing Pages, see Changing the language of the landing page error messages.

Add an image to a button

As a web form creator, you can customize the Submit, Snooze®, and Cancel buttons with an image of your choice. If you change your mind, you can easily remove it. This function is available on Standard, Progressive, Forward-to-a-Friend, and Opt-Out forms.

The procedure walks you through adding an image to the Submit button, but it works for the Snooze and Cancel buttons as well:

Note: A horizontal size limit of 300 pixels for images exists. Acoustic Campaign cuts off the image if it exceeds this limit.

1. Open your web form and click the button object to show.
2. Select your wanted field format.
3. Click Image and then click the Locate Image icon to upload the image that is associated to the button. You can select an image from the Asset Library or upload your own.
4. Click to view the new image button control.
5. If OK, publish your form. You can verify the customized button by copying the domain name and pasting it into your web browser.

Web form objects and object properties

Use Form Objects and Object Properties to add and edit section headers and paragraph text in your web form. You can edit:

• Text and numerical fields. Validations can be performed as well.
• Selection fields.
• Date fields.
• Non-required database fields.

Edit Object Properties

Complete the following steps to edit the object properties for a page object:

1. Drag the object into the editor.
2. In the editor, click the object to display the object properties.
3. Edit the object properties:

Note: In web forms, the Object Properties pane is located to the left of the Form pane. However, in the image, the Object Properties pane is located to the right of the pane.

Object properties and their definitions for text and numerical fields.

Field Format: Choose a one-line text option or a multi-line text option to customize your text and numerical fields.

Field Label: Select the Hide Label field to hide the field label from your web form. If you have 2 address fields, instead of "Address line 1" (i.e. street number and name) and "Address line 2" (i.e. suite #), you can hide the label for line 2 and have the label for line 1 read "Address".

Label Format: Use pre-selected form styles or customize your own labels by font, size, and color.

Field Default Value: Select a default value for the selected field. Although you can select a default field value at the database level, you can change the default value in your web form.

Validation

Validate data in your web form fields, such as the text fields and numerical fields to ensure that the data that is entered by users fits the format that you need. You can also select an option to make the validated field a required field on your form.

Note: You cannot validate the email field because email validation exists in Campaign. Use Custom Regular Expression validation for other patterns such as non-U.S. telephone numbers.

1. Select Make field required on form.
2. Choose 1 of 5 validation options.
3. Click Save & Close.
4. Click Save and then click Publish form to make the changes live.

When a user inputs data that does not fit your required format, they are prompted with an error message to correct the data. They cannot submit the form until the data is in the correct format. For example, on a live web form, a validation error shows if a contact enters a different format: i.e. Phone: Phone number must be in (123) 456-7890 format. A good practice is to edit the field label to ask the contact to use a certain format: Phone: (Use (123) 456-7890 format).

Object properties and their definitions for Selection and Yes/No fields

Field Format: Choose a drop-list or radio group option to customize your Selection- and Yes/No- type fields.

Field Label: Select the Hide Label field to hide the selection field label from your web form.

Label Format: Use pre-selected form styles or customize your own labels by font, size, and color.

Field Default Value: Select a default value for the selected field. Although you can select a default field value at the database level, you can change the default value in your web form.

Drop-list Values on Form: You can view and customize the drop-list values that were determined at the database level. It is also possible to modify the order of the alternative values within the list by clicking the 'View/Customize Values' link and then dragging and dropping the values into a different order.

This section contains a list of object properties and their definitions for Date fields. Date field options include:

Date Order: Choose the date format for this field. Choices are mm/dd/yyyy, dd/mm/yyyy, yyyy/mm/dd).

Field Label: Select the Hide Label field to hide the field label from your web form.

Label Format: Use pre-selected form styles or customize your own labels by font, size, and color.

Field Default Value: Select a default value for the selected field. Although you can select a default field value at the database level, you can change the default value in your web form.

Validation: You can select the option to make the date field a required field on your form.

All non-required database fields from your Campaign database are stored in Form Objects. You can drag a non-required database field to your form and then click it to edit.

Note: You cannot validate the email field because email validation exists in Campaign. Use Custom Regular Expression validation for other patterns such as non-U.S. telephone numbers.

Web form styles

Use the Form Styles section to customize the styles in your forms, including the position of the labels, color, font typeface design, font size, and font style. The following areas can be modified:

• Background
• Paragraph text
• Sections headers
• Field labels
• Error messages

Changing Colors - To change the color of your form's background, text, headers, field labels, or error messages, type a new hexadecimal number in the Color field or click the color picker and select your wanted color. The color that you select is displayed in the square next to the color picker.

Fonts

• Font Typeface- For each text type, you can select 1 of three fonts, Arial, Times, Courier. Click the drop-down arrow to choose a different font. The default font is Arial.
• Font Size- The default value for font size in web forms is 12 pixels. For each text type, you can select 1 of five font sizes, 10px, 11px, 12px, 14px, or 16px. Click the drop-down arrow to choose a different font size.
• Font Style- To change the font type from normal text, select bold, italic, or underlined.

Label Positioning - Position your form labels above the form fields or to the left of the form fields.

Change the form's field widths: Web form creators can customize the width of the form or the width of each form field to meet their branding or styling needs. Go to Object Properties to overwrite the Default Field Width values (found in Form Style). You can customize each form object's width (Label and Control), which overwrites the form's Default Field Width.