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. Button Style Settings
8. Style Contact Form
9. Contact Form Settings
10. Redirect Form to another page
11. Export Form Data
12. Submitted Form Data
13. Email Notifications
14. 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.

Inline Form

Selecting Inline Form will place the contact form directly on the page where it is added. The form will be immediately visible to visitors without requiring any additional action. This is ideal for situations where you want to keep the form prominent and encourage direct engagement, such as on a contact or inquiry page.

Popup form

Choosing Popup Form will display only a button on the page. When a visitor clicks the button, the contact form will open in a popup window. This keeps the page design cleaner and works well when you want to offer the form without taking up much space. It’s commonly used for quick inquiries, lead capture, or when you want to minimize distractions on the page.

---

Button Stye Settings

1. Button Label – Specify the visible text on your button. This is what users will see and click on.
2. Button Size – Choose the size of the button (e.g., Small, Medium, Large). This adjusts the padding and font size to suit your design.
3. Button Style – Choose the button style to be the default (set in the Buttons and Links tab of the Design section), Solid, Outline, or a Text Link.
   • Default: Follows your site’s theme settings.
   • Solid: A bold, filled button.
   • Outline: Transparent background with a border.
   • Text Link: Simple, clean text-only style (no button box).
4. Button Color – Customize the color scheme of the button:
   • Default: Inherits theme settings.
   • Invert: Reverses the button text/background colors.
   • Custom: Enables you to choose specific text and background colors.
5. Button Text – If using Custom button color, you can set the text (label) color from here.
6. Button Background – Also available under Custom, this sets the button’s background color. Pair this with text color for maximum readability and style.
7. Button Alignment – Choose the Alignment of button in the form from Left, Center or Right option.
8. Button Width – Choose how wide the button should appear:
   • Default: Standard width based on button content
   • Large / X-Large: Wider buttons for more emphasis
   • Full Width: Button stretches across the entire container width

---

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.

---

Export Form data

• Export form data (4) as a CSV file. Learn more.
• Save (5) the changes.

---

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