Contact Us Page Management

Overview

The Contact Us Page Management module provides a comprehensive interface for customizing your organization's contact page. This module allows you to manage all contact-related content including hero section text, contact information (address, phone, email), business hours, location map, and contact form settings through a single, organized interface.

The Contact Us page serves as the primary channel for visitors to reach out to your organization. It displays contact information, a submission form, and an embedded map showing your location. All content is fully customizable and changes are reflected immediately on the live page.

Use this module to ensure visitors can easily find your contact details and submit inquiries through a user-friendly form with built-in validation and spam protection.

Accessing Contact Us Page Management

Navigation path: Dashboard > Appearance > Contact Us Page

Required permission: landing-page.view

Key Features

• Hero Section Customization: Edit page heading and introductory text
• Contact Information Management: Update address, phone numbers, and email addresses
• Business Hours Configuration: Display operating hours with up to three lines
• Google Maps Integration: Embed interactive location map using iframe code
• Contact Form Settings: Customize form heading and email notification settings
• Real-time Preview: View changes on the live Contact Us page instantly
• Organized Interface: Content grouped into logical sections with color-coded cards
• Form Validation: Built-in validation for name, email, phone, subject, and message fields
• Spam Protection: Integrated captcha system to prevent automated submissions
• Email Notifications: Automatic email delivery of contact form submissions
• Responsive Design: All content adapts seamlessly to mobile and desktop devices
• Dark Mode Support: Full compatibility with light and dark themes

Main Interface

Page Editor View

The Contact Us page editor is organized into five main sections, each presented in a distinct card with color-coded headers:

1. Hero Section (Blue gradient with envelope icon)

   • Page heading and introductory text

2. Contact Information (Blue gradient with info icon)

   • Address, phone numbers, and email addresses

3. Business Hours (Green gradient with clock icon)

   • Operating hours and availability information

4. Location Map (Purple gradient with map icon)

   • Google Maps embed iframe code with instructions

5. Contact Form (Amber gradient with form icon)

   • Form heading and email configuration

Each section includes:

• Clear section headers with descriptive icons
• Organized input fields with labels
• Helpful placeholder text and examples
• Save and cancel buttons at the bottom

Actions Available

• Edit Content: Modify text fields for any section
• Update Contact Details: Change address, phone, and email information
• Configure Business Hours: Set operating hours across three lines
• Embed Map: Add or update Google Maps iframe code
• Customize Form: Edit form heading and email settings
• Preview Page: View the live Contact Us page in a new tab
• Save Changes: Update all modifications at once
• Cancel: Discard changes and return to dashboard

Common Tasks

Task 1: Editing the Hero Section

The hero section is the first thing visitors see on your Contact Us page. To update it:

1. Navigate to Dashboard > Appearance > Contact Us Page
2. Locate the Hero Section card (blue gradient header with envelope icon)
3. Edit the following fields:
   • Contact Heading: Main page title (e.g., "Contact Us", "Get In Touch")
   • Contact Text: Introductory paragraph explaining how visitors can reach you
4. Click "Save Changes" at the bottom of the page

Result: The hero section displays your updated heading and text with a gradient background.

Example values:

• Heading: "Contact Our Team"
• Text: "We're here to help. Reach out to us with any questions or inquiries."

Task 2: Updating Contact Information

Provide visitors with multiple ways to reach your organization:

1. Go to Dashboard > Appearance > Contact Us Page
2. Find the Contact Information section card
3. Update the following fields:
   • Contact Info Heading: Section title (e.g., "Get In Touch", "Contact Details")
   • Contact Address: Full physical address
   • Contact Phone: Primary phone number
   • Contact Email: Primary email address
   • Contact Email 2: Secondary/alternate email address (optional)
4. Click "Save Changes"

Result: Contact information displays in an organized card with icons for address, phone, and email.

Tips:

• Include complete address with postal code
• Use international format for phone numbers (e.g., +91 9834754391)
• Provide working email addresses that are monitored regularly
• Add a secondary email for different departments if needed

Task 3: Configuring Business Hours

Let visitors know when your organization is available:

