Contact Form Troubleshooting Guide

Common Issues and Solutions

1. "There was an error connecting to the server" Message

This error appears when the JavaScript fetch request fails to connect to the server. Here are possible causes and solutions:

Incorrect API Endpoint URL

Make sure the URL in your fetch request is correct:

// Use a relative URL if the API is on the same domain
const response = await fetch('/api/messages', {
  // ...
});

// Or use the full URL if it's on a different domain
const response = await fetch('https://your-actual-domain.com/api/messages', {
  // ...
});

CORS Issues

If your form is hosted on a different domain than your API, you might encounter CORS (Cross-Origin Resource Sharing) issues.

Solutions:

• Host the form on the same domain as the API
• Configure CORS on your server to allow requests from your form's domain

Network or Server Issues

The server might be down or there might be network connectivity issues.

Solutions:

• Check if your server is running
• Verify network connectivity
• Check server logs for errors

2. API Key or Account ID Issues

If you're using an API key or account ID, make sure it's valid and correctly configured:

// Using an account ID in the header
fetch('/api/messages', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'x-account-id': 'your-valid-account-id'  // Make sure this is valid
  },
  // ...
});

3. Testing the API Directly

You can test the API directly using tools like curl, Postman, or the browser's developer tools:

// Example curl command
curl -X POST \
  -H "Content-Type: application/json" \
  -H "x-account-id: your-account-id" \
  -d '{"sender_first_name":"Test","sender_last_name":"User","sender_email":"[email protected]","content":"Test message"}' \
  https://your-domain.com/api/messages

4. Debugging with Console Logs

Add more detailed error logging to help identify the issue:

try {
  const response = await fetch('/api/messages', {
    // ...
  });
  
  const result = await response.json();
  console.log('API Response:', result);
  
  // ...
} catch (error) {
  console.error('Fetch Error:', error);
  // ...
}

Enhanced Form Example

Here's a more robust version of the form with better error handling:

<script>
  document.getElementById('contactForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    
    // Show loading state
    const submitButton = this.querySelector('button[type="submit"]');
    const originalButtonText = submitButton.textContent;
    submitButton.disabled = true;
    submitButton.textContent = 'Sending...';
    
    // Hide previous messages
    document.getElementById('successMessage').style.display = 'none';
    document.getElementById('errorMessage').style.display = 'none';
    
    // Get form values
    const firstName = document.getElementById('firstName').value;
    const lastName = document.getElementById('lastName').value;
    const email = document.getElementById('email').value;
    const phone = document.getElementById('phone').value;
    const company = document.getElementById('company').value;
    const message = document.getElementById('message').value;
    
    // Create request payload
    const data = {
      sender_first_name: firstName,
      sender_last_name: lastName,
      sender_email: email,
      sender_phone: phone,
      company_name: company,
      content: message
    };
    
    try {
      // Use a relative URL if the API is on the same domain
      const response = await fetch('/api/messages', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'x-account-id': 'your-account-id' // Replace with your actual account ID
        },
        body: JSON.stringify(data)
      });
      
      // Check if the request was successful
      if (!response.ok) {
        throw new Error(`HTTP error! Status: ${response.status}`);
      }
      
      const result = await response.json();
      console.log('API Response:', result);
      
      if (result.success) {
        // Show success message
        document.getElementById('successMessage').style.display = 'block';
        document.getElementById('contactForm').reset();
      } else {
        // Show error message from API
        document.getElementById('errorMessage').style.display = 'block';
        document.getElementById('errorMessage').textContent = 
          result.error || 'There was an error sending your message. Please try again.';
      }
    } catch (error) {
      console.error('Fetch Error:', error);
      
      // Show detailed error message
      document.getElementById('errorMessage').style.display = 'block';
      document.getElementById('errorMessage').textContent = 
        'There was an error connecting to the server. Please try again later. ' +
        (error.message ? `(${error.message})` : '');
    } finally {
      // Reset button state
      submitButton.disabled = false;
      submitButton.textContent = originalButtonText;
    }
  });
</script>

Need More Help?

If you continue to experience issues, please check the following:

1. Server logs for any API errors
2. Browser console for JavaScript errors
3. Network tab in browser developer tools to see the actual request and response

For additional assistance, please contact your system administrator or developer with the specific error details.