Overview
Shoppers often have questions before they complete a purchase. Giving them an easy way to reach out, right on your storefront, can be the difference between a hesitant visitor and a sale. AfterShip Page Builder lets you add a contact form to any page in just a few clicks.
Add a contact form
Go to your AfterShip Page Builder dashboard and open the page where you want the contact form to appear.
Click Add section, select Add blank section.
Click Add elements, select Contact form element.
Configure the form in the Contact Form settings panel:
a. Recipient email address: Enter the email address where you want form submissions sent (for example, [email protected]). Submissions are emailed to this address only, they don't sync with Shopify Admin > Customers.
b. Form fields: Choose which fields shoppers fill in, and drag them into the order you want:
Field | Notes |
Name | Required. |
Required and locked — it can't be removed from the form. | |
Phone number | Required by default; can be included or removed. |
Subject | Required by default; click the pencil icon to edit the dropdown options (for example, "Order issues", "Product & Stock", and "Delivery"). |
Message | Required by default; can be included or removed. |
c. Text fields
Field | What to do |
Button text | Enter the label for the submit button (up to 30 characters, for example, "Submit"). |
Success message | Enter the confirmation message shoppers see after submitting (up to 100 characters, for example, "Feedback submitted. We'll get in touch with you shortly."). |
5. Switch to the Settings and Style tabs to confirm everything looks the way you want.
6. Click Save.
Contact form layout settings
To customize the layout of the contact form, you need to move out of the boundary of the contact form element and click anywhere on the empty space. This will open the Section layout settings where the contact form element is currently presiding.
On the left-side panel, configure the layout settings of the Section as you want. You can customize:
Layout
Top and bottom padding: Choose the padding size (for example, Small). Selecting "None" also removes the padding on the left and right.
Content width: Set the width of the content (for example, Large). This option is only available on desktop.
Content vertical alignment: Align the content to the top, middle, or bottom.
Background
Background image: Upload separate background images for desktop and mobile. The suggested dimensions are 1040(w) x 300(h) pixels, with a maximum file size of 2 MB. Accepted formats are JPG/JPEG, GIF, and PNG.
Overlay opacity: Adjust the opacity of the overlay on your background image.
Image width: Choose how the image displays (for example, Full bleed).
Color
Background: Set a background color for the section. Click Reset to restore the default.
Contact form styling
Your contact form automatically matches the rest of your page's design. To change how it looks, go to the main Style settings, but keep in mind that any changes you make there apply to the whole page, not just the contact form.
Customer experience
Your contact form will look like this:
FAQs
Can I reply to shopper queries from my preferred email address?
Yes. Go to your Shopify store's Settings page. Under Store details, find Contact information, click Edit, and enter your preferred address in the Sender email field.
Need help?
If you run into any issues, reach out to our chat support team.