Contact Section

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:

1. Adding Contact Section to a page
2. Content of Contact Form
3. Manage Layout
4. Managing Form Fields and Form Type
5. Types of Fields
6. Inline Form and Popup Form
7. Style Contact Form
8. Contact Form Settings
9. Redirect Form to another page
10. Sync / Export Form Data
11. Submitted Form Data
12. Email Notifications
13. 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.

---

Managing Form Fields and Form Type

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.

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.

---

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.

---

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.

• Display the entire form on the page by selecting Inline form or as a Popup (1) linked to a call to action button.
• Call-to-action Button (2) Label will be visible if Popup form is selected. Here you can specify the text inside the button. Button Label is the text inside the button. This option is visible when Inline Form is selected.
• Choose the Button Size (3) from Small, Medium and Large.
• Choose the Button Style (4) from Default, Solid, Outline and Text Link options.
• Select Yes if you want the Button to invert the color (5).
• Choose the Button Alignment (6) in the form from Left, Center or Right option.
• Set the button to stretch across the full width (7) of the form container if needed.

---

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: 

1. Images Options
2. Shape Mask
3. Image Border Options
4. Alignment Options
5. Field Styling Options
6. Spacing Options
7. Text Size Options

---

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

1. 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.
2. 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.

---

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).

---

Field Styling Options

Pixpa allows you to fully customize the appearance of your form fields. These styling options apply to all input fields in your Contact Form and give you greater control over how your form looks and feels on your website.

1. Shape: Choose the shape of your input fields — such as rectangle, rounded, pill, or text — to match your website’s aesthetic.
2. Fill: Enable this toggle to apply a background fill color to your form fields.
3. Base Color: Set the background color of the fields when the fill option is enabled.
4. Outline: Toggle the border (outline) on or off for each field.
5. Outline Color: Choose the color of the field’s border when the outline is enabled.
6. Field Text Color: Set the color of the text typed by users inside the form fields.
7. Height: Adjust the height of your fields by choosing from: Small, Medium, Large, or Extra Large.
8. Labels: Choose whether form field labels appear Inside or Outside the field.
9. Label Color: Define the color of labels when placed outside the field.
10. Label Inside Color: Set the color for labels placed inside the field (helpful for placeholder-style labels).
11. Spacing Between Fields: Use the slider to set the vertical spacing (in pixels) between each form field.

---

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.

---

Contact Form Settings

• Specify an internal name for the form to help identify it within Pixpa Studio. This name is not visible to website visitors.

Post Submission Action

• You can define Post Submission Action (1) either by displaying a Success Message (2) or Redirecting the user to a specified URL.
• You can also add any script in the Post Submit Success HTML (3) box.

---

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.

---

Sync/Export Form data

• Connect your Google Sheets (4) so the form data will be directly added to your google sheet. Learn more.
• Export form data (5) as a CSV file. Learn more.

---

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.

---

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.

1. Email to Website Owner: Enable or disable email notifications for form submissions. When enabled, notifications will be sent to the specified email addresses.
2. Subject: Customize the email subject line. Use the {WEBSITE} variable to dynamically include the website name in the subject. This is useful when you have multiple websites.
3.  Email: Specify up to 5 email addresses to receive notifications when the form is submitted.

• Specify the Subject of the contact form submission email. You can also include {WEBSITE} variable to include the name of the website.

Email to Customer

• 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).

---

Live Example

Here’s a live Pop-up Contact Form: 

View a live demo site. 

Here’s a live Inline Contact Form: 

View a live demo site. 

---

Related Articles:

• Payment Forms section
• Add Contact Page
• Newsletter Section