Create Contact Page

A contact page is essential for any online store. This guide shows you how to create a professional contact page using Qivra Form Builder.

Why Have a Contact Page?

Benefit	Description
Customer Trust	Shows you’re accessible and responsive
Support Channel	Central place for inquiries
Conversion	Helps convert undecided shoppers
SEO	Contact pages rank well for brand searches
Professionalism	Expected feature for legitimate businesses

Creating a Contact Page

Step 1: Create the Page

1. Go to Online Store > Pages
2. Click Add page
3. Enter title: “Contact Us” or “Contact”
4. Add any introductory content
5. Save the page

Step 2: Create a Contact Form

1. Go to Qivra Form Builder
2. Click Create new form
3. Either:
   • Use the Contact Form template, or
   • Start with Blank Form

Step 3: Build Your Contact Form

Essential Fields

Field	Purpose	Required
Name	Identify the customer	Yes
Email	Reply to inquiries	Yes
Subject	Categorize inquiries	Recommended
Message	The actual inquiry	Yes

Optional Fields

Field	Purpose
Phone	For callback requests
Order Number	For order-related inquiries
Department	Route to right team
Attachment	Screenshots, documents

Example Contact Form Structure

Step 1: Your Information
├── Full Name (required)
├── Email Address (required)
└── Phone Number (optional)

Step 2: Your Inquiry
├── Subject (dropdown: Order, Product, Shipping, Other)
├── Order Number (conditional: shows if Subject = Order)
└── Message (required, textarea)

Step 3: Attachments (optional)
└── File Upload

Step 4: Add Form to Contact Page

Using Theme Editor

1. Open Theme Editor
2. Navigate to your Contact page
3. Add Qivra Form Builder block
4. Select your contact form
5. Save

Using Page Content

1. Edit your Contact page
2. Add a section for the form
3. Insert form via Theme Editor or shortcode

Designing Your Contact Page

Page Structure

A good contact page includes:

┌─────────────────────────────────┐
│        Page Header              │
│    "Get in Touch With Us"       │
├─────────────────────────────────┤
│                                 │
│     Contact Information         │
│  email@store.com                │
│  1-800-XXX-XXXX                 │
│  Store Address                  │
│                                 │
├─────────────────────────────────┤
│                                 │
│         Contact Form            │
│    [Name] [Email] [Message]     │
│         [Submit]                │
│                                 │
├─────────────────────────────────┤
│        Business Hours           │
│     Mon-Fri: 9AM - 6PM          │
└─────────────────────────────────┘

Content to Include

Element	Description
Headline	Clear call to action
Contact Info	Email, phone, address
Business Hours	When you’re available
FAQ Link	For quick answers
Social Links	Alternative contact methods
Map	If you have a physical location

Adding Contact Information

In your page content, add:

<div class="contact-info">
  <div class="contact-item">
    <span class="icon">email</span>
    <span>support@yourstore.com</span>
  </div>
  <div class="contact-item">
    <span class="icon">phone</span>
    <span>1-800-XXX-XXXX</span>
  </div>
  <div class="contact-item">
    <span class="icon">location</span>
    <span>123 Store Street, City, Country</span>
  </div>
</div>

Form Configuration

Success Message

Set a clear confirmation message:

"Thank you for contacting us! We'll get back to you within 24 hours."

Email Notifications

Configure to receive submissions:

1. Go to Settings in the app
2. Set up your email provider
3. Add recipients for contact form submissions

See Email Settings for details.

Auto-Reply (Optional)

Send confirmation to customers:

1. Enable auto-reply in form settings
2. Write a confirmation message
3. Include expected response time

Advanced Contact Page Features

Department Routing

Route inquiries to different emails:

1. Add Department dropdown
2. Options: Sales, Support, Billing, Other
3. Use conditional notifications

Priority Indicators

Let customers set urgency:

1. Add Priority field
2. Options: Low, Normal, High, Urgent
3. Flag high-priority submissions

Order-Related Inquiries

For stores with orders:

1. Add Order Number field
2. Make it appear when “Order Question” is selected
3. Link to order lookup if possible

Multiple Contact Forms

Different forms for different purposes:

Form	Use Case
General Contact	General inquiries
Support Request	Technical issues
Wholesale Inquiry	B2B inquiries
Partnership	Business proposals

Styling Your Contact Page

Form Styling

.contact-form {
  max-width: 600px;
  margin: 0 auto;
  padding: 30px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.contact-form .submit-button {
  background: #007bff;
  color: white;
  padding: 12px 30px;
  border-radius: 4px;
}

Contact Info Styling

.contact-info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

.contact-item {
  text-align: center;
  padding: 20px;
}

Best Practices

Do’s

Practice	Why
Keep form short	Higher completion rate
Set expectations	Tell users when to expect reply
Mobile-friendly	Many contact from phones
Clear labels	Reduce confusion
Confirmation email	Customer knows it was received

Don’ts

Avoid	Why
Too many required fields	Discourages submission
No response time	Creates uncertainty
Hidden contact info	Frustrates customers
Complex forms	Abandonment

Response Management

Setting Expectations

Include response time in:

• Success message
• Confirmation email
• Contact info section

Internal Workflow

1. Check submissions daily
2. Categorize by type/department
3. Respond within stated timeframe
4. Track common questions

Troubleshooting

Form Not Sending

1. Check email provider settings
2. Verify recipient email addresses
3. Check spam/junk folders
4. Review submission logs

Low Submission Rate

1. Simplify the form
2. Make contact page more visible
3. Add link in navigation
4. Test on mobile devices

Video Tutorial

Play

Related Docs

• Create Your First Form
• Email Notification Settings
• Form Styling