✉️ PHP Contact Form Tutorial: Sending Email via XAMPP on Localhost

Summary

Dans cette vidéo tutorielle, l'animateur explique comment créer un formulaire de contact et envoyer un e-mail en utilisant un script PHP sur un serveur local. Il recommande l'utilisation de XAMPP ou un autre logiciel pour fournir un serveur de développement. Le processus implique la création d'un dossier dans htdocs, l'écriture du code HTML pour le formulaire, l'utilisation de Bootstrap pour la mise en forme, et l'écriture du code PHP dans un fichier process.php pour gérer l'envoi de l'e-mail. L'animateur détaille également la configuration nécessaire dans les fichiers php.ini et sendmail.ini pour utiliser Gmail en tant que fournisseur SMTP, y compris la création d'un mot de passe d'application pour l'authentification. La vidéo se termine par un test du formulaire qui fonctionne correctement après les ajustements, montrant un e-mail envoyé avec succès.

Takeaways

• 📝 Créer un formulaire de contact et envoyer un e-mail avec PHP sur localhost sans avoir besoin de le mettre en ligne.
• 🛠️ Utiliser XAMPP ou un autre serveur local pour exécuter le script PHP.
• 📂 Créer un dossier dans le répertoire htdocs de XAMPP pour y placer le projet.
• 🖥️ Utiliser un éditeur de code comme VS Code pour écrire le code HTML et PHP.
• 🔍 Ajouter des champs de formulaire pour le nom, l'e-mail, le sujet et le message.
• 🔄 Utiliser la méthode POST pour envoyer les données du formulaire au serveur.
• 🌐 Inclure le fichier process.php pour gérer le traitement des données envoyées.
• 🎨 Utiliser des CSS de Bootstrap pour styliser le formulaire et l'améliorer graphiquement.
• 📧 Utiliser la fonction mail de PHP pour envoyer l'e-mail avec les informations du formulaire.
• ⚙️ Configurer le fichier php.ini et le fichier sendmail.ini pour activer l'envoi d'e-mail via SMTP.
• 🔑 Créer un mot de passe d'application dans votre compte Google pour l'authentification SMTP.
• 🔄 Redémarrer le serveur après les modifications pour que les changements prennent effet.

Q & A

Quel est le sujet principal de ce tutoriel vidéo ?

Le sujet principal de ce tutoriel est la création d'un formulaire de contact et l'envoi d'un email à l'aide d'un script PHP sur un serveur local comme XAMPP.

Pourquoi utilise-t-on un serveur local pour ce projet ?

On utilise un serveur local pour pouvoir tester et développer le formulaire sans avoir besoin de le télécharger sur un serveur en direct, ce qui est pratique pour les développements et les tests locaux.

Quels sont les logiciels nécessaires pour suivre ce tutoriel ?

Pour suivre ce tutoriel, vous aurez besoin de XAMPP ou un autre logiciel qui fournit un serveur local, ainsi que d'un éditeur de code comme VS Code.

Comment s'appelle le fichier PHP qui traitera les données du formulaire ?

Le fichier PHP qui traitera les données du formulaire s'appelle 'process.php'.

Quels types de champs sont présents dans le formulaire HTML ?

Le formulaire HTML contient des champs pour le nom, l'e-mail, le sujet et le message.

Comment est configuré le bouton d'envoi du formulaire ?

Le bouton d'envoi est configuré en utilisant l'input de type 'submit' avec la valeur 'sent' et le nom 'submit'.

Quelle est la bibliothèque CSS utilisée pour l'aspect du formulaire ?

La bibliothèque CSS utilisée pour l'aspect du formulaire est Bootstrap, qui est intégrée via CDN.

Quels sont les changements nécessaires dans le fichier php.ini pour permettre l'envoi d'e-mail ?

Les changements nécessaires dans le fichier php.ini incluent la modification des paramètres SMTP, SMTP Port, mail from et mail path.

Comment crée-t-on un mot de passe d'application pour l'authentification SMTP via Google ?

Pour créer un mot de passe d'application, on accède au compte Google, on gère le compte, on clique sur la sécurité, on active la vérification en deux étapes, et on crée un mot de passe d'application avec un nom d'application comme 'SMTP'.

Quels sont les erreurs courantes qui peuvent empêcher l'envoi d'e-mail et comment les résoudre ?

Les erreurs courantes incluent la configuration incorrecte du fichier php.ini ou du fichier sendmail, l'absence de l'activation de l'extension SMTP dans PHP, ou des erreurs dans la syntaxe du code. Pour les résoudre, il faut vérifier et ajuster ces configurations et corriger le code si nécessaire.