1. Navigate to Dashboard > Appearance > Contact Us Page
2. Locate the Business Hours section card (green gradient header)
3. Fill in up to three lines of business hours:
   • Contact Business Hours 1: First line (e.g., "Monday - Friday: 9:00 AM - 5:00 PM")
   • Contact Business Hours 2: Second line (e.g., "Saturday: 10:00 AM - 2:00 PM")
   • Contact Business Hours 3: Third line (e.g., "Sunday: Closed")
4. Click "Save Changes"

Result: Business hours display in a card with a clock icon, showing your availability.

Best practices:

• Use consistent time format (12-hour or 24-hour)
• Clearly indicate closed days
• Include timezone if serving multiple regions
• Update for holidays or special hours

Task 4: Embedding a Location Map

Add an interactive Google Maps embed to help visitors find your location:

1. Go to Dashboard > Appearance > Contact Us Page
2. Find the Location Map section card (purple gradient header)
3. Follow the instructions provided in the blue info box:
   • Go to Google Maps
   • Search for your location
   • Click the "Share" button
   • Select "Embed a map" tab
   • Copy the iframe HTML code
   • Paste it in the Contact Map Iframe field
4. Click "Save Changes"

Result: An interactive Google Map appears on the Contact Us page showing your location.

Important notes:

• Paste the complete iframe code including <iframe> tags
• The map will automatically resize to fit the page width
• Default height is 450 pixels
• Visitors can zoom, pan, and get directions directly from the embedded map

Task 5: Customizing the Contact Form

Configure the contact form heading and email settings:

1. Navigate to Dashboard > Appearance > Contact Us Page
2. Locate the Contact Form section card (amber gradient header)
3. Edit the following fields:
   • Contact Form Heading: Form section title (e.g., "Send Us a Message")
   • Contact Form Subject: Email subject line for form submissions
4. Click "Save Changes"

Result: The contact form displays with your custom heading, and submissions are sent with your specified subject line.

Form features:

• Required fields: Name, Email, Subject, Message
• Optional field: Phone number
• Subject dropdown with predefined options:
  • General Inquiry
  • Customer Support
  • Sales Inquiry
  • Partnership
  • Feedback
  • Other
• Message minimum length: 10 characters
• Built-in email validation
• Captcha protection against spam
• Success/error message display

Settings and Options

Hero Section Fields

Contact Heading (contact_heading)

• Type: Text
• Required: No
• Max Length: 255 characters
• Description: Main page title displayed at the top
• Default: "Contact Us"
• Example: "Contact Our Team", "Get In Touch", "Reach Out to Us"

Contact Text (contact_text)

• Type: Textarea
• Required: No
• Description: Introductory paragraph below the heading
• Default: "Get in touch with us. We are here to help and answer any questions you may have."
• Example: "We're here to help. Reach out to us with any questions or inquiries."

Contact Information Fields

Contact Info Heading (contact_info_heading)

• Type: Text
• Required: No
• Max Length: 255 characters
• Description: Section title for contact information
• Default: "Get In Touch"
• Example: "Contact Details", "How to Reach Us"

Contact Address (contact_address)

• Type: Text
• Required: No
• Max Length: 500 characters
• Description: Full physical address of your organization
• Example: "Panchshil Square, Shedepar Road, Deori, Gondia, Maharashtra - 441901"
• Display: Shows with a location pin icon

Contact Phone (contact_phone)

• Type: Text
• Required: No
• Max Length: 50 characters
• Description: Primary phone number
• Example: "+91 9834754391", "+1 (555) 123-4567"
• Display: Shows with a phone icon and clickable tel: link
• Tip: Use international format for clarity

Contact Email (contact_email)

• Type: Email
• Required: No
• Max Length: 255 characters
• Description: Primary email address
• Example: "contact@example.com"
• Display: Shows with an envelope icon and clickable mailto: link

Contact Email 2 (contact_email_2)

• Type: Email
• Required: No
• Max Length: 255 characters
• Description: Secondary or alternate email address
• Example: "support@example.com", "info@example.com"
• Display: Shows below primary email if provided

Business Hours Fields

Contact Business Hours 1 (contact_business_hours_1)

