Use the VTE form builder to capture information about your customers, such as an email address, birthday, or phone number. By completing this information, customers are opting-in to receive marketing messages to your brand.
When the email capture form widget is added, two layers are automatically created (email capture input and submit button). Be sure to go into each individual layer and apply the appropriate configurations for each.
After configuring the email capture input and email capture button, click Add Layers to add additional layers, such as: text input, checkbox, radio button, drop-down, or a hidden input.
1. Navigate to the flag icon on the left-hand navigation.
2. Go to Site.
3. Then Campaigns.
4. Click Create New Campaign.
5. Go to the Message tab.
6. Click Create from Existing or Create in VTE.
7. Add the email capture form widget to the canvas.
EMAIL CAPTURE INPUT
Label Design
Select either to show or hide the label. This is an additional and optional field that can appear above or near the below input field.
Label Text: Enter text here to describe what a user needs to enter into the text box.
Custom CSS Class Name: Add a class name here to automatically add to the CSS layer.
Editing Options: Color, size, font, decoration, text transform, height, and letter spacing.
Field Design
This section is the area where the user enters their information.
Custom CSS Class Name: Add a class name here to automatically add to the CSS layer.
Accessibility Label: A concise but useful description for shoppers with visual impairments or who otherwise use assistive technology.
Required: Determine if entering information here is required.
Placeholder Text/Color: Enter copy here to guide your users into what to enter into the text box.
Editing Options: Color, size, font, decoration, text transform, letter spacing, background color.
Padding: Left and right (pixels).
Border: Select a style, color, thickness, radius, and container color.
Position
You can drag and drop the element on the canvas on the right-hand side, or apply any of the below position options.
Left and Top Position: Enter a percentage of left and top alignment.
Layer Alignment: Select auto, left, center, or right alignment on the layer.
Stick to side: Offset the element to a specific side (pixels).
Animation
Animation Effect: Catch the users attention by selecting an animation for the text. Enter a start delay and a speed for the animation.
EMAIL CAPTURE BUTTON
Design
This is the button that a customer clicks to submit their information to Bluecore.
Custom CSS Class Name: Add a class name here to automatically add to the CSS layer.
Accessibility Label: A concise but useful description for shoppers with visual impairments or who otherwise use assistive technology.
Use Button Editor/Use Image URL: Customize color (font and background), size, font, decoration, text transformation, height, and letter spacing, or use an image for the button.
Position
You can drag and drop the element on the canvas on the right-hand side, or apply any of the below position options.
Left and Top Position: Enter a percentage of left and top alignment.
Layer Alignment: Select auto, left, center, or right alignment on the layer.
Stick to side: Offset the element to a specific side (pixels).
Animation
Animation Effect: Catch the users attention by selecting an animation for the text. Enter a start delay and a speed for the animation.
ADDITIONAL LAYERS
In addition to the two automatically created layers, you can additional layers to capture information about your customers in different ways such as: text, checkbox, radio button, drop-down, or a hidden element.
TEXT INPUT LAYER
This layer has the same configurations available as the email capture layer outlined above. Use this layer to allow customers to manually enter additional information about themselves, such as first and last name.
Label Design
Position: Select for the label text to appear left or right of the checkbox.
Label Text: Enter text here to describe what a user needs to enter into the text box.
Custom CSS Class Name: Add a class name here to automatically add to the CSS layer.
Editing Options: Color, size, font, decoration, text transform, height, and letter spacing.
Field Design
Configure the design and style of the text box.
Custom CSS Class Name: Add a class name here to automatically add to the CSS layer.
Accessibility Label: A concise but useful description for shoppers with visual impairments or who otherwise use assistive technology.
Required: Determine if entering information here is required.
Placeholder Text/Color: Enter copy here to guide your users into what to enter into the text box.
Editing Options: Color, size, font, decoration, text transform, letter spacing, background color.
Padding: Left and right (pixels).
Border: Select a style, color, thickness, radius, and container color.
Position
You can drag and drop the element on the canvas on the right-hand side, or apply any of the below position options.
Left and Top Position: Enter a percentage of left and top alignment.
Layer Alignment: Select auto, left, center, or right alignment on the layer.
Stick to side: Offset the element to a specific side (pixels).
Animation
Animation Effect: Catch the users attention by selecting an animation for the text. Enter a start delay and a speed for the animation.
Validation
Use the validation section to add an extra measure to ensure customers are only entering correct and real information into the campaign. For example, configure rules around the amount of numbers required to be entered for a phone number or zip code.
Required: Determine if entering information here is required. A form cannot be submitted if a required field is not completed.
Field Type: Select a field data type from the drop-down menu: text, alphanumeric, numeric, phone, date, or custom.
Include Special Characters: Select to include special characters, such as a - or .
Maximum/Minimum Characters: Enter a minimum/maximum number of characters that are allowed to be entered into the field. For example, if a customer is entering their zip code in the US, a maximum number of characters could be set to 5.
Error Label Text: Enter text to display if a customer enters invalid information based on the validation requirements configured above.
Invalid Color: Select a color to display the above label text. Be sure this color stands out in the design to catch the customers attention that something wasn’t entered right.
CHECKBOX
Use a checkbox to allow users to select multiple fields of information. For example, selecting different areas of interest to receive marketing emails about.
Label Design
Select either to show or hide the label. This is an additional and optional field that can appear above or near the below checkbox field.
Position: Select for the label text to appear left or right of the checkbox.
Label Text: Enter text here to describe what a user needs to enter into the text box.
Custom CSS Class Name: Add a class name here to automatically add to the CSS layer.
Editing Options: Color, size, font, decoration, text transform, height, and letter spacing.
Field Design
Configure the design, style, and state of the checkbox.
Default Checkbox State: Display the checkbox automatically checked or unchecked.
Custom CSS Class Name: Add a class name here to automatically add to the CSS layer.
Accessibility Label: A concise but useful description for shoppers with visual impairments or who otherwise use assistive technology.
Required: Select if this checkbox field is required to submit the campaign.
Checkbox Formatting: Select a color for the checkmark, width, size, border, and color.
Position and Animation
The position and animation configurations are the same as outlined above.
RADIO BUTTON
Use a radio button layer to allow customers to select a single choice. For example, preferences such as men's or women's shoes.
Content
Configure the below settings for each radio button field. Additional radio buttons may be added.
Required: Select if this field is required to submit the campaign.
Label Text: Enter text here to describe what a user needs to enter into the text box.
Value: What the user is selecting. For example, yes or no.
Input Accessibility Label: A concise but useful description for shoppers with visual impairments or who otherwise use assistive technology.
Default Radio Button State: Display the button automatically checked or unchecked.
Label Design, Design, Position, and Animation
The label design, design, position, and animation configurations are the same as outlined above.
DROP-DOWN
Use a drop-down layer to allow customers to select from a list of information. For example, to enter their birthday.
Content
Accessibility Label: A concise but useful description for shoppers with visual impairments or who otherwise use assistive technology.
Required: Select if this field is required to submit the campaign.
Value: What the user is selecting. For example, January or February.
Default Option State: Display the option automatically selected or unselected.
Label Design, Design, Position, and Animation
The label design, design, position, and animation configurations are the same as outlined above.
HIDDEN INPUT
Use a hidden input to use any additional field of information to be passed along with the email address being captured without it being visible on the popup.
Content
Add a name and a value for the fields. For example, to indicate that the subscription status is true for this campaign, add a name of subscription status and a value of true.
