<style>
/* Custom CSS for black font color */
#contact-form {
font-family: Arial, sans-serif;
color: black;
}

#contact-form label {
color: black;
}

#contact-form input, #contact-form textarea {
color: black;
border: 1px solid #ccc;
padding: 8px;
margin-bottom: 10px;
width: 100%;
}

#contact-form button {
background-color: #4CAF50; /* Green button */
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
}

#contact-form button:hover {
background-color: #45a049;
}
</style>

<form id=”contact-form”>
<label for=”name”>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=”message”>Message:</label>
<textarea id=”message” name=”message” required></textarea>

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

<!– Include the JS below to handle form data –>
<script>
document.getElementById(‘contact-form’).addEventListener(‘submit’, function(event) {
event.preventDefault(); // Prevent form from submitting the usual way

// Create JavaScript variables to store the form values
var name = document.getElementById(‘name’).value;
var email = document.getElementById(’email’).value;
var message = document.getElementById(‘message’).value;

// Example of how you can log or send these values
console.log(“Name: ” + name);
console.log(“Email: ” + email);
console.log(“Message: ” + message);

// You can then use these variables for further actions (e.g., AJAX request to send data to a WordPress handler)
// Example of AJAX request to send the form data to WordPress:
var data = {
action: ‘submit_contact_form’,
name: name,
email: email,
message: message,
};

jQuery.post(‘<?php echo admin_url(“admin-ajax.php”); ?>’, data, function(response) {
alert(‘Form submitted successfully!’);
});
});
</script>