Centered Elementor Contact Section
This Elementor contact section places a centered heading and a short line of text above a contact form, on a soft mint gradient. Contact Section Centered is a free, responsive block shared as JSON files and built only with native Elementor widgets, with a full form version for Elementor Pro and a contact details version for Elementor Free.
What's Inside the Block
- A centered H2 heading ("Order in Bulk") and a gray intro line, on a radial mint gradient (
#DFFBF0fading to white) from the top center. - Pro version: a 36 rem form with First name and Last name side by side, then Company, Email, Phone number, a 4-row Message field, and a consent checkbox.
- Free version: a centered list with email, phone, and address, plus a "Let's Talk" button that opens an email.
- Labels above the fields in semibold navy, white fields with a light gray border and rounded corners, and a full-width emerald button.
- Inter font. On mobile every form field is full width.
Tip: Ask for only what you need to reply. The sample form asks for a name, company, email, phone, and message, but only Email and the consent box are required. If a field isn't useful to you, delete it, because shorter forms are easier to finish. Set the promise in the intro ("we'll reply within one day") only if you can keep it.
Which Version Should I Download?
- Elementor Pro version: uses the Form widget, which is a Pro feature. Visitors fill in the form, and each message is emailed to you and saved in Elementor under Submissions.
- Elementor Free version: uses an Icon List and a Button instead. It shows your contact details, and the button opens the visitor's email app with your address ready.
The heading, intro text, background, and spacing are the same in both versions.
Requirements
- A recent version of Elementor with Flexbox Container available.
- Elementor Pro for the Pro version only, because of the Form widget. The Free version needs no Pro.
- For the Pro version, a WordPress site that can send email, so that form messages reach your inbox.
- The Inter font available on your site (otherwise a fallback font is used).
Note: The sample email, phone number, and address in the Free version are placeholders (hello@example.com), so replace them with your own, including the links on the email item and the button. In the Pro version, the consent checkbox says "you agree to our privacy policy" as plain text with no link, so edit it to link to your own policy page. The form sends its email to your site's admin address unless you change it under Actions After Submit. Back up your page before importing a template into an existing layout.
Widgets Used
| Element | Purpose | Pro? |
|---|---|---|
| Flexbox Container | Section wrapper, heading group, and form or details group | No |
| Heading | Section title and intro text | No |
| Form | Contact form with seven fields (Pro version) | Yes |
| Icon List | Email, phone, and address with icons (Free version) | No |
| Button | "Let's Talk" email button (Free version) | No |
Frequently Asked Questions
How do I import this Elementor JSON template?
First, download the JSON file for your version using the buttons above and don't unzip or edit it. Second, open your WordPress dashboard, go to Templates, and choose Saved Templates. Third, click Import Templates, select the JSON file, and wait until the template appears in the list.
Fourth, open the page you want to edit with Elementor and click the folder icon to open the template library. Fifth, open the My Templates tab, choose this template, and click Insert. The block is added to your page and can be edited like any other Elementor container.
Where do the Pro form messages go?
The form has two actions after it is sent. It emails the message with the subject "New bulk order inquiry" and it saves the entry under Elementor, Submissions. To change the receiving address or the subject, select the Form widget, open the Content tab, and edit the Email action under Actions After Submit.
How do I add, remove, or change a form field?
Select the Form widget and open the Form Fields list in the Content tab. Click a field to change its label, type, width, or required setting, add a new field with the add button, or delete one with the trash icon. The first and last name fields are set to 50 percent width, and the others are 100 percent.
Why is the phone field a plain text field?
The Elementor Form can't place a country dropdown inside the same field, so the phone number is a standard phone field with the placeholder "123-456-7890". If you need a country selector, you can add a Select field before it or use an add-on.
How do I link the consent text to my privacy policy?
Select the Form widget, click the consent field in the Form Fields list, and edit its Acceptance Text. The text is plain by default, and you can add a link to your privacy page there. The field is required, so visitors must tick it before the form can be sent.
How do I use the Free version contact details?
Select the Icon List widget and change the three items to your own email, phone number, and address. The email item links to a mailto: address and the phone item links to a tel: number, so update both links as well. The address item has no link. Then edit the Link field of the "Let's Talk" button, which also uses a mailto: address.
Is it safe to show my email address on the page?
A visible email address can be collected by spam bots. If that is a concern, use the Pro version with the form, or show a general address that you are comfortable receiving spam on. The mail link also needs the visitor to have an email app set up.
Why am I not receiving the form emails?
First, check your spam folder and the receiving address in the Email action. Second, confirm that your hosting can send email, since some hosts block it. Third, if messages are still missing, install an SMTP plugin to send through a real mail service. Entries are still saved under Submissions, so you can find messages that were not delivered.
Why is there no green outline when I click a field?
Elementor has no built-in setting for a custom focus outline on form fields, so the browser's default look is used. If you want an accent color, you can add your own custom CSS for it.
Where should I place this contact section?
Place it near the end of a page, above the footer, or on a dedicated Contact page right under the page's H1. Because its heading is an H2, use it after the page's H1 and main content.
Do I need Elementor Pro?
Only for the Pro version, which uses the Form widget. The Free version uses native Heading, Icon List, and Button widgets inside Flexbox containers.
Why won't the file import?
Make sure the file has a .json extension and hasn't been unzipped or edited. The Pro version also needs Elementor Pro active on your site. If it still fails, check your hosting upload size limit or any security plugin that may block file uploads.
Why do the Flexbox settings look different or missing?
Update Elementor to the latest version. On older versions, the Flexbox Container feature may need to be enabled first in Elementor's feature settings.
Why does the font look different?
The block uses the Inter font. If it isn't available on your site, change the font family in the Style tab of each widget.
Looking for more contact sections? Browse all Elementor contact section templates, or see every free block in Elementor Templates.
Comments
Post a Comment
Post a Comment