Contact us form with dynamic routing

A Contact Us form with dynamic routing is a form that allows users to submit inquiries or requests, and dynamically routes the data to the appropriate department or team based on certain conditions. This feature can help improve communication efficiency by directing the inquiries to the right team members, ensuring faster responses and better management of requests.

Below is a step-by-step guide to create a Contact Us form with dynamic routing.

Step 1: Define Form Fields

The Contact Us form will need to gather specific information from users. The key form fields can include:

• Name: The user’s full name.
• Email: The user’s contact email.
• Phone Number: The user’s phone number (optional).
• Message Type: Dropdown or radio buttons to select the type of inquiry (e.g., General Inquiry, Support Request, Sales Inquiry).
• Message: A text box where users can write their message.
• Department/Team Selection: Based on the type of inquiry, dynamically route the form to the correct department (e.g., support, sales, general).

Step 2: Plan the Routing Logic

The dynamic routing will be based on the selection of the Message Type or any other factors that help route the request appropriately. For example:

• Support Request → Routes to the Support Team.
• Sales Inquiry → Routes to the Sales Team.
• General Inquiry → Routes to a General Inquiries Department or Team.

This can be achieved using conditional logic to assign recipients based on user input.

Step 3: Create the Contact Us Form

The HTML code for the form will be fairly straightforward. You can use dropdown menus or radio buttons for users to select the message type.

HTML (Form Structure)

<form id="contactForm" onsubmit="submitForm(event)">
    <h3>Contact Us</h3>
    <label for="name">Full Name:</label>
    <input type="text" id="name" name="name" required>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>

    <label for="phone">Phone Number:</label>
    <input type="tel" id="phone" name="phone">

    <label for="messageType">Message Type:</label>
    <select id="messageType" name="messageType" required>
        <option value="general">General Inquiry</option>
        <option value="support">Support Request</option>
        <option value="sales">Sales Inquiry</option>
    </select>

    <label for="message">Message:</label>
    <textarea id="message" name="message" required></textarea>

    <button type="submit">Submit</button>
</form>

Step 4: Implement Dynamic Routing Logic

Using JavaScript, you can implement the logic to determine where the form data should be routed based on the selected message type.

JavaScript (Dynamic Routing Logic)

function submitForm(event) {
    event.preventDefault(); // Prevent default form submission

    const form = document.getElementById('contactForm');
    const formData = new FormData(form);

    // Get the message type selected by the user
    const messageType = formData.get('messageType');

    // Define the routing logic based on message type
    let recipientEmail = '';

    switch (messageType) {
        case 'support':
            recipientEmail = 'support@company.com';
            break;
        case 'sales':
            recipientEmail = 'sales@company.com';
            break;
        case 'general':
            recipientEmail = 'info@company.com';
            break;
        default:
            recipientEmail = 'info@company.com'; // Default case
    }

    // Prepare the email body with form data
    const emailBody = `
        Name: ${formData.get('name')}
        Email: ${formData.get('email')}
        Phone: ${formData.get('phone')}
        Message: ${formData.get('message')}
    `;

    // Now you would typically send this data via an API, email service, or store it in a database.
    // Example API call (using fetch):
    fetch('https://your-api-endpoint.com/send-email', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            recipient: recipientEmail,
            subject: `${messageType.charAt(0).toUpperCase() + messageType.slice(1)} from ${formData.get('name')}`,
            body: emailBody
        })
    })
    .then(response => response.json())
    .then(data => {
        alert('Your message has been sent successfully.');
        form.reset();
    })
    .catch(error => {
        alert('There was an error sending your message.');
        console.error('Error:', error);
    });
}

Step 5: Backend API or Email Service

The form will need to send the data to a backend service that can process the email or route it to the appropriate department. This could be done using:

• Email API: Services like SendGrid, Mailgun, or Amazon SES can be used to send emails programmatically.
• Backend Server: If you have a backend server, you can process the form data, validate it, and send an email using SMTP.

Here’s an example of sending email using Node.js (for the backend):

Node.js (Backend Example)

const nodemailer = require('nodemailer');

const transporter = nodemailer.createTransport({
    service: 'gmail',
    auth: {
        user: 'your-email@gmail.com',
        pass: 'your-email-password'
    }
});

function sendEmail(data) {
    const mailOptions = {
        from: 'your-email@gmail.com',
        to: data.recipient,
        subject: data.subject,
        text: data.body
    };

    transporter.sendMail(mailOptions, (error, info) => {
        if (error) {
            console.log('Error sending email: ', error);
        } else {
            console.log('Email sent: ' + info.response);
        }
    });
}

// Example of calling this function with data
sendEmail({
    recipient: 'support@company.com',
    subject: 'Support Request from John Doe',
    body: 'Name: John Doe\nEmail: john.doe@example.com\nMessage: My app is not working.'
});

Step 6: Confirmation & UX Enhancements

After the user submits the form, provide feedback that the submission was successful. This can be achieved with:

• Thank You Message: Show a confirmation message, indicating that the form was submitted successfully.
• Error Handling: Show a user-friendly error message if something goes wrong, such as if the email fails to send.

Example:

.then(response => response.json())
.then(data => {
    alert('Your message has been sent successfully.');
    form.reset(); // Clear the form
})
.catch(error => {
    alert('There was an error sending your message. Please try again.');
});

Step 7: Optional Features

You can enhance the Contact Us form with the following:

• CAPTCHA Integration: Prevent spam by integrating CAPTCHA.
• User Authentication: If the form is part of a user account system, pre-fill certain fields such as the user’s name or email.
• File Upload: Allow users to upload files (e.g., screenshots) along with their message.
• Live Chat Integration: Offer live chat support as an alternative to the form.