Comment vérifie-t-on si l'e-mail a été envoyé avec succès après l'avoir configuré ?

On vérifie si l'e-mail a été envoyé en utilisant les informations de test pour remplir le formulaire et en envoyant le formulaire. Si l'e-mail est envoyé avec succès, un message 'email sent' apparaît et on peut vérifier la réception de l'e-mail dans la boîte de réception Gmail.

Outlines

00:00

😀 Création d'un formulaire de contact avec PHP sur Local Host

Dans le premier paragraphe, l'animateur de la vidéo explique qu'il revient avec un nouveau tutoriel pour montrer comment créer un formulaire de contact et envoyer un email en utilisant un script PHP sur un serveur local. Il mentionne que cela peut être fait sans avoir besoin de transférer le formulaire sur un serveur en direct, en utilisant des logiciels tels que XAMPP. Il propose ensuite un aperçu rapide du projet en utilisant un formulaire local avec XAMPP, et il invite les spectateurs à s'abonner à sa chaîne. Il détaille ensuite les étapes pour créer le dossier du projet dans le répertoire htdocs de XAMPP, et comment créer le fichier HTML contenant le formulaire avec des champs pour le nom, l'email, le sujet et le message, ainsi qu'un bouton d'envoi. Il mentionne également l'utilisation de Bootstrap pour l'aspect du formulaire.

05:04

📬 Traitement des données du formulaire et envoi d'email avec PHP

Le deuxième paragraphe décrit le processus de création du fichier process.php nécessaire pour traiter les données du formulaire. L'animateur explique comment vérifier si le formulaire a été soumis en utilisant la variable globale $_SERVER et la clé 'REQUEST_METHOD'. Il détaille ensuite comment récupérer les données des champs du formulaire avec la variable superglobale $_POST. Il montre comment utiliser la fonction mail() de PHP pour envoyer un email contenant les données du formulaire. Il souligne l'importance de configurer correctement le fichier php.ini pour que la fonction mail() fonctionne, en changeant les paramètres SMTP et les détails de l'expéditeur. L'animateur mentionne également la nécessité de configurer le fichier sendmail.ini pour définir le serveur SMTP, le port, le nom d'utilisateur et le mot de passe.

10:06

✅ Configuration de l'envoi d'email avec Gmail et test du formulaire

Dans le troisième paragraphe, l'animateur poursuit la configuration de l'envoi d'email en utilisant Gmail comme fournisseur SMTP. Il explique comment modifier le fichier php.ini pour inclure l'adresse SMTP de Gmail, le port utilisé, l'adresse email de l'expéditeur et le chemin d'accès au fichier sendmail. Il montre également comment créer un mot de passe d'application dans le compte Google pour l'authentification SMTP. L'animateur détaille ensuite les modifications à apporter dans le fichier sendmail.ini, y compris le serveur SMTP, le port, le nom d'utilisateur et le mot de passe d'authentification. Il insiste sur la nécessité de redémarrer le serveur pour que les modifications prennent effet. Enfin, il teste le formulaire une fois les modifications apportées et constate que l'email est envoyé avec succès.

Keywords

💡Tutoriel

Un tutoriel est une leçon ou un guide étape par étape pour enseigner comment effectuer une tâche spécifique. Dans la vidéo, le présentateur revient avec un nouveau tutoriel pour montrer comment créer un formulaire de contact et envoyer un e-mail en utilisant un script PHP sur un serveur local.

💡PHP

PHP est un langage de programmation populaire pour le développement de sites web et des applications web. Dans le script, il est utilisé pour traiter les données du formulaire de contact et pour envoyer un e-mail à partir du serveur local.

💡Serveur local

Un serveur local est une copie d'un serveur web sur une machine locale, utilisée pour le développement et le test des applications web sans avoir besoin d'un serveur en ligne. Le présentateur utilise XAMPP, un logiciel de serveur local, pour démontrer comment envoyer un e-mail avec PHP sans avoir à utiliser un serveur en direct.

💡XAMPP

XAMPP est un ensemble de logiciels gratuits et open source pour la création d'environnements de serveur web locaux. Il inclut Apache, MySQL, PHP et Perl. Dans le tutoriel, XAMPP est utilisé pour simuler un environnement de serveur web local pour le développement du formulaire de contact.

💡Formulaire de contact

Un formulaire de contact est une interface web qui permet aux utilisateurs de soumettre des informations, généralement pour envoyer un message électronique ou des commentaires. Dans le script, le présentateur crée un formulaire de contact qui inclut des champs pour le nom, l'e-mail, le sujet et le message.

💡HTML

HTML (HyperText Markup Language) est le langage de balisage standard pour la création de pages web et autres contenus sur le World Wide Web. Le formulaire de contact est créé en utilisant du code HTML pour structurer les champs de saisie et le bouton d'envoi.

