<!DOCTYPE html>
<html lang="en">
<head>
<meta
charset="UTF-8">
<meta
name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Customer Form</title>
<style>
body { font-family: Arial, sans-serif; }
.container { max-width: 600px; margin: 0 auto; padding: 20px; }
.form-group { margin-bottom: 15px; }
label { display: block; margin-bottom: 5px; }
select,
input[type="text"], textarea { width: 100%; padding: 8px; }
button { padding: 10px 15px; background-color:
#007BFF; color: white; border: none; cursor: pointer;
}
</style>
</head>
<body>
<div
class="container">
<h2>Customer Form</h2>
<form
id="customerForm">
<div
class="form-group">
<label for="question1">Question 1:</label>
<select id="question1" name="question1">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
</div>
<div
class="form-group">
<label for="question2">Question 2:</label>
<select id="question2" name="question2">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
</div>
<button
type="submit">Submit</button>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$('#customerForm').on('submit',
function(e) {
e.preventDefault();
var formData = $(this).serialize();
$.ajax({
type:
'POST',
url: 'send_email.php',
data: formData,
success: function(response) {
alert('Form submitted successfully!');
},
error:
function() {
alert('There was an error submitting the form.');
}
});
});
</script>
</body>
</html>