Asked ChatGPT to create Ajax PHP contact form!

I remember years ago you had to do a lot of research to come up wih AJAX PHP Contact Form, well.. anyway at least i had to because coding or web design are not really something i do every day and when i need something more then just designing elements with CSS i have to turn to the world wide web!

Obviously it’s not 90’s anymore and possibilities are endless, a lot less knowledge is required these days and just with bit of interest and using tools what are widely available you can really do anything you want!

Latest hype “ChatGPT” by OpenAi is actually pretty interesting and easy to use tool and can help you in many ways, below is just a simple AJAX PHP contact form created by as they say “AI” and i took not more then a minute for it to come up with it, all i had to ask was: Make AJAX PHP contact form, see tresult below.

Contact form HTML

<!-- The contact form HTML -->
<form id="contact-form" method="post">
  <label for="name">Name:</label><br>
  <input type="text" name="name"><br>
  <label for="email">Email:</label><br>
  <input type="email" name="email"><br>
  <label for="message">Message:</label><br>
  <textarea name="message"></textarea><br>
  <button type="submit" value="Submit">Submit</button>
</form>

<!-- A message to display after the form is submitted -->
<div id="message"></div>

<!-- The JavaScript to handle the form submission -->
<script>
  // Get the form element
  var form = document.getElementById('contact-form');

  // Listen for the submit event
  form.addEventListener('submit', function(event) {
    event.preventDefault();

    // Create a new XMLHttpRequest object
    var xhr = new XMLHttpRequest();

    // Set the callback function
    xhr.onreadystatechange = function() {
      if (xhr.readyState === XMLHttpRequest.DONE) {
        if (xhr.status === 200) {
          // If the request was successful, display a message
          document.getElementById('message').innerHTML = 'Thank you for your message!';
        } else {
          // If the request was unsuccessful, display an error message
          document.getElementById('message').innerHTML = 'An error occurred. Please try again.';
        }
      }
    };

    // Open the request
    xhr.open('POST', '/path/to/send-email.php', true);

    // Set the content type
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

    // Send the request
    xhr.send(new FormData(form));
  });
</script>

PHP code (send-email.php)

<?php

// Get the form data
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];

// Set the email recipient and subject
$to = 'recipient@example.com';
$subject = 'New message from contact form';

// Build the email message
$message = "Name: $name\n\nEmail: $email\n\nMessage:\n$message";

// Send the email
mail($to, $subject, $message);

?>

Didn’t test that code but i presume since it’s written by AI it should be valid!!! 

Any questions about it… feel free to ask. Link below for ChatGPT