PageBuilder Contact Form Component

PageBuilder’s Contact Form Component allows you to create an interactive form for customer engagement, right in the Miva admin.

Using the Contact Form Component

In the Miva admin, navigate to the PageBuilder interface, User Interface>Content Management and then select the page you want to add the component to.

Click the Add Component icon in the Component Pane, and select Contact Form from the component list.

Rename the Component Name as desired.

Properties: Form

The Form section is where most of the formatting is done.

Header: If the toggle is set to off, there will be no header displayed. If the toggle is on (green), this section expands to show settings for Text Alignment, Heading Text, Subheading Text and Body Text. For the Heading Text and Subheading Text, the Select Type icon to the right allows you to set styles for the text in each. The Body Text field is Markdown capable. For information on this ability, visit the PageBuilder Markdown Authoring document.

Fields: The Fields section is where you build the heart of the Contact Form. There are four fields set by default. You can add fields or delete them by clicking the X to the right of each field title. In addition, you can recorder the fields by clicking and holding the six dots next to each field, and dragging it to the desired location.

Clicking each field opens the settings for that individual field.

The Type section establishes what information should be entered in the field. There are multiple options.

The Label field applies a label above the text entry field.

Placeholder adds text to the entry field, in shadow, to give an example what to enter and is replaced with the customer enters information in the field.

Description allows you to add more information about the field. This section is Markdown capable.

The Required checkbox makes an entry in this field mandatory before it will be submitted.

Column span sets the width of the entry field. It is subject to the Columns setting in the Layout section below.

Validation: This section is only available if the field type is text, email, phone number or number. Emails and text have pattern and message. If the pattern is filled out, the entered value must match exactly. If the value does not match, the customer cannot submit the entry and what you enter into the message value is displayed.

For example, if you’ve set the pattern for an email submission as name@place.com and the entry doesn’t match the pattern, the customer sees the error message you’ve entered in the Message field.

The field for phone number is straight forward and there are presets that can be chosen. Number has three settings: minimum, maximum and step (how many you want the numbers to skip by).

Note

There is a pattern attribute added to the input[type=”text]” property, which allows you to provide a regular expression. This allows you to add “regex” in the pattern field and it will be checked against the regular expression.

Submit Button: This subsection sets the style of the Submit button.

Layout: This is where you adjust the look and feel of the contact form. The size of the text fields, width of the text fields, the position of the fields and the number of columns.

Background: This section is where you can apply a background to your contact form. You must toggle the background on before you can make changes to this section.

You can use an image as a background, as well as use different images for mobile and tablet users. You can also manage the amount of shader you wish to use with the image.

You can also use a color as a background if you choose.

Messages: This section allows you to customize messages displayed after the form is submitted. There are three different messages available, for a successful submission, a failed submission or a submission that is missing required fields. Each message can be customized and the fields are Markdown capable.

Properties: Email

The Email section lets you choose who, or what mailbox, received notification of a successful contact form submission. It also lets you set a primary recipient, as well as set any CCs or BCCs as desired.

You can also give the email a standard Subject line in this section.

Advanced: Spacing

This section is where you set the spacing of the Contact Form Component from the page elements above and below it. It is set in pixels.

Advanced: Padding

This section is where you set the padding of the Contact Form Component. Padding is the space from the top of the element itself, to the first thing inside the element. It is set in pixels.