The Contact form serves as a crucial tool for facilitating communication between individuals or businesses. It provides a convenient and organized way for users to reach out and express their queries. You can also take applications, contact queries, and opinion polls using it.
You can easily create a Contact page on your website using the Contact section.
In this article:
- Adding Contact Section to a page
- Content of Contact Form
- Manage Layout
- Managing Form Fields and Submissions
- Submitted Form Data
- Sync / Export Form Data
- Types of Fields
- Style Contact Form
- Inline Form and Popup Form
- Contact Form Settings
- Redirect Form to another page
- Email Notifications
- Live Example
Adding Contact Section to a page
- On your page, click on the blue + icon to add a new section to your page.
- You will now see the Section Categories on the left side.
- Choose the Contact Section (1) option where you can choose from the different Layouts (2).
- Choose any section layout and click on it to add it to your page.
Content of Contact Form
This is an important part of the form since you upload or change the image, give title and description here so that users get an idea regarding the purpose of the form itself. By carefully crafting concise, descriptive title and informative, compelling description, you can enhance communication and establish strong connections with your website’s visitors.
- You can Upload or Delete (1) the image that will be displayed in the form.
- Edit the Title (2) of the form.
- Edit the Description (3) of the form.
- Define the Section Headline (4) that will be displayed on top of the form.
Manage Layout
- While adding the form on the page, a layout must be selected. You can Change the Layout after adding the form also.
Changing the Layout will apply default styling of the Form.
Managing Form Fields and Submissions
Under Manage Form Fields, you can specify the fields that you want your visitors to fill in.
- Click on the + Add Field (1) button to add more fields to your form.
- Edit, Duplicate or Delete (2) an already added field.
- Drag and drop (3) the field to change the sequence in the form.
E-mail field is mandatory on the form and cannot be deleted.
On clicking on the + Add Field button, a pop-up will open from where you can choose the elements that you want to display in the form.
Form Submission
- Select Yes if you want to receive the form queries to your Email (4). To disable, you can select No.
- You can specify up to 5 email addresses to which this contact form should send data. Your account email address is taken as the default when you add the form.
Submitted Form Data
Submitted form data in a contact form includes the information that a user enters into the form fields when they submit it.
- All form data is stored and accessible from the Form Submissions page of the studio. Learn more.
- All submitted data via the contact form will also be forwarded to the email ID specified in contact form settings. Your account email address is taken as the default.
Also Check: Change account email address.
Sync/Export Form data
- Connect your Google Sheets (1) so the form data will be directly added to your google sheet. Learn more.
- Export form data (2) as a CSV file. Learn more.
Types of Fields
There are several field types that you can use on your website’s contact form to gather more and useful data from users in a categorized and professional way. These fields can be very easily added, duplicated or can be deleted.
Here is a brief description of the form fields.
- Name: Capture the name of your client using this.
- Short Text: Use this box to capture brief text data from the website visitors.
- Long Text: Use this box to capture long text data from the website visitors.
- Email: Capture the email of your client.
- Number: Use this to capture numbers (digits).
- Dropdown: You can add options to choose from in a dropdown way.
- Single Selection: Add this where users can select only one option from the list.
- Multiple selection: Add this where users can select multiple options from the list.
- Date: Add a date picker so that your clients can choose a date for any event.
- Line: Add lines to your form. This can be used to differentiate the fields.
- Address: Use this to capture the address of the users.
- Website: You can use this to capture the website of the user.
- Phone: Capture phone number using this field.
- Time: This will give an option to users to select a time.
- Separator: This can be used to categorize the form fields with an option to add Title and Subtitle.
- Consent: Obtain consent from the users using this on the form.
- Star Scale: Allow users to give star rating using this. It can display either 3 or 5 stars.
- Number Scale: Allow users to give number rating using this. You can choose to display from 0 to 10 and customize the left and right caption.
- Smiley Scale: Allow users to give smiley rating using this option.
- While adding certain fields, you get the option to choose width between Full, Half and One Third
- You can also choose to display fields side by side by choosing Half or One Third option
Style Contact Form
Styling a contact form is an important aspect of creating a visually appealing and user-friendly experience.
You will have multiple style options for the section:
Images Options
- Choose the Image Crop (1) for the image in the form. You can set the images as Square, Circle, Horizontal, Portrait, and Original.
- Using Corner Radius (2) the corners of the image can be managed for their sharpness. You can also choose to manage the corners Individually.
- Enable Animate Images (3) to add an animation effect while hovering the cursor over the image.
- Animation Style (4) option will be visible if Animate Images is enabled. You can choose from different Animation effects.
Shape Mask
- Shape Mask: Enable this toggle to apply a shape mask to the image in the Contact section. Once enabled, the selected shape will visually clip the image into that form.
- Select Shape: Choose from various predefined shapes to apply to your image. This allows you to creatively stylize your content by displaying image in a unique form like rounded, diamond, drop, etc.
- Shape Mask option is layout-dependent – It may not appear under layouts where text like title or subtitle is displayed over the image.
- The Stretch setting depends on multiple factors – including Image Size, Alignment, and Crop settings defined under the Style tab.
- If Image Crop is set to Original, the image’s actual dimensions will determine whether it gets stretched vertically or horizontally.
Image Border Options
- Enable / Disable border (1) around the images by switching the toggle.
- Choose to have a common border (2) on all sides of images or you can specify the borders separately for each side.
- Specify the width (3) of the border. If it is set to 0, then the border will not appear. You also have the option to set the border width individually for each side of the image.
- Select the Border Color (4) from color picker.
- Select a preferred Border Style (5) from the dropdown.
- Determine the border width for mobile (6) devices, aligning it with the width chosen for desktop.
Alignment Options
- Manage the alignment of the form content horizontally from Horizontal Alignment (1).
- Manage the alignment of the form content vertically from Vertical Alignment (2).
Spacing Options
- Specify the Image Width (1) of the image in the form in Percent.
- Specify the Space Below Section Headline (2) in Pixels.
- Specify the Space Between Image and Text (3) in Percent.
- Specify the Space Below Title (4) in Percent.
Text Size Options
- Click on the Change Text Style (1) button to visit the Design section and manage your font sizes and styles.
- Specify the Title (2) font style of the form.
- Specify the Description (3) font style of the form.
Inline Form and Popup Form
You can choose to show the form on the page or as a pop-up linked to a call to action button. Navigate to the Settings (1) tab to manage the type of the form.
- Display the entire form on the page by selecting Inline form or as a Popup (2) linked to a call to action button.
- Call-to-action Button (3) Label will be visible if Popup form is selected. Here you can specify the text inside the button.
Contact Form Settings
- Button Label (1) is the text inside the button. This option is visible when Inline Form is selected.
- Choose the Button size (2) from Small, Medium and Large.
- Choose the Button Style (3) from Default, Solid, Outline and Text Link options.
- Select Yes if you want the Button to invert the color (4).
- Choose the Button Alignment (5) in the form from Left, Center or Right option.
- You can define Post Submission Action (6) either by displaying a Success Message or Redirecting the user to a specified URL.
- You can also add any script in the Post Submit Success HTML (7) box.
- You can view the Form ID (8) of this contact form. This ID is useful and will be visible while creating mailing lists.
Redirect Form to another page
Redirecting users to a specific page after they submit a form can enhance the overall user experience and serves various purposes like avoiding duplicate submissions, analytics and tracking, retaining users on the website for a longer period of time, etc.
Redirection can be easily created using the Post Submission Action option under the Setting tab.
- You can create a redirect within your website from Website Content (1) option. It can be a page, gallery, blog, e-commerce gallery, folder, etc. You have to enter the element’s name in the field as shown in the screenshot below and you’ll get suggestions relating to it.
- Use External Link (2) option to create redirection outside your website. You will have to enter the URL in the field where you want the users to get redirected after the form submission.
Learn more on how to use Linkbuilder.
Email Notifications
From here, you can customize the email subject for the notifications you receive as a website owner upon a successful form submission. Additionally, you can personalize the success email sent to users or customers after they submit the form. This feature can be leveraged for branding, marketing, and running campaigns effectively.
- Specify the Subject of the contact form submission email. You can also include {WEBSITE} variable to include the name of the website. This is useful when you have multiple websites.
- You can enable Email to Customer (1) to send a mail regarding the Form submission success.
- Specify the Subject (2) of the mail.
- Specify the content inside the mail from Success Message (3).
- Email to Customer is a premium feature available only on Professional and Advanced plans. Learn more.
- Customize the email content carefully to ensure a consistent and professional communication experience with your clients.
Live Example
Here’s a live Pop-up Contact Form:
Here’s a live Inline Contact Form:
To reduce spammers on the form, the Google captcha security is enabled automatically on your form.