💡CSS

CSS (Cascading Style Sheets) est un langage utilisé pour décrire la présentation d'un document écrit en HTML. Dans le tutoriel, le présentateur utilise Bootstrap, une bibliothèque CSS, pour styliser le formulaire de contact et l'améliorer visuellement.

💡Bootstrap

Bootstrap est un framework front-end open source qui permet de créer des designs de sites web et des interfaces utilisateur de manière rapide et efficace. Le présentateur utilise Bootstrap pour donner un aspect professionnel au formulaire sans avoir à écrire du code CSS personnalisé.

💡SMTP

SMTP (Simple Mail Transfer Protocol) est un protocole utilisé pour envoyer des e-mails à travers Internet. Dans le tutoriel, le SMTP est configuré pour permettre à PHP d'envoyer des e-mails via le compte Gmail du présentateur.

💡Authentification

L'authentification est le processus par lequel un système vérifie l'identité d'un utilisateur. Dans le contexte du tutoriel, l'authentification est utilisée pour s'assurer que seuls les utilisateurs autorisés peuvent envoyer des e-mails via le script PHP.

💡Configuration

La configuration fait référence au processus de paramétrage des logiciels ou des systèmes pour qu'ils fonctionnent de manière appropriée. Dans le script, le présentateur explique comment configurer les fichiers php.ini et sendmail.ini pour activer l'envoi d'e-mails via SMTP avec PHP.

Highlights

Creating a contact form and sending emails using PHP script from localhost without the need for a live server.

Using XAMPP or similar software to provide a local server environment for PHP script execution.

Demonstration of a working contact form using localhost and XAMPP software.

Instructions on creating a folder inside the htdocs directory for the project files.

Using Visual Studio Code or any other preferred code editor for project setup.

Creating an HTML file for the form with POST method for server communication.

Designing the form fields for name, email, subject, and message with placeholders.

Incorporating Bootstrap for styling the form to improve its appearance.

Using predefined Bootstrap classes for input fields and the submit button.

Explanation of the process.php file creation for handling form submission.

Capturing form data using the $_POST global variable in PHP.

Utilizing the mail() function in PHP to send an email with the form data.

Configuring the PHP mail function by modifying the php.ini file for SMTP settings.

Setting up the sendmail.ini file for SMTP server, port, and authentication details.

Generating an application-specific password from Google Account for SMTP authentication.

Restarting the server after making changes to the configuration files to apply them.

Troubleshooting the email sending process by correcting header information in the PHP script.

Verification of a successful email being sent and received in Gmail inbox.

Invitation for viewers to ask questions and subscribe to the channel for more tutorials.

Transcripts

hello everyone how is it going on I'm back again with a new tutorial in this

tutorial I'm going to show how to create a contact from and then send email using

PHP script from your Local Host so you don't need to upload the form in a live

server you can do it using Local Host you just need xampp or any other software

that provide a passy server first of all let's have a quick

look at the demo of the project that we are going to do before that please

subscribe to my channel if you're new to the channel so that you can get all the

updates this is the form as you see here I'm using Local Host uh and I'm using

xampp software so let's put some information

here so it can take a few seconds yeah email sent now let's check the Gmail

inbox should have a new email here yes we see a new email with test subject so

that is what we're going to do without further Ado let's get

started let's create the folder first I'm assuming you are using xampp server so

we'll have to create the folder inside the htdocs let's do

it so it is located inside the C drive and then xampp and then ht

docs here let's create a new projects and let's name it contact

form we'll open it using the vs code you can use uh any other code editor if you

want whatever you have and here let's create the HTML F uh HTML file first

where we'll put the form here let's put some boiler plate

code using the shortcut and let's change the title

to contact

form and in inside the body let's put a container

dip and here we will put the form with the method post because we will send the

post method to the server and here in the action we'll have to put a PHP file

let's name it process.php we'll have to create this file letter now let's put

the fields one by one the first field will be the name so it will be a text

field input text here the name attribute can

be name or full name and let's put a placeholder

here full name then let's copy

it three

times the second one will be email so here the name Will attribute

will be email and the place folder will be email or enter

email and here instead of text it will be

email and the Third Field will be also a text field but it will be subject of the

me of the of the email so here the placeholder enter

subject now the fourth field will be a text area because it is the

message that will be sent to the email so here the name can be

message and the placeholder

enter

message all right now we'll have to uh put the submit button so input

submit here the value can be sent and let's put a

name submit all

right okay now the HTML file is ready but it will look very ugly if you check

it in the browser so you'll have to use some CSS because it is a PHP project I

