Using Contact Forms

Title: Using Contact Forms
Category: website-editor

Where to find this: Services → Website Editor tab

Contact forms allow website visitors to contact you directly from your site. They automatically capture leads, send you notifications, and can sync with your CRM.

What Are Contact Forms?

A contact form is a component you add to your website to collect visitor information:

• Name and email (required)
• Department or inquiry type
• Custom message
• Any additional fields you configure

When someone submits a form, you're notified immediately and can follow up.

Why Use Contact Forms?

Capture Leads

Turn website visitors into potential customers:

• Collect contact information
• Understand their needs (message field)
• Qualify leads (department selection)
• Build your customer database

Professional Communication

Replace "email us at info@yourbusiness.com" with a structured form:

• Looks more professional
• Captures structured data
• Reduces spam
• Easier to track inquiries

CRM Integration

Forms can sync with HubSpot CRM:

• Automatically create contacts
• Track lead source (your website)
• Trigger follow-up workflows
• Measure conversion rates

Adding a Contact Form to Your Page

Step 1: Open the Website Editor

1. Go to Services → Website Editor tab
2. Select the page where you want the form (usually Contact page)
3. Click Edit to open the editor

Step 2: Drag the Contact Form Component

1. In the left sidebar, find the Components tab
2. Scroll to the forms section
3. Drag Contact Form onto your page
4. Position it where you want (usually full-width in a container)

Step 3: Configure Form Fields

Click the form to open settings:

Default Fields:

• Name (text input, required)
• Email (email input, required)
• Department (dropdown: Sales, Billing, Support, General)
• Message (textarea, required)

Step 4: Customize Appearance

Style the form to match your branding:

Form Title:

• Set a title (e.g., "Get in Touch" or "Contact Us")
• Choose font size and weight
• Set title color

Button Style:

• Button text (default: "Send")
• Button color (use your brand color)
• Button shape (rounded, square, pill)

Layout:

• Full-width or contained
• Spacing between fields
• Background color (transparent or card-like)

Step 5: Set Up Notifications

Configure who receives form submissions:

1. In form settings, find Notifications section
2. Enter your email address (submissions sent here)
3. Optionally add multiple email addresses (comma-separated)
4. Choose notification format (immediate or digest)

Step 6: Save and Test

1. Click Save Changes
2. Click Preview to test the form
3. Submit a test form entry
4. Verify you received the notification email

Managing Form Submissions

Viewing Submissions

Access all form submissions:

1. Go to Services → Forms
2. See all submissions with:
   • Submitter name and email
   • Message content
   • Submission date/time
   • Department selected
3. Filter by date range or department
4. Export to CSV for analysis

Responding to Inquiries

For each submission:

1. Click to view full details
2. Click the email address to compose a reply
3. Mark as "Responded" to track follow-ups
4. Add internal notes (visible only to you)

Notification Email

When someone submits a form, you receive:

• Subject: "New Contact Form Submission from [Name]"
• Body: All form fields and their values
• Reply-to: Set to the submitter's email (easy to reply directly)

Customizing Form Fields

Adding Custom Fields

Beyond the default fields, you can add:

Phone Number:

• Input type: tel
• Validation: phone format
• Required or optional

Company:

• Input type: text
• Placeholder: "Your Company Name"
• Optional

Budget Range:

• Input type: dropdown
• Options: Under $1,000 | $1,000-$5,000 | $5,000-$10,000 | $10,000+
• Helps qualify leads

Preferred Contact Method:

• Input type: radio buttons
• Options: Email | Phone | Text
• Helps personalize follow-up

How Did You Hear About Us:

• Input type: dropdown
• Options: Google | Social Media | Referral | Advertisement | Other
• Tracks marketing effectiveness

Field Types Available

Field Type	Use Case	Example
Text	Short answers	Name, company
Email	Email addresses	Contact email
Tel	Phone numbers	(555) 123-4567
Textarea	Long messages	Comments, descriptions
Select (dropdown)	Single choice from list	Department, budget range
Radio	Single choice with visible options	Preferred contact method
Checkbox	Multiple choices or agreements	Newsletter opt-in, agree to terms

Field Properties

For each field, configure:

• Label: What the user sees ("Your Name")
• Placeholder: Example text in the field
• Required: Must be filled before submission
• Validation: Email format, phone format, minimum length

Integrating with HubSpot CRM

If you've connected HubSpot, forms can automatically create contacts.

Enabling HubSpot Sync

1. Connect HubSpot from Services → Integrations tab
2. In form settings, find CRM Integration section
3. Toggle "Sync to HubSpot" ON
4. Map form fields to HubSpot properties:
   • Name → First Name / Last Name
   • Email → Email
   • Message → Notes
   • Department → Custom property

What Gets Synced

When sync is enabled:

