PHP: контактная информация

заполняем контактную форму с помощью PHP

2024-09-25 dr.Brain

время чтения 3 мин.

Photo by Patrick Robert Doyle on Unsplash

Реализуем простую форму с контактной информацией (contact form) с помощью PHP, HTML, CSS, Bootstrap, jQuery и AJAX.

Пользователь сможет заполнить контактные данные и отправить их на email владельца сайта.

Создаем базу данных

Создаем базу данных contact_form_db и таблицу для хранения информации о пользователях.

CREATE DATABASE contact_form_db;
USE contact_form_db;

CREATE TABLE contact_form_db (
   id INT AUTO_INCREMENT PRIMARY KEY,
   name VARCHAR(100) NOT NULL,
   email VARCHAR(100) NOT NULL,
   message TEXT NOT NULL,
   created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

Структура проекта

simple-contact-form/
├── css/
│   └── styles.css
├── js/
│   └── script.js
├── config.php
├── db.php
├── index.php
├── process_form.php
├── README.md
└── send_email.php

Обновляем реквизиты базы данных

config.php

<?php
   define('DB_HOST', 'localhost');
   define('DB_NAME', 'contact_form_db');
   define('DB_USER', 'root'); // Change if necessary
   define('DB_PASS', ''); // Change if necessary

Устанавливаем соединение с базой данных

<?php
   include 'config.php';
   // Database configuration
   $dsn = 'mysql:host='.DB_HOST.';dbname='.DB_NAME;
   $options = [
       PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
       PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
   ];

   try {
       $pdo = new PDO($dsn, DB_USER, DB_PASS, $options);
       $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
   } catch (PDOException $e) {
       die('Database connection failed: ' . $e->getMessage());
   }

Создем HTML-структуру контактной формы

index.php

<!DOCTYPE html>
<html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Contact Form</title>
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
       <link rel="stylesheet" href="css/styles.css">
   </head>
   <body>
       <div class="container">
           <h2>Contact Us</h2>
           <form id="contactForm">
               <div class="form-group">
                   <label for="name">Name:</label>
                   <input type="text" class="form-control" id="name" name="name" required>
               </div>
               <div class="form-group">
                   <label for="email">Email:</label>
                   <input type="email" class="form-control" id="email" name="email" required>
               </div>
               <div class="form-group">
                   <label for="message">Message:</label>
                   <textarea class="form-control" id="message" name="message" rows="5" required></textarea>
               </div>
               <button type="submit" class="btn btn-primary">Submit</button>
           </form>
       </div>
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
       <script src="js/script.js"></script>
   </body>
</html>

Устанавливаем стили

css/styles.css

body {
    padding-top: 50px;
}
.container {
    max-width: 600px;
    margin: auto;
}

AJAX

js/script.js

$(document).ready(function() {
    $('#contactForm').on('submit', function(event) {
        event.preventDefault();

        $.ajax({
            url: 'process_form.php',
            type: 'POST',
            data: $(this).serialize(),
            success: function(response) {
                alert('Message sent successfully!');
                $('#contactForm')[0].reset();
            },
            error: function(xhr, status, error) {
                alert('An error occurred: ' + error);
            }
        });
    });
});

ОБрабатываем отправку данных формы

process_form.php

require 'db.php';

try {
    if ($_SERVER['REQUEST_METHOD'] == 'POST') {
        $name = $_POST['name'];
        $email = $_POST['email'];
        $message = $_POST['message'];

        $stmt = $pdo->prepare("INSERT INTO messages (name, email, message) VALUES (:name, :email, :message)");
        $stmt->execute(['name' => $name, 'email' => $email, 'message' => $message]);

        require 'send_email.php';

        $email_body = "Name: $name\nEmail: $email\nMessage:\n$message";
        mail($to, $subject, $email_body, $headers);

        echo 'Message sent successfully!';
    }
} catch (PDOException $e) {
    echo 'Database error: ' . $e->getMessage();
}

Настраиваем почту

send_email.php

<?php
$to = 'youremail@example.com';
$subject = 'New Contact Form Message';
$headers = 'From: webmaster@example.com' . "\r\n" .
           'Reply-To: webmaster@example.com' . "\r\n" .
           'X-Mailer: PHP/' . phpversion();

Объяснение

config.php: подключаемся к базе данных через PDO, при неудаче возвращаем сообщение об ошибке.
index.php: создаем структуру контактной формы, стилизуем её с помощью Bootstrap, добавляем JQuery для обработки отправки данных формы через AJAX.
js/script.js: c помощью AJAX динамически отправляем данные формы в базу данных, не перезагружая страницу. Извлекаем сведения из базы данных и выводим сообщения для пользователей.
process_form.php: сохраняем информацию в базе данных и готовим данные к отправке по электронной почте.
send_email.php: с помощью PHPMailer отправляем email владельцу сайта.
css/style/css: устанавливаем основные стили контактной формы.

Спасибо за внимание.

Перевод статьи MD ARIFUL HAQUE “PHP crash course: Simple Contact Form”