will not use M CSS so I will use instead I will use the bootstop so let's grab

the Boop CN write bootstop cdn.com in the browser and let's copy the CSS part

we'll just need the HTML code and let's put it inside the

hattech all right so we have the Buddhist STP now we can use the

predefined classes of budhist STP for the field input field we can use the

class we can use the class name form

control and we'll use some margin top four margin top four so let's copy this

class for other

fields here instead of form control we'll have to use a different class

button button primary because it is a button now now we can check it how it

looks so far in the

browser so Local Host then contact form uh actually we'll have to exart the

jamp control panel I forgot to do that so the AP server need to be start

started all right it's looking good now the HTML code or the form is ready we'll

have to send the data that will be put here to the email address so let's go to

the process.php actually we'll have to create the process.php

first process. PHP so here we you'll use the PHP tag first as you know whenever

you'll write PHP cod we'll have to start the PHP tag so here we'll grab the data

first but before that we'll have to check whether or not the form is

submitted so we can do that using a global error variable called

server inside the server the array key will be

request method so if the request method is

post so the if the form is submitted we will grab the data so for example the

First Data will be the name so we can grab the data using the

post error variable here the arror key will be full name as the name attribute

was full name for the name as you see here and let's copy

this um four times so the second field is

email Third Field is

subject and the fourth field is

mze

let's quickly have a look for the confirmation so message subject all

good now we can send the data using the mail function it is a PHP function here

the first argument is the recipient so two where the U the email will be sent

the second field is the subject Third Field is the message

itself and the fourth field is the heers heers basically the information about

the standers now we can put this information into some variables so for

the

two I'll put my email address here you can put your own email address so that

you can check and then subject so we already have subject here so also we

have message here we just need the heater so let's

create another variable

heater and here we will just show the form email

form and the email variable all right now let's change

these two variables

to subject

mess and heers it will be actually

heers okay now we'll put this mail function inside the if statement so that

we can check whether or not the the email is delivered successfully

so if mail function work correctly we'll display a message

saying email sent otherwise else

equal email sending

fil let's check the output in the browser so let's put the information the

test information here

send and here we see a warning also email sending fi that is because we have

not it was expected I expected this warning because I have not configured

the SMTP on the php.ini file and the mail um send mail. file so we'll have to

make some changes on those two files let's look at those two files the first

one is PHP inii which is located inside the PHP folder here the file is

php.ini there is the file so let's open it using notepad and let's search for

mail function here we'll have to change few things first one is SMTP and SMTP

Port sand mail form sand mail PA these four things need to be changed in this

file I have uh save the information in a text file here so we can copy from here

so first one smtp.gmail.com so we are using Gmail as our SMTP provider so here

in SMTP it will be smtp.gmail.com and the port will be

587 and let's remove the semicolon from Sand mail from

here we'll have to put our email address from where the email will be sent so my

email address in this case

is so I created this email address for testing purpose uh let's put here so

you'll have to put your own email address

here and here let's remove the semicolon from Sand mail path and let's copy the

path from here so if you use Windows and if you if you installed jamp in the C

drive the path will be look like this if you install jamp in another folder in

that case you'll have to change the name of the

drive so let's copy the path here okay php.ini file changes are done

now we'll have to change the sand mail. file which is located

inside the sand mail folder folder here we have sand mail.

let's open it and here we'll have to change again the SMTP server then SMTP

port and then username authentication username

and authentication password these four things we'll have to change so let's

again copy from here so SMTP gmail.com is the SMTP

server Port is

587 then we have here authentication username which is the email address that

you used in the php.ini file so let's copy the email address from

there and then the password for this password we'll have to create a

application password from our Google account so let's go to the Google

account uh click on here on the on your profile then you should see manage your

Google account let's click on here and then click on the

security uh and then click on the twostep verification if you have already

not added twep verification please add it before doing this so let's click on

twep verification

apption here I'll have to put my

password now click

next so here you should see an option called app password at the bottom of the

page let's click here and click a app app name so in this case let's I have I

have already have a app password name SMTP let's name it SMTP 2 and click

create so you should see a password like this just copy the

password click done and put this password in the

authenication password and click

save now let's check the form

again okay we we'll have to do another thing we'll have to restart the server

so click stop and then click Start now if you

check uh you still see email sending fil I must have done something wrong in

the code let's check the code yes in the heers instead of from it

is form so let's fix it it should be from and also uh let's put a column and

let's save it and let's check again in the

browser now it should work

fine yes email sent let's check the Gmail

inbox there you go you see a new email here so that means everything is working

fine let me know in the comments if you have any questions in your mind also if

you enjoy the tutorial please hit like and please don't foret don't forget to

subscribe thank you