• Type: Text
• Required: No
• Max Length: 255 characters
• Description: First line of business hours
• Example: "Monday - Friday: 9:00 AM - 5:00 PM"
• Display: Shows with a clock icon

Contact Business Hours 2 (contact_business_hours_2)

• Type: Text
• Required: No
• Max Length: 255 characters
• Description: Second line of business hours
• Example: "Saturday: 10:00 AM - 2:00 PM"

Contact Business Hours 3 (contact_business_hours_3)

• Type: Text
• Required: No
• Max Length: 255 characters
• Description: Third line of business hours
• Example: "Sunday: Closed"

Location Map Fields

Contact Map Iframe (contact_map_iframe)

• Type: Textarea (HTML)
• Required: No
• Description: Google Maps embed iframe code
• Format: Complete iframe HTML including opening and closing tags
• Example: <iframe src="https://www.google.com/maps/embed?pb=..." width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
• Display: Renders as an interactive map in an aspect-video container
• Note: The iframe is rendered using {!! !!} to allow HTML

Contact Form Fields

Contact Form Heading (contact_form_heading)

• Type: Text
• Required: No
• Max Length: 255 characters
• Description: Heading displayed above the contact form
• Default: "Send Us a Message"
• Example: "Contact Form", "Get In Touch", "Send Your Inquiry"

Contact Form Subject (contact_form_subject)

• Type: Text
• Required: No
• Max Length: 255 characters
• Description: Email subject line for form submissions
• Example: "New Contact Form Submission", "Website Inquiry"
• Note: This subject line is used when sending email notifications

Form Field Configuration

The contact form includes the following fields (not editable through settings):

Name Field:

• Required field
• Validates for non-empty input
• Placeholder: "John Doe"

Email Field:

• Required field
• Validates email format using regex
• Placeholder: "john@example.com"

Phone Field:

• Optional field
• No specific format validation
• Placeholder: "+1 (555) 123-4567"

Subject Field:

• Required dropdown field
• Predefined options:
  • General Inquiry
  • Customer Support
  • Sales Inquiry
  • Partnership
  • Feedback
  • Other

Message Field:

• Required textarea
• Minimum length: 10 characters
• Rows: 5
• Placeholder: "Tell us how we can help you..."

Captcha:

• Integrated using <x-captcha /> component
• Prevents automated spam submissions
• Required for form submission

Permissions

The Contact Us Page module uses the following permission:

• landing-page.view: Can view and edit the Contact Us page settings

Note: This permission is shared with the Landing Page and About Us Page modules. Users with this permission can access all special page management interfaces.

Email Notifications

When a visitor submits the contact form:

1. Form data is validated on both client and server side
2. Captcha is verified to prevent spam
3. Contact message is saved to the database
4. Email notification is sent to configured email address(es)
5. Success message is displayed to the visitor
6. Admin can view submissions in Dashboard > Contact Messages

Email includes:

• Sender name and email
• Phone number (if provided)
• Selected subject
• Message content
• Submission timestamp

Tips and Best Practices

• Keep Information Current: Regularly update contact details, especially if phone numbers or addresses change
• Test Contact Form: Periodically submit test messages to ensure email delivery is working
• Monitor Business Hours: Update hours for holidays, special events, or seasonal changes
• Verify Map Location: Ensure the embedded map shows the correct location and is easily visible
• Use Professional Email: Provide business email addresses rather than personal ones
• Respond Promptly: Check contact form submissions regularly and respond in a timely manner
• Clear Communication: Write clear, welcoming text that encourages visitors to reach out
• Multiple Contact Methods: Provide various ways to contact you (phone, email, form)
• Accessibility: Ensure all contact information is readable and accessible
• Mobile Testing: Verify the contact page displays correctly on mobile devices
• Spam Protection: Keep captcha enabled to prevent automated spam submissions
• Privacy Consideration: Add a privacy policy link near the contact form if collecting personal data
• Time Zone Clarity: Include timezone in business hours if serving multiple regions
• Emergency Contact: Consider adding an emergency contact number if applicable
• Social Media: Link to social media profiles in the footer for additional contact options

Troubleshooting

Problem: Changes not appearing on the Contact Us page

Solution:

