// — index.html (Frontend) —

// — server.js (Backend) —

const express = require(‘express’);
const mysql = require(‘mysql2’);
const cors = require(‘cors’);
const bodyParser = require(‘body-parser’);

const app = express();
app.use(cors());
app.use(bodyParser.json());

// MySQL Database connection (WordPress database settings)
const db = mysql.createConnection({
host: ‘localhost’,
user: ‘wp_user’, // Replace with your WordPress DB username
password: ‘wp_password’, // Replace with your WordPress DB password
database: ‘wordpress’ // Replace with your WordPress DB name
});

db.connect((err) => {
if (err) throw err;
console.log(‘Connected to MySQL Database (WordPress)’);
});

// Create table if it doesn’t exist
const createTableQuery = `
CREATE TABLE IF NOT EXISTS wp_contact_form (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(255) NOT NULL,
phone VARCHAR(20) NOT NULL,
email VARCHAR(255) NOT NULL,
city VARCHAR(100) NOT NULL,
product TEXT NOT NULL,
submitted_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);`;

db.query(createTableQuery, (err) => {
if (err) throw err;
console.log(‘Table wp_contact_form is ready.’);
});

// Handle form submission
app.post(‘/submit-form’, (req, res) => {
const { name, phone, email, city, product } = req.body;
const insertQuery = ‘INSERT INTO wp_contact_form (name, phone, email, city, product) VALUES (?, ?, ?, ?, ?)’;

db.query(insertQuery, [name, phone, email, city, product], (err) => {
if (err) {
console.error(err);
res.status(500).json({ message: ‘Error saving data. Please try again later.’ });
} else {
res.status(200).json({ message: ‘Form submitted successfully!’ });
}
});
});

app.use(express.static(__dirname + ‘/’));

app.listen(3000, () => console.log(‘Server running on http://localhost:3000’));

// — How to Run —
// 1. Ensure MySQL is running and accessible.
// 2. Update DB credentials in the connection config.
// 3. Save HTML as `index.html` and backend as `server.js`.
// 4. Run `npm init -y`.
// 5. Install dependencies: `npm install express mysql2 cors body-parser`.
// 6. Start server: `node server.js`.
// 7. Visit `http://localhost:3000` to test the form.

// ✅ The form now features a modern, responsive design tailored for WordPress with a fully functional multi-select product field. Data is stored securely in the WordPress MySQL database with real-time submission feedback.