• New contact created in HubSpot (if email doesn't exist)
• Existing contact updated (if email already exists)
• Form submission logged as activity
• Lead source set to "Website Contact Form"
• All custom fields added to contact properties

Viewing in HubSpot

After submission:

1. Log in to your HubSpot account
2. Go to Contacts
3. Find the contact by email
4. View their timeline to see the form submission
5. Contact properties include all form data

Form Success Messages

Customize what visitors see after submitting:

Default Success Message

"Thank you! We've received your message and will get back to you soon."

Custom Success Messages

Personalize by department:

• Sales inquiry: "Thanks! A sales rep will contact you within 24 hours."
• Support request: "We've received your support ticket. Expected response: 2-4 hours."
• General inquiry: "Thanks for reaching out! We typically respond within one business day."

Redirect Option

Instead of a message, redirect to another page:

• Thank you page with additional info
• Special offer page
• Booking page (for consultations)
• Download page (for lead magnets like PDFs)

Form Spam Protection

Forms include built-in spam protection:

Honeypot Fields

Invisible fields that bots fill out (humans can't see them):

• If filled, submission is automatically rejected
• No CAPTCHA needed
• Transparent to users

Rate Limiting

Prevents spam submissions:

• Max 3 submissions per IP per hour
• Prevents bot attacks
• Legitimate users unaffected

Email Validation

Ensures valid email addresses:

• Format checking (must contain @)
• Domain verification (MX record check)
• Disposable email detection (blocks temporary emails)

Form Analytics

Track form performance:

Submission Metrics

View in your dashboard:

• Total submissions (all time)
• Submissions this month
• Submissions by department
• Response rate (marked as responded ÷ total)

Conversion Tracking

If you have Google Analytics connected:

• Form submissions tracked as "conversions"
• See which traffic sources lead to form fills
• Track form completion rate
• Identify drop-off points

Multiple Forms

You can add multiple contact forms:

Different Forms for Different Pages

Homepage: General inquiry form
Services Page: Service-specific form with "Service Interested In" dropdown
Pricing Page: Quote request form with budget field
Support Page: Support ticket form with priority dropdown

Routing by Department

Direct inquiries to the right team:

• Sales forms → sales@yourbusiness.com
• Support forms → support@yourbusiness.com
• Billing forms → billing@yourbusiness.com

Configure email routing in form settings.

Best Practices

Keep It Simple

Ask only for essential information:

• Name and email (required)
• Purpose/department (helps routing)
• Message (what they need)

Too many fields reduce submissions.

Clear Labels

Use plain language:

• "Your Name" not "Full Legal Name"
• "Email Address" not "Electronic Mail"
• "How can we help?" not "Inquiry Type"

Mobile-Friendly

Forms are responsive by default:

• Fields stack vertically on mobile
• Large touch targets for buttons
• Easy to type on small screens

Test on your phone to verify.

Fast Follow-Up

Respond quickly to inquiries:

• Within 24 hours (ideally within a few hours)
• Personalize your response (reference their message)
• Set expectations (when they'll hear back, next steps)

Thank You Page

Consider redirecting to a thank you page that:

• Confirms submission received
• Sets expectations (response time)
• Offers next steps (book a call, browse services)
• Includes social proof (testimonials)

Troubleshooting

Not Receiving Notifications

Check:

1. Email address is correct in form settings
2. Emails not in spam folder
3. Notification emails enabled (toggle in settings)

Solution: Send a test submission and check spam filter settings.

Form Not Submitting

Check:

1. All required fields are filled
2. Email format is valid
3. Internet connection is stable

Solution: Check browser console for errors, contact support if issue persists.

HubSpot Not Syncing

Check:

1. HubSpot connection is active (check Services → Integrations tab)
2. Sync toggle is enabled in form settings
3. Field mapping is configured correctly

Solution: Reconnect HubSpot and verify API permissions.

Spam Submissions

Check:

1. Honeypot protection is enabled
2. Rate limiting is active
3. Email validation is turned on

Solution: All protection features are enabled by default. Contact support if spam continues.

Common Questions

Q: Can I export form submissions?
A: Yes, from Services → Forms, click "Export to CSV" to download all submissions.

Q: How long are form submissions stored?
A: Indefinitely, until you manually delete them.

Q: Can customers attach files in forms?
A: Not currently. For file uploads, direct users to email or use a third-party service.

Q: Can I customize the form design beyond the settings?
A: Yes, using custom CSS in the component settings (Advanced tab).

Q: Do forms work on all devices?
A: Yes, forms are fully responsive and work on desktop, tablet, and mobile.

Q: Can I require acceptance of terms before submission?
A: Yes, add a checkbox field with "I agree to the Terms of Service" and mark it as required.

Q: Can I send autoresponder emails to submitters?
A: Not built-in currently. Use HubSpot workflows for automated follow-ups after sync.

Next Steps

• Connecting HubSpot CRM – Sync form leads to CRM
• Adding Components to Your Page – Learn about other components
• Managing HubSpot Contacts – View and organize your leads