• Verify you clicked "Save Changes" and saw a success message
• Clear your browser cache and hard refresh (Ctrl+F5 or Cmd+Shift+R)
• Check that you're viewing the correct URL (/pages/contact-us)
• Verify the page is not cached by your server or CDN
• Check browser console for JavaScript errors
• Try viewing in an incognito/private browser window

Problem: Contact form submissions not being received

Solution:

• Check email configuration in .env file (MAIL_* settings)
• Verify SMTP credentials are correct
• Test email functionality using Laravel's mail testing tools
• Check spam/junk folders for form submission emails
• Review server logs for email sending errors
• Ensure the recipient email address is valid
• Check that the mail queue is running if using queued emails
• Verify firewall isn't blocking outgoing SMTP connections

Problem: Google Maps not displaying

Solution:

• Verify you pasted the complete iframe code including <iframe> tags
• Check that the iframe src URL is valid and accessible
• Ensure the map embed URL hasn't expired
• Try generating a new embed code from Google Maps
• Check browser console for iframe loading errors
• Verify your site's Content Security Policy allows Google Maps iframes
• Test the iframe code in a simple HTML file to isolate the issue

Problem: Captcha not working or blocking legitimate submissions

Solution:

• Verify captcha service (reCAPTCHA, hCaptcha, etc.) is properly configured
• Check API keys in .env file are correct
• Ensure captcha service is not blocked by browser extensions
• Test in a different browser or incognito mode
• Review captcha service dashboard for error logs
• Check that JavaScript is enabled in the browser
• Verify the captcha component is properly rendered in the form

Problem: Form validation errors not displaying correctly

Solution:

• Check browser console for JavaScript errors
• Verify validation messages are defined in language files
• Ensure CSS for error styling is loaded
• Test with different input to trigger specific validation rules
• Check that Laravel validation rules match frontend validation
• Clear browser cache and reload the page
• Review the form submission response in browser developer tools

Problem: Business hours or contact info not showing on page

Solution:

• Verify the fields are not empty in the settings
• Check that the frontend template uses the correct setting keys
• Ensure get_setting() helper function is working correctly
• Review the public contact page blade template
• Check for conditional rendering that might hide empty fields
• Verify settings are marked as is_public => true in database
• Clear application cache: php artisan cache:clear

Problem: Permission denied when accessing Contact Us page settings

Solution:

• Contact your administrator to request landing-page.view permission
• Verify your user role has the necessary permissions assigned
• Check that you're logged in with the correct account
• Review the roles and permissions module for your access level
• Ensure your account is active and not suspended
• Check if permission middleware is correctly applied to the route

Problem: Map iframe code gets stripped or sanitized

Solution:

• Verify the field is configured to accept HTML content
• Check that the controller doesn't sanitize iframe tags
• Ensure the blade template uses {!! !!} instead of {{ }} for rendering
• Review any HTML purifier or sanitization middleware
• Test with a simple iframe first to isolate the issue
• Check Content Security Policy headers aren't blocking iframes

Problem: Email addresses or phone numbers not clickable

Solution:

• Verify the frontend template wraps emails in <a href="mailto:..."> tags
• Check that phone numbers use <a href="tel:..."> tags
• Ensure the template is rendering the contact information correctly
• Review the public contact page blade file for proper link formatting
• Test on different devices (some mobile browsers auto-detect contact info)
• Clear browser cache and reload the page

Problem: Form submissions saved but email not sent

Solution:

• Check that email notification is enabled in the controller
• Verify the contact_email setting has a valid email address
• Review mail configuration in .env file
• Check Laravel logs for email sending errors (storage/logs/laravel.log)
• Test email functionality with php artisan tinker and Mail::raw()
• Ensure mail queue worker is running if using queued emails
• Verify SMTP server is accessible and credentials are correct
• Check for rate limiting on your email service provider

Problem: Contact page returns 404 error

Solution:

• Verify the route is defined in routes/web.php
• Check that the SiteController@contact method exists
• Ensure the contact page blade template exists at resources/views/public/pages/contact-us.blade.php
• Clear route cache: php artisan route:clear
• Run php artisan route:list to verify the route is registered
• Check for any middleware that might be blocking access
• Verify web server configuration allows the route