# How To Make Working Contact Form With JavaScript

1. **HTML Structure**:

* Create an HTML file (e.g., `contact.html`) with a basic structure:

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Contact Form</title>
</head>
<body>
    <!--form here -->
<form id="contact-form" method="POST" action="sendmail.php">
    <div class="form-row form-error" style="display:none;"></div>
    <div class="form-row">
        <label for="contact-form-name">Name:</label>
        <input id="contact-form-name" class="form-input" type="text" name="name" required>
    </div>
    <div class="form-row">
        <label for="contact-form-email">Email:</label>
        <input id="contact-form-email" class="form-input" type="email" name="email" required>
    </div>
    <div class="form-row">
        <label for="contact-form-phone">Phone:</label>
        <input id="contact-form-phone" class="form-input" type="tel" name="phone">
    </div>
    <div class="form-row">
        <label for="contact-form-message">Message:</label>
        <textarea id="contact-form-message" class="form-input" name="message" required></textarea>
    </div>
    <button type="submit">Submit</button>
</form>
 
</body>
</html>

```

2. **CSS Styling**:

* Add CSS code to the `<head>` tag to style the form:

```css
.form-row {
    margin-bottom: 10px;
}
.form-input {
    display: block;
}
.form-error {
    color: red;
}

```

3. **Server-Side Processing (PHP)**:

* Create a PHP file (e.g., `sendmail.php`) to handle form data processing.
* In `sendmail.php`, check if the request method is POST and validate the required form variables (name, email, and message).
* If all variables are present, use the data to send an email:

```php
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    if (!empty($_POST['name']) && !empty($_POST['email']) && !empty($_POST['message'])) {
        $name = $_POST["name"];
        $email = $_POST["email"];
        $phone = $_POST["phone"];
        $message = $_POST["message"];

        $to = "your@email.com"; // Replace with your email address
        $subject = "New Contact Form Submission";
        $body = "Name: {$name}\nEmail: {$email}\nPhone: {$phone}\nMessage: {$message}";

        // Use PHP mail() function to send the email
        mail($to, $subject, $body);
    }
}
?>

```

Remember to replace `"your@email.com"` with your actual email address.

**Conclusion**: Follow these steps to create a functional contact form using HTML, JavaScript, and PHP. 📧


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://howto.atharvgyan.com/how-to-make-working-contact-form-with-javascript.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
