Step 1: Set Up the Page and Header
Open the Contact page in Elementor.
Copy the header container from the Projects page.
Paste it into the Contact page.
Update the large heading text to something like “Let’s Connect”.
Update the subtext to something friendly, like “We can’t wait to hear from you!”
Add a note about your typical response time if desired (e.g., “We aim to reply within 24 hours”).
Go to the container’s Advanced tab and set bottom padding to 300px.
Step 2: Create Form and Info Columns
Add a new container (Flexbox, Direction: Row Horizontal).
Inside it, add two containers side by side.
Left Container (Contact Form):
Set background to a yellow shade.
Under Style > Border, set Top and Left Border Radius to 30px.
Under Advanced > Padding, set to 40px (linked).
Right Container (Office Info):
Set background to white.
Under Advanced > Padding, set to 40px (linked).
Add a Heading (H3) titled “Office Hours”.
Add a Text Editor with hours like:
Mon-Thu: 8AM – 4PM
Fri-Sat: 10AM – 4PM
Sun: 10AM – 3PM
Bold each day-range label.
Step 3: Fine-Tune Layout
Select the container holding both columns.
Set Width: 950px.
Under Advanced > Margin, set Top Margin: -185px.
Set container Gap: 0.
Apply a Box Shadow:
Vertical: 35
Blur: 80
Spread: -52
Remove the default container background.
Ensure border radius is set to 30px on all corners.
Step 4: Add Emergency Contact Info
Add a new container.
Add a centered Heading (H3): “Need Urgent Support?”
Below, add a centered Text Editor: “You can reach our departments below:”
Add another container with two inner containers set to row layout.
In each, add Text Editors with bolded department names and example phone numbers.
Example:
IT Services: 000-000-0000
Marketing: 000-000-0001
Align one block left, the other right.
Step 5: Add Map and Office Location
Duplicate the previous row container.
In the left column, insert a Google Maps widget.
Input a location (e.g., Portland, OR).
Adjust zoom and map settings.
Under Advanced > Border, set Top and Left Border Radius: 30px.
Right Column (Location Text):
Replace heading with “Office Location”.
Add a text block with a landmark-based direction and full address.
Set background to light gray.
Add the familiar geometric overlay with:
Position: Center Center
Attachment: Scroll
Repeat: No Repeat
Display Size: Cover
Opacity: 0.3
Align vertically to center.
Adjust column width to Map: 62%, Text: 38%.
Step 6: Create and Add WPForm
Go to WPForms > Add New.
Choose the Simple Contact Form template.
Set all field sizes to Large under Advanced.
Add placeholder text (e.g., First Name, Email).
Hide field labels.
Save, then go to Settings > Notifications.
Confirm admin email and subject lines are accurate.
Return to Elementor and insert a WPForms widget.
Select your new contact form.
Under Advanced > Margin, set Bottom: -27px.
Step 7: Tablet and Mobile Responsiveness
In Tablet View:
Header Padding: 150px
Adjust contact form container margin: Top -75px
In Mobile View:
Adjust Border Radius for both columns to maintain 30px on all corners.
Set all column Padding to 25px
WPForms widget margin: Bottom -97px
Map: Border radius Top + Left = 30px
Location Column: Border radius Bottom + Right = 30px
Stack text blocks vertically and remove gaps.
Homework & Action Items
Open your site on a tablet, mobile phone, and a laptop browser window at half size. Note anything that looks off and adjust them.
Click on every button, link and menu item to make sure those are working properly.
Make sure no text is pressed up against the edge of the screen, and that there’s at least 20px of padding on the mobile sides.
- Make sure you’re saving along the way!