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
- 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 Forms (1) category and click on the Contact tab (2) where you can choose from different layouts of the Contact (3) section.
- Choose any section layout and click on it to add it to your page.
Manage Contact Form
- Click on Edit Content (1) button.
- You will have the option to manage Content (2), Layout (3), Style (4), Settings (5), and Email Notifications (6).
- Hit Save (7) to apply the changes to the form.
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.
Manage Form Fields
Under Manage form fields, you can specify the fields that you want visitors will fill in this form.
- Click on Add New Field (1) button to add more fields to your form.
- Edit or Delete (2) an already added field.
- Drag and Drop (3) the fields to change their sequence in the form.
- Set the Call to Action Button Label (4) for 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 your form fields.
- Capture the name of your client.
- Capture any small information through the Short Text field.
- Capture any elaborate information/message through the Long Text field.
- Capture the email of your client.
- Capture any numerical information from your client.
- Add services to choose from in a dropdown way.
- Single Selection: Add a radio selection for your services.
- Multiple Selection: Add a checkbox field for multiple selections.
- Add a date picker so that your clients can choose a date for any event.
- Add a line between the form fields.
- Capture the address of your client.
- Capture the website of your client.
- Capture the phone number of your client.
- Add a time field so that your clients can specify the event time themselves.
- Add a separator between the form fields.
- The consent field option can be used to take permissions for newsletters, accepting privacy and terms of use.
- Take client reviews using the star scale, number scale, and smiley scale.
- 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
Form Style
- Show Form as Popup – Enable this to open the form in a popup window by clicking the call-to-action button.
- Call-to-action Button Label – Set the Call to Action Button Label for the form.
- Headline Popup – Specify the form Headline, if any.
- Upload or Delete (1) the form image for the form.
- Add a Title (2), and Description (3) for the form. Before adding the description, check this article.
Headline
- Headline – Specify the Section Headline (1) for the Payment Form section.
- Button & Icons – Learn more about Buttons & Icons (2).
Managing the Layout
- Click on Edit Content (1) button.
- Choose the Layout (2) tab.
- Select the layout for your section (3) and Save (4) the changes.
Changing the Layout will apply default styling of the Form.
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:
- Form Fields
- Alignment
- Text
- Spacing
- Headline
- Images
- Image Border
- Popup Button
- Form Button
- Headline Buttons
- Headline Social Icons
Form Fields
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.
- Shape: Choose the shape of your input fields — such as rectangle, rounded, pill, or text — to match your website’s aesthetic.
- Fill: Enable this toggle to apply a background fill color to your form fields.
- Base Color: Set the background color of the fields when the fill option is enabled.
- Outline: Toggle the border (outline) on or off for each field.
- Outline Color: Choose the color of the field’s border when the outline is enabled.
- Field Text Color: Set the color of the text typed by users inside the form fields.
- Height: Adjust the height of your fields by choosing from: Small, Medium, Large, or Extra Large.
- Labels: Choose whether form field labels appear Inside or Outside the field.
- Label Color: Define the color of labels when placed outside the field.
- Label Inside Color: Set the color for labels placed inside the field (helpful for placeholder-style labels).
- Spacing Between Fields: Use the slider to set the vertical spacing (in pixels) between each form field.
Alignment
- Manage the alignment of the form content horizontally from Horizontal Alignment (1).
- Manage the alignment of the form content vertically from Vertical Alignment (2).
Text
- 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.
Spacing
- Specify the Image Width (1) of the image in the form in Percent.
- Specify the Space Between Image and Text (3) in Percent.
- Specify the Space Below Title (4) in Percent.
Headline
- Horizontally Align the section headline text. You can set it to Left, Center, and Right.
- Enable/Disable the Divider between the section headline and the section content.
- Set the thickness of divider (in px).
- Specify the Divider Color from color picker.
- Choose a Divider Style from the dropdown.
- Set the Headline Width to define how wide the section title appears, starting from a minimum of 50%.
- Specify the Space Below Headline within the section (in px).
Images
- Image Crop: Choose the Image Crop for the list items. You can set the images as Square, Circle, Horizontal, Portrait, and Original.
- Corner Radius: Choose to have a common corner radius or different corner radius for each side of the list items and set a number (in px) for the Corner Radius of the list item images. Know more.
- Hover Animation: Choose to Animate the section’s image on hover by enabling the toggle. Check this feature on a live page.
- Animation Style: Choose an Animation Style for image when the cursor hovers over them.
- Shape Mask: Enable this toggle to apply a shape mask to the images in the Image List 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 images. This allows you to creatively stylize your content by displaying images in unique forms like rounded, diamond, drop, etc.
Using the corner radius field, you can create different shapes of list item images. In case you specify 500 px here, the images would display in a circle shape.
- In case you have chosen split corners, you can set different corner radius for each corner.
Image Border
- Enable / Disable border around the image by switching the toggle.
- Choose to have a common border on all sides of image or you can specify the borders separately for each side.
- Specify the width 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 from color picker.
- Select a preferred Border Style from the dropdown.
- Determine the border width for mobile devices, aligning it with the width chosen for desktop.
Popup Button
These style options are for the popup button, where the contact form will open when the button is clicked.
- Button Size – Select the size of the button from options like small, medium, or large.
- Space Above Button – Adjust the vertical spacing above the button (in percentage).
- Button Style – Choose the style of the button, such as default or custom.
- Button Color – Select the color style for the button. Options include Default, Invert, or Custom.
- Button Text – Customize the text color for the button.
- Button Background – Select the background color for the button.
Form Button
These settings allow customization of the form submission button to match the design and layout of the page.
- Button Size – Select the size of the button (Small, Medium, or Large).
- Space Above Button – Adjust the vertical spacing above the button (specified in percentage).
- Button Style – Choose the overall style of the button, such as Default or Custom.
- Button Color – Set the button color style. Options include Default, Invert, or Custom.
- Button Text – Customize the text color displayed on the button.
- Button Background – Select a background color for the button.
- Button Alignment – Choose the alignment of the button (Left, Center, or Right).
- Button Width – Adjust how wide the button appears. Options include Default, Large, X-Large, or Full Width.
Headline Buttons
These settings control the appearance and spacing of buttons placed with the headline of the section.
- Button Size – Select the overall size of the buttons (Small, Medium, or Large).
- Space Between Buttons – Adjust the spacing between multiple buttons (measured in vw).
- Space Above Buttons – Set the vertical spacing above the buttons (measured in percentage).
- Button Width – Choose how wide the buttons should appear. Options include Default, Large, X-Large, and Full Width.
- Text Link Size – Specify the font size of text links associated with buttons (measured in px).
- Image Button Size – Adjust the size of image-based buttons (measured in px).
Headline Social Icons
Display and customize social sharing icons in the form.
- Icon Size – Adjust the size of the social icons (measured in px).
- Icon Type – Choose the style of the icons, such as Classic, Solid, or Outline options.
- Icon Color – Select the color for the icons. Options include Link Text, Custom, or Brand Color (original color of the social platform).
- Icon Background Color – Set a custom background color for the icons to enhance visibility and style.
Contact Form Settings
- Click on the Edit Content (1) button.
- Customize the form settings from Settings (2) tab and Save (3) your changes.
Form Name
- Enter a name to identify the Contact form in Pixpa Studio. This name is not visible to website visitors.
Post Submission Action
As a post-submission action, you can choose to Show Success Message (1) or Redirect to URL (2).
In case of Show Success Message (1):
- Specify the Success Message (2) that displays after the user submits the form.
- You can also add any script in the post-payment success HTML (3) box.
- In case of Redirect to URL, you can specify any internal/external page by clicking on the settings (⚙️) icon. Know more.
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 and Export form data
- Push Form Data to Make.com. Learn more.
- Push Form Data to Zapier.com. Learn more.
- Export form data as a CSV file. Learn more.
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.
- Email to Website Owner: Enable or disable email notifications for form submissions. When enabled, notifications will be sent to the specified email addresses.
- 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.
- Email: Specify up to 3 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).
- 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.
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.
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.