Chatbot

View All Docs
+

Getting Started (3)

+

Ai Configuration (5)

+

Woocommerce Integration (6)

+

Chatbot Implementation (3)

+

Customization (2)

+

Conversation Management (2)

−

Chatbot Menu Settings (5)

+

Performance And Optimization (1)

+

Security And Privacy (5)

Contact Form Integration

Reading Time: 6 minutes

Overview

The Contact Form feature allows your chatbot to collect and process user inquiries efficiently through an integrated contact form system. This premium feature provides a seamless way for visitors to get in touch while maintaining security and spam protection.

Features

  • Easy Integration: Contact form directly integrated into the chatbot interface
  • AI Integration: AI automatically offers the contact form when appropriate and pre-fills it with conversation context
  • Form Pre-fill: AI summarizes the user’s inquiry and pre-fills the message, category, and custom fields
  • File Attachments: Support for image uploads (up to 3 files)
  • Category Dropdown: Customizable dropdown menu for inquiry categorization
  • Custom Field 1: With its label
  • Custom Field 2: With its label
  • Google reCAPTCHA: Built-in spam protection using reCAPTCHA v3
  • Responsive Design: Works seamlessly on both desktop and mobile devices
  • Email Notifications: Automatic email notifications to admin with form submissions
  • Persistent Messages: Contact form success/error messages are preserved across page navigations

Configuration Steps

1. Enable Contact Form

  1. Navigate to WPiko Chatbot → Contact Form Settings
  2. Toggle “Enable Contact Form” to activate the feature
  3. Click “Save Changes”

The AI Integration allows the chatbot to automatically offer the contact form during conversations — no manual instructions needed.

  1. Navigate to WPiko Chatbot → Contact Form Settings
  2. Open the AI Integration accordion section
  3. Toggle Enable AI Contact Form Response to activate
  4. Choose an AI Trigger Behavior:
  • Support-related: AI offers the form when the user needs human assistance, wants to report a problem, submit a complaint, or when the AI cannot adequately help (default)
  • Explicit request only: AI only offers the form when the user explicitly asks to contact support or reach a human
  • Custom: Provide your own custom trigger instructions
  1. Toggle Enable Form Pre-fill (enabled by default) — the AI will summarize the conversation and pre-fill the form fields automatically
  2. Click “Save Changes”

When enabled, the AI will:

  • Detect when the user needs to contact support based on the selected trigger behavior
  • Output a styled Contact Form button in the chat response
  • Pre-fill the form with a summary of the conversation, the best matching category, and any relevant custom field data
  • Write the pre-filled message in the same language the user is communicating in

3. Configure Optional Features

Category Dropdown (Optional)

  1. Enable “Form Dropdown” option
  2. Add dropdown options in the text area (one option per line)
  3. Save changes

Example dropdown options:

General Inquiry
Technical Support
Billing Question
Feature Request

File Attachments (Optional)

  1. Enable “File Attachments” option
  2. Users can attach up to 3 images
  3. Supported formats: JPG, PNG, GIF
  4. Maximum file size: 3MB per image
  1. Enable “Google reCAPTCHA”
  2. Create reCAPTCHA v3 keys
  3. Enter Site Key and Secret Key
  4. Optionally hide reCAPTCHA badge
  5. Save changes

Accessing the Contact Form

There are multiple ways to make the contact form accessible to users:

1. Chatbot Menu Option

  • The contact form appears as an option in the chatbot menu automatically when enabled

2. Custom URL Parameter

Add ?wpiko_contact=open to any page URL to automatically open the chatbot with contact form:

https://yourwebsite.com/page/?wpiko_contact=open

Add a contact form link to your website menu:

  1. Go to Appearance → Menus
  2. Add a Custom Link
  3. Set URL to ?wpiko_contact=open
  4. Set Link Text (e.g., “Contact Us”)

4. AI Integration (Automatic)

When AI Integration is enabled in the Contact Form Settings, the AI automatically offers the contact form during conversations when appropriate. No manual instructions are needed.

The AI will display a styled “Contact Form” button in its response. When the user clicks it, the form opens pre-filled with:

  • A summary of the user’s inquiry (as the message)
  • The best matching category (if dropdown is enabled)
  • Any relevant custom field values (if custom fields are enabled)

5. Manual AI Instructions (Legacy)

If you prefer manual control instead of the automatic AI Integration, you can add instructions directly:

Method 1: Direct Form Opening

Add to Assistant Instructions:

For support inquiries, provide only: Wpiko Form

Method 2: URL Redirect

Add to Assistant Instructions:

For support inquiries, direct users to https://yoursite.com/page/?wpiko_contact=open

Note: When AI Integration is enabled, manual instructions are not needed and should be removed to avoid conflicts.

Contact Form Fields

The form includes the following fields:

  • Name (required)
  • Email (required)
  • Category (if dropdown enabled)
  • Message (required)
  • File Attachments (if enabled)
  • Custom Field 1 (if enabled)
  • Custom Field 2 (if enabled)

Security Features

Form Validation

  • Required field validation
  • Email format validation
  • File type verification
  • File size limits

reCAPTCHA Protection

  • Spam prevention using reCAPTCHA v3
  • Invisible verification process
  • Configurable badge visibility

File Upload Security

  • Restricted file types (images only)
  • File size limits (3MB per file)
  • Secure file handling and cleanup

Email Notifications

When a form is submitted:

  • Admin receives an email notification
  • Email includes:
  • User’s name and email
  • Selected category (if enabled)
  • Message content
  • Any attached files
  • Timestamp and site information

Best Practices

AI Integration

  • Enable AI Integration for the best user experience — it requires no manual setup
  • Use the “Support-related” trigger for most websites
  • Keep Form Pre-fill enabled so users can review and send with minimal effort
  • Remove any manual contact form instructions from your Assistant Instructions when AI Integration is enabled
  • If you have custom fields, give them clear labels — the AI uses the labels to determine what data to pre-fill

reCAPTCHA Implementation

  • Always use reCAPTCHA to prevent spam
  • Keep keys secure and never share them
  • Include privacy policy links when using reCAPTCHA

Dropdown Categories

  • Keep categories clear and concise
  • Use 4-8 categories maximum
  • Order from most to least common

File Attachments

  • Enable if visual context is important
  • Inform users about file restrictions

Troubleshooting

Common Issues and Solutions

Form Not Displaying

  • Verify premium license is active
  • Check if contact form is enabled
  • Clear browser cache and reload

File Upload Issues

  • Verify file type (JPG, PNG, GIF only)
  • Check file size (max 3MB)
  • Ensure proper server permissions

reCAPTCHA Problems

  • Verify correct API keys
  • Check for JavaScript errors
  • Ensure proper domain registration

Email Delivery Issues

  • Check admin email settings
  • Verify server can send emails
  • Check spam folders

AI Contact Form Button Not Appearing

  • Verify AI Integration is enabled in Contact Form Settings
  • Check that both “Enable Contact Form” and “Enable AI Contact Form Response” are toggled on
  • Try starting a new conversation (clear the chat)

Pre-fill Data Not Showing

  • Verify “Enable Form Pre-fill” is toggled on in AI Integration settings
  • Check that dropdown categories match exactly (the AI uses the exact text from your category list)
  • For custom fields, verify they are enabled and have labels set