phaten-audio/en/docs/common/customer_form.md

<style>
.message-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
}

.message-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 400px;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    text-align: center;
}

.message-content h3 {
    margin: 0 0 15px 0;
    color: #333;
    font-size: 18px;
}

.message-content p {
    margin: 15px 0;
    color: #666;
    line-height: 1.5;
    white-space: pre-line;
}

.message-content .success {
    color: #27ae60;
}

.message-content .error {
    color: #e74c3c;
}

.message-btn {
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 14px;
    margin-top: 10px;
    transition: background-color 0.3s ease;
}

.message-btn:hover {
    background-color: #2980b9;
}

.close-message {
    float: right;
    cursor: pointer;
    font-size: 24px;
    color: #666;
    transition: color 0.3s ease;
}

.close-message:hover {
    color: #333;
}
</style>

<!-- Message Modal -->
<div id="messageModal" class="message-modal">
    <div class="message-content">
        <span class="close-message">&times;</span>
        <h3 id="messageTitle">Notice</h3>
        <p id="messageText"></p>
        <button id="messageBtn" class="message-btn">OK</button>
    </div>
</div>

<div class="custForm">
<form id="customerForm">
<div>
<h4>Company Name:</h4>
<input type="input" id="company" name='company' placeholder="Company Name" />
</div>
<div>
<h4>Email Address:</h4>
<input type="email" id="email" name='email' placeholder="Email Address" />
</div>
<div>
<h4>Subject:</h4>
<select id="topic" name='topic'>
<option value="">Please select a subject</option>
<option value="Get Product Firmware">Get Product Firmware</option>
<option value="Consult Solutions">Consult Solutions</option>
<option value="Get Quote">Get Quote</option>
</select>
</div>
<div>
<h4>Message:</h4>
<textarea id="content" name="content" rows="8" placeholder="Please describe your question in detail">
</textarea>
</div>
<div style="text-align: right;">
<input class="button" type="submit" value="Send" id="submitBtn" />
</div>
</form>
</div>

<script>
// Define API base URL
const baseUrl = 'https://api.phaten-audio.com/api';

// Get form elements
const customerForm = document.getElementById("customerForm");
const submitBtn = document.getElementById("submitBtn");
const companyInput = document.getElementById("company");
const emailInput = document.getElementById("email");
const topicSelect = document.getElementById("topic");
const contentTextarea = document.getElementById("content");

// Get message modal elements
const messageModal = document.getElementById("messageModal");
const messageTitle = document.getElementById("messageTitle");
const messageText = document.getElementById("messageText");
const messageBtn = document.getElementById("messageBtn");
const closeMessage = document.getElementsByClassName("close-message")[0];

// Show custom message modal
function showMessage(title, text, type = 'info') {
    messageTitle.textContent = title;
    messageText.textContent = text;
    
    // Set style based on type
    messageText.className = type === 'success' ? 'success' : (type === 'error' ? 'error' : '');
    
    messageModal.style.display = "block";
}

// Close message modal
function closeMessageModal() {
    messageModal.style.display = "none";
}

// Bind close events
closeMessage.onclick = closeMessageModal;
messageBtn.onclick = closeMessageModal;

// Close modal when clicking outside
window.onclick = function(event) {
    if (event.target == messageModal) {
        closeMessageModal();
    }
}

// Validate email format
function validateEmail(email) {
    const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(String(email).toLowerCase());
}

// Validate form fields
function validateForm() {
    let isValid = true;
    let errorMessage = "";

    // Validate company name
    if (!companyInput.value.trim()) {
        errorMessage += "Please enter company name\n";
        isValid = false;
    }

    // Validate email
    if (!emailInput.value.trim()) {
        errorMessage += "Please enter email address\n";
        isValid = false;
    } else if (!validateEmail(emailInput.value.trim())) {
        errorMessage += "Please enter a valid email address\n";
        isValid = false;
    }

    // Validate subject
    if (!topicSelect.value) {
        errorMessage += "Please select a subject\n";
        isValid = false;
    }

    // Validate message content
    if (!contentTextarea.value.trim()) {
        errorMessage += "Please fill in the message content\n";
        isValid = false;
    }

    if (!isValid) {
        showMessage('Input Error', errorMessage, 'error');
    }

    return isValid;
}

// Handle form submission
customerForm.onsubmit = function(event) {
    // Prevent default form submission behavior
    event.preventDefault();
    
    // Validate form
    if (!validateForm()) {
        console.log('Form validation failed');
        return false;
    }

    // Disable submit button
    submitBtn.disabled = true;
    submitBtn.value = "Submitting...";

    // Prepare submission data
    const formData = {
        company: companyInput.value.trim(),
        email: emailInput.value.trim(),
        topic: topicSelect.value,
        content: contentTextarea.value.trim()
    };

    // Send AJAX request
    fetch(`${baseUrl}/fty/addNewConsult`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(formData)
    })
    .then(response => response.json()) // Parse JSON first
    .then(data => {
        if (data.code && data.code === 2000) {
            showMessage('Submit Success', 'Submitted successfully! We will contact you as soon as possible.', 'success');
            customerForm.reset(); // Clear form
            topicSelect.value = ""; // Reset dropdown
        } else {
            showMessage('Submit Failed', data.msg || 'Submission failed, please try again later!', 'error');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showMessage('Network Error', 'Request failed, please try again later!', 'error');
    })
    .finally(() => {
        // Restore submit button
        submitBtn.disabled = false;
        submitBtn.value = "Send";
    });
    
    return false;
}
</script>