<h1>Contact Form with HTML, Mail, and PHP</h1>

<p>Contact forms are an integral part of any business website. They provide a convenient way for visitors to get in touch with the company and inquire about their products or services. In this article, we will be discussing how to create a contact form using HTML, Mail, and PHP.</p>

<h2>Why should you have a contact form on your website?</h2>

<p>A contact form is an essential element of a business website for several reasons:</p>

<ul>
  <li>Easy communication: Contact forms offer a user-friendly way for visitors to reach out to your business. By simply filling out a form, they can send their inquiries or feedback without the hassle of opening their email client or making a phone call.</li>
  <li>Organization: Contact forms help businesses organize incoming inquiries in a structured manner. These forms usually ask for specific details like name, email address, phone number, and the purpose of the message, which allows businesses to categorize and respond to each inquiry more efficiently.</li>
  <li>Spam prevention: Contact forms often include security measures, such as CAPTCHA, to prevent automated bots from submitting spam messages. This helps businesses avoid cluttering their email inbox with irrelevant or malicious content.</li>
</ul>

<h2>Creating the HTML contact form</h2>

<p>The first step in building a contact form is to create the necessary HTML markup. Let's take a look at a basic example:</p>

```html
<form action="contact.php" method="POST">
  <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>
  <input type="submit" value="Submit">
</form>
```

<p>In the code above, we have a <code>form</code> element that specifies the action URL as "contact.php". This is where the form data will be sent when the user submits the form. The <code>method</code> attribute is set to "POST", which means that the form data will be sent in the body of the HTTP request.</p>

<p>Inside the form, we have several <code>label</code> elements paired with corresponding <code>input</code> or <code>textarea</code> elements. Each <code>input</code> or <code>textarea</code> element has a unique <code>id</code> attribute and a <code>name</code> attribute, which will be used to retrieve the submitted values on the server-side.</p>

<p>The <code>required</code> attribute in the input fields ensures that the user must fill in those fields before submitting the form.</p>

<h2>Sending the form data using PHP</h2>

<p>Now that we have our HTML form ready, let's move on to the PHP script that will handle the form submission and send the data via email. Create a new file called "contact.php" and add the following code:</p>

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

  $to = "info@example.com";
  $subject = "New inquiry from $name";
  $body = "Name: $name\nEmail: $email\n\n$message";

  if (mail($to, $subject, $body)) {
    $success = true;
  } else {
    $success = false;
  }
}
?>

<!DOCTYPE html>
<html>
<head>
  <title>Contact Form Submission</title>
</head>
<body>
  <?php if (isset($success) && $success): ?>
    <h3>Thank you for your message!</h3>
  <?php else: ?>
    <h3>Oops, something went wrong.</h3>
  <?php endif; ?>
</body>
</html>
```

<p>In the PHP code above, we first check if the request method is "POST" to ensure that the form has been submitted. We then retrieve the values of the name, email, and message fields from the <code>$_POST</code> superglobal and store them in variables.</p>

<p>Next, we define the recipient email address, the subject of the email (which includes the name of the person who submitted the form), and the body of the email (which includes the name, email, and message from the form).</p>

<p>We use the <code>mail()</code> function to send the email. If the email is sent successfully, we set the <code>$success</code> variable to <code>true</code>. Otherwise, it is set to <code>false</code>.</p>

<p>Finally, we have an HTML section that displays a success message if the <code>$success</code> variable is set to <code>true</code>. If not, an error message is displayed.</p>

<h2>Styling the contact form</h2>

<p>To make the contact form visually appealing, you can apply some CSS styling. Here's an example:</p>

```html
<style>
  form {
    width: 400px;
    margin: 0 auto;
  }

  label, input, textarea {
    display: block;
    margin-bottom: 10px;
  }

  input[type="submit"] {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }

  input[type="submit"]:hover {
    background-color: #45a049;
  }
</style>
```

<p>This CSS code applies some basic styling to the form and its elements. The form is given a width of 400 pixels and centered with the help of the <code>margin: 0 auto;</code> property. The <code>label</code>, <code>input</code>, and <code>textarea</code> elements are displayed as blocks and have a margin-bottom of 10 pixels to create a vertical spacing between them.</p>

<p>The <code>input[type="submit"]</code> styles the submit button with a green background color, white text, and some padding. On hover, the background color changes slightly.</p>

<h2>Conclusion</h2>

<p>In this article, we learned how to create a contact form using HTML, Mail, and PHP. The HTML form provides an interface for users to submit their inquiries or feedback, which is then handled by a PHP script. The script retrieves the form data and sends it via email. By incorporating a contact form into your business website, you can facilitate communication with your customers and streamline the inquiry process.</p>

Discover "contact html mail php" topic on Cloodo