The webform wizard is a highly customizable feature that allows for flexibility in both content and aesthetics.
Table of Contents
Step 1.
Click the edit button on an existing webform.
Note: If a web form has not yet been created, please review the Webform Wizard Document that walks through the basic setup of a webform.
See Related Article: Webform Wizard
Step 2.
The first area to customize is the Select Data Fields section. Apart from simply checking the necessary fields, you can utilize the custom data fields in the Database Setup Settings. Any custom fields will need to be selected and created in advance in the Database Setup section before creating a web form.
Step 3.
Once data fields have been selected, they are automatically included on the form as text fields. This can be modified by clicking on the pencil icon in the "Actions" column.
The element type can be changed from a text field to other available form fields below:
- Text: This field is shown by an empty box where customers are given the opportunity to add in whatever information is being requested.
- Radio: This field shows as a radio dial next to a set of options that you can create.
The customer is given the option of only choosing one of the options listed.
- Checkbox: This field shows checkboxes next to a list of options. Customers may choose more than one option with this type.
- Select (Dropdown): Creates a dropdown of options for the customer to choose from, however the customer is only given the ability to select one of the options.
- Label: This removes the option for a customer to put in any information and simply becomes a label on your webform.
- Text Area: Allows for a larger empty space and up to 160 characters for the customer to write in any necessary information. You can adjust the size of this box by clicking on the tool icon which will allow you to make the area of the box either larger or smaller depending on your preference.
Step 4.
Now that you have an idea of how to change the type of field being used, you can now set up the options for the corresponding fields.
For Radio, Check box, and Select element types, the process is the same in creating the data field options. Once you have saved the field type you want, you will see a new button appear that says Edit Element Options. Click on this to begin setting up the data options.
Step 5.
When you click on Edit Element Options, a new popup will appear
Here you will fill out the three fields provided:
- Display Text: This is the text the customer will see.
- Item Value: This is what will be saved in the contact record, along with the contact information.
- Position: This is the order in which the information appears on the form.
Step 6.
When all three pieces are added, click the Add Item button to save that item. Repeat this process for however many options you want to create for your data field.
Step 7.
If at any point you need to edit the options created, you can do so by clicking on the tool icon next to the edit button.
From here you can edit, delete, or reposition the different options.
Step 8.
Now that the Data Fields have been customized, look at the Design Your Form section for changing the form design aesthetics. REMEMBER: Whenever you make a change to your webform make sure to click the Save Changes button WITHIN EACH section that you make a change to or else your changes WILL NOT BE SAVED.
The sections are broken down as follows:
- Form: This allows you to change the name of the form and provide a description. Both are used for internal purposes only but can be used to provide details on where or how this webform is being used.
- Header: This is the topmost text and image (optional) that will appear on the form. By default this will say "Join our Mobile Club". The header text can be modified to better match the purpose of the form. Underneath the text field are a variety of different options to change the font, size, alignment, and so forth.
- Form Labels: This changes the style, color, and font alignment of the label that appears above the data fields where contacts provide their answers on the webform.
- Form Fields: This is the field where contacts provide their information. Change the look of the text box that appears by default as well the font, color, size of the text that will appear in that field.
- Footer: This is the text that appears at the bottom of the webform. There is a disclaimer in this section that CAN NOT be removed or altered but the URL for Terms & Conditions can be modified.
- Submit Button: This button is what contacts will press to submit the form. A submit button IMAGE can be uploaded, or a button can be customized in the form wizard.
*IMPORTANT - Make sure to insert the REDIRECT URL. This is where the customer will be sent once they have completed the webform. We recommend creating a thank you page or directing the customer to your website, or social media link.
- Background: The form background can be a color or an image graphic. The webform does not resize uploaded images so make sure the background image uploaded is in the desired size.
Step 9.
Now that your aesthetics are all set, you can move to the last section of the webform, Select Mobile Campaign(s).
Step 10.
IF adding multiple campaign options to the webform, include instructions as well. If not leave this as is. Make sure the "Approximate Messages Per Month" is consistent with the actual number of alerts the contact will receive after opting into the mobile campaign.
Multiple keyword campaigns can be enabled on one webform. If you choose to do this the webform will present all the keywords' mobile campaign names on the webform and have checkboxes next to each one. Checkboxes allow the contact to opt-in to more than one mobile campaign.
Step 11.
Once you have fully customized your webform you can now use it wherever you choose by copying the embed code provided above the form preview.