Submit Form Data
geiffy
Posted messages
15
Status
Member
-
jordane45 Posted messages 30426 Registration date Status Moderator Last intervention -
jordane45 Posted messages 30426 Registration date Status Moderator Last intervention -
Bonjour,
I created an author website that includes a "contact" page with an HTML form. I am currently stuck on sending the data from this form. I should mention that I am not a seasoned developer, but a novice relying on tutorials to code. Could I therefore get help with finalizing this form? Thank you in advance for your assistance.
Here is the HTML form page linked with a CSS page:
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Contact</title>
<meta charset="utf-8"/>
<meta http-equiv="X_UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="fichier-css/page-menu.css">
<link rel="stylesheet" href="fichier-css/contact.css">
<link rel="stylesheet" href="fichier-css/contact-style.css">
<meta name="viewport" content="width=device=width, initial-scale=1">
<meta name="auteur" content="François de Calielli">
<meta name="description" content="page de contact"/>
<meta name="reply-to" content="decalielli@gmail.com">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<div id="logo">
<img src="fichier-images/logo_atypic.jpg" alt="Le logo de mon site d'auteur"/>
<img src="fichier-images/Atypical_autoedition.jpg" alt="L'entête du site"/>
</div>
<body>
<div id="barre-menu">
<nav>
<label for="menu-mobile" class="menu-mobile">Menu</label>
<input type="checkbox" id="menu-mobile" role="button">
<ul>
<li class="menu-index"><a href="index.html">Accueil</a></li>
<li class="menu-a_propos"><a href="a_propos.html">A propos de moi</a></li>
<li class="menu-livres"><a href="livres.html">Mes livres</a>
<ul class="submenu">
<li><a href="romans.html">Les romans</a></li>
<li><a href="essais.html">Les essais</a></li>
<li><a href="poesies.html">Les poésies</a></li>
<li><a href="theatre.html">Les pièces de théâtre</a></li>
</ul>
</li>
<li class="menu-contact"><a href="contact.html">Contact</a></li>
<li class="menu-merci"><a href="merci.html">Merci!</a></li>
</ul>
</li>
</nav>
</div>
</body>
</html>
<html>
<body>
<div id="colonne-gauche">
<ul>
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v12.0" nonce="oFaS9Zcl"></script>
<div class="fb-page" data-href="https://www.facebook.com/decalielli/atypical.autoedition" style="margin-top: 40px" data-tabs="timeline,events,messages" data-width="340" data-height="500" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/decalielli/atypical.autoedition" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/decalielli/atypical.autoedition">Tribune d'auteurs</a></blockquote></div>
<div style="height:33px; width:98px; display: block; margin-right: auto; margin-left: auto; margin-top: 30px" id="link">
<a href="http://facebook.com/francois.decalielli.902" title="Suivez-moi sur facebook!"><img src="fichier-images/suivez-moi_facebook.png" /></a>
</div>
</ul>
</div>
<html>
<body>
<div id="contenu">
<form>
<h1>Formulaire de contact</h1>
<div class="separation"></div>
<div class="corps-formulaire"></div>
<div class="gauche">
<div style="margin-top: 20px" class="groupe">
<label style="margin-bottom: 5px" for="prenom">Prénom</label>
<input style="padding: 15px 15px 15px 10px; margin-left: 145px; margin-top: 10px" type="text" minlength="2" maxlength="24" placeholder="Nom" required/>
<div style="margin-top: -40px; margin-left: 20px" class="icone">
<i class="fa fa-user fa-lg fa-fw" aria-hidden="true"></i>
</div>
</div>
<div style="margin-top: 20px" class="groupe">
<label style="margin-bottom: 10px" for="email">E-mail</label>
<input style="padding: 15px 15px 15px 10px; margin-left: 145px" type="text" placeholder="Email"/>
<div style="margin-top: -45px; margin-left: 20px" class="icone">
<i class="fa fa-envelope-open fa-lg fa-fw" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="droite">
<div style="margin-top: 20px" class="groupe">
<label style="margin-bottom: 10px; margin-left: 10px" for="message">Message</label>
<textarea style="padding-top: 5px; margin-left: 135px; padding-left: 10px" name="message" id="message" cols="30" rows="20" placeholder="Saisissez ici ..." required></textarea>
</div>
</div>
<div class="pied-formulaire">
<button>Envoyer le message</button>
</div>
</form>
</body>
</hml>
</div>
<div id="footer">
</div>
</body>
</html>
Configuration: Windows / Chrome 97.0.4692.99
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Additionally, I retrieved a "php" page from a tutorial for sending the form that I do not know how to link with this "html" page. Is it operational by the way?
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------
<?php
// recipient is your email address. To send to multiple recipients, separate them with a comma
$destinataire = 'decalielli@gmail.com';
// copy? (send a copy to the visitor)
$copie = 'oui'; // 'yes' or 'no'
// Confirmation messages for the email
$message_envoye = "Your message has been successfully received!";
$message_non_envoye = "The email failed to send, please try again.";
// Error messages for the form
$message_erreur_formulaire = "You must first <a href=\"../index.html#contact\">submit the form</a>.";
$message_formulaire_invalide = "Check that all fields are correctly filled out and that the email is error-free."
// Check if the form has been submitted
if (!isset($_POST['fname']) || !isset($_POST['lname']) || !isset($_POST['email']) || !isset($_POST['subject']) || !isset($_POST['message']))
{
// form not submitted
echo '<p>'.$message_erreur_formulaire.'</p>';
var_dump(isset($_POST['fname']));
var_dump(isset($_POST['email']));
var_dump(isset($_POST['subject']));
var_dump(isset($_POST['message']));
}
else
{
/*
* this function serves to clean and store a text
*/
function Rec($text)
{
$text = htmlspecialchars(trim($text), ENT_QUOTES);
if (1 === get_magic_quotes_gpc())
{
$text = stripslashes($text);
}
$text = nl2br($text);
return $text;
};
/*
* This function serves to check an email's syntax
*/
function IsEmail($email)
{
$value = preg_match('/^(?:[\w\!\#\$\%\&\'\*\+\-\/\=\?\^\`\{\|\}\~]+\.)*[\w\!\#\$\%\&\'\*\+\-\/\=\?\^\`\{\|\}\~]+@(?:(?:(?:[a-zA-Z0-9_](?:[a-zA-Z0-9_\-](?!\.)){0,61}[a-zA-Z0-9_-]?\.)+[a-zA-Z0-9_](?:[a-zA-Z0-9_\-](?!$)){0,61}[a-zA-Z0-9_]?)|(?:\[(?:(?:[01]?\d{1,2}|2[0-4]\d|25[0-5])\.){3}(?:[01]?\d{1,2}|2[0-4]\d|25[0-5])\]))$/', $email);
return (($value === 0) || ($value === false)) ? false : true;
}
// form submitted, we get all fields.
$prenom = (isset($_POST['fname'])) ? Rec($_POST['fname']) : '';
$email = (isset($_POST['email'])) ? Rec($_POST['email']) : '';
$message = (isset($_POST['message'])) ? Rec($_POST['message']) : '';
// We will check the variables and the email ...
$email = (IsEmail($email)) ? $email : ''; // either the email is empty if erroneous, or it equals the entered email
if (($prenom != '') && ($email != '') && ($message != ''))
{
// all 4 variables are filled, we generate and send the email
$headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'From:'.$prenom.' <'.$email.'>' . "\r\n" .
'Reply-To:'.$email. "\r\n" .
'Content-Type: text/plain; charset="utf-8"; DelSp="Yes"; format=flowed '."\r\n" .
'Content-Disposition: inline'. "\r\n" .
'Content-Transfer-Encoding: 7bit'." \r\n" .
'X-Mailer:PHP/'.phpversion();
// send a copy to the visitor?
if ($copie == 'oui')
{
$cible = $destinataire.','.$email;
}
else
{
$cible = $destinataire;
};
// Replacement of certain special characters
$message = str_replace("'","'",$message);
$message = str_replace("’","'",$message);
$message = str_replace(""",'"',$message);
$message = str_replace('<br>','',$message);
$message = str_replace('<br />','',$message);
$message = str_replace("<","<",$message);
$message = str_replace(">",">",$message);
$message = str_replace("&","&",$message);
// Send the email
if (mail($cible, $objet, $message, $headers))
{
echo '<p>'.$message_envoye.'</p>'."\n";
}
else
{
echo '<p>'.$message_non_envoye.'</p>'."\n";
};
}
else
{
// one of the 3 variables (or more) is empty ...
echo '<p>'.$message_formulaire_invalide.' <a href="#body">Return to the form</a></p>'."\n";
};
}; // end of if (!isset($_POST['envoi']))
?><br><br>
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Thank you infinitely again for this precious assistance.
I created an author website that includes a "contact" page with an HTML form. I am currently stuck on sending the data from this form. I should mention that I am not a seasoned developer, but a novice relying on tutorials to code. Could I therefore get help with finalizing this form? Thank you in advance for your assistance.
Here is the HTML form page linked with a CSS page:
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Contact</title>
<meta charset="utf-8"/>
<meta http-equiv="X_UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="fichier-css/page-menu.css">
<link rel="stylesheet" href="fichier-css/contact.css">
<link rel="stylesheet" href="fichier-css/contact-style.css">
<meta name="viewport" content="width=device=width, initial-scale=1">
<meta name="auteur" content="François de Calielli">
<meta name="description" content="page de contact"/>
<meta name="reply-to" content="decalielli@gmail.com">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<div id="logo">
<img src="fichier-images/logo_atypic.jpg" alt="Le logo de mon site d'auteur"/>
<img src="fichier-images/Atypical_autoedition.jpg" alt="L'entête du site"/>
</div>
<body>
<div id="barre-menu">
<nav>
<label for="menu-mobile" class="menu-mobile">Menu</label>
<input type="checkbox" id="menu-mobile" role="button">
<ul>
<li class="menu-index"><a href="index.html">Accueil</a></li>
<li class="menu-a_propos"><a href="a_propos.html">A propos de moi</a></li>
<li class="menu-livres"><a href="livres.html">Mes livres</a>
<ul class="submenu">
<li><a href="romans.html">Les romans</a></li>
<li><a href="essais.html">Les essais</a></li>
<li><a href="poesies.html">Les poésies</a></li>
<li><a href="theatre.html">Les pièces de théâtre</a></li>
</ul>
</li>
<li class="menu-contact"><a href="contact.html">Contact</a></li>
<li class="menu-merci"><a href="merci.html">Merci!</a></li>
</ul>
</li>
</nav>
</div>
</body>
</html>
<html>
<body>
<div id="colonne-gauche">
<ul>
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v12.0" nonce="oFaS9Zcl"></script>
<div class="fb-page" data-href="https://www.facebook.com/decalielli/atypical.autoedition" style="margin-top: 40px" data-tabs="timeline,events,messages" data-width="340" data-height="500" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/decalielli/atypical.autoedition" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/decalielli/atypical.autoedition">Tribune d'auteurs</a></blockquote></div>
<div style="height:33px; width:98px; display: block; margin-right: auto; margin-left: auto; margin-top: 30px" id="link">
<a href="http://facebook.com/francois.decalielli.902" title="Suivez-moi sur facebook!"><img src="fichier-images/suivez-moi_facebook.png" /></a>
</div>
</ul>
</div>
<html>
<body>
<div id="contenu">
<form>
<h1>Formulaire de contact</h1>
<div class="separation"></div>
<div class="corps-formulaire"></div>
<div class="gauche">
<div style="margin-top: 20px" class="groupe">
<label style="margin-bottom: 5px" for="prenom">Prénom</label>
<input style="padding: 15px 15px 15px 10px; margin-left: 145px; margin-top: 10px" type="text" minlength="2" maxlength="24" placeholder="Nom" required/>
<div style="margin-top: -40px; margin-left: 20px" class="icone">
<i class="fa fa-user fa-lg fa-fw" aria-hidden="true"></i>
</div>
</div>
<div style="margin-top: 20px" class="groupe">
<label style="margin-bottom: 10px" for="email">E-mail</label>
<input style="padding: 15px 15px 15px 10px; margin-left: 145px" type="text" placeholder="Email"/>
<div style="margin-top: -45px; margin-left: 20px" class="icone">
<i class="fa fa-envelope-open fa-lg fa-fw" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="droite">
<div style="margin-top: 20px" class="groupe">
<label style="margin-bottom: 10px; margin-left: 10px" for="message">Message</label>
<textarea style="padding-top: 5px; margin-left: 135px; padding-left: 10px" name="message" id="message" cols="30" rows="20" placeholder="Saisissez ici ..." required></textarea>
</div>
</div>
<div class="pied-formulaire">
<button>Envoyer le message</button>
</div>
</form>
</body>
</hml>
</div>
<div id="footer">
</div>
</body>
</html>
Configuration: Windows / Chrome 97.0.4692.99
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Additionally, I retrieved a "php" page from a tutorial for sending the form that I do not know how to link with this "html" page. Is it operational by the way?
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------
<?php
// recipient is your email address. To send to multiple recipients, separate them with a comma
$destinataire = 'decalielli@gmail.com';
// copy? (send a copy to the visitor)
$copie = 'oui'; // 'yes' or 'no'
// Confirmation messages for the email
$message_envoye = "Your message has been successfully received!";
$message_non_envoye = "The email failed to send, please try again.";
// Error messages for the form
$message_erreur_formulaire = "You must first <a href=\"../index.html#contact\">submit the form</a>.";
$message_formulaire_invalide = "Check that all fields are correctly filled out and that the email is error-free."
// Check if the form has been submitted
if (!isset($_POST['fname']) || !isset($_POST['lname']) || !isset($_POST['email']) || !isset($_POST['subject']) || !isset($_POST['message']))
{
// form not submitted
echo '<p>'.$message_erreur_formulaire.'</p>';
var_dump(isset($_POST['fname']));
var_dump(isset($_POST['email']));
var_dump(isset($_POST['subject']));
var_dump(isset($_POST['message']));
}
else
{
/*
* this function serves to clean and store a text
*/
function Rec($text)
{
$text = htmlspecialchars(trim($text), ENT_QUOTES);
if (1 === get_magic_quotes_gpc())
{
$text = stripslashes($text);
}
$text = nl2br($text);
return $text;
};
/*
* This function serves to check an email's syntax
*/
function IsEmail($email)
{
$value = preg_match('/^(?:[\w\!\#\$\%\&\'\*\+\-\/\=\?\^\`\{\|\}\~]+\.)*[\w\!\#\$\%\&\'\*\+\-\/\=\?\^\`\{\|\}\~]+@(?:(?:(?:[a-zA-Z0-9_](?:[a-zA-Z0-9_\-](?!\.)){0,61}[a-zA-Z0-9_-]?\.)+[a-zA-Z0-9_](?:[a-zA-Z0-9_\-](?!$)){0,61}[a-zA-Z0-9_]?)|(?:\[(?:(?:[01]?\d{1,2}|2[0-4]\d|25[0-5])\.){3}(?:[01]?\d{1,2}|2[0-4]\d|25[0-5])\]))$/', $email);
return (($value === 0) || ($value === false)) ? false : true;
}
// form submitted, we get all fields.
$prenom = (isset($_POST['fname'])) ? Rec($_POST['fname']) : '';
$email = (isset($_POST['email'])) ? Rec($_POST['email']) : '';
$message = (isset($_POST['message'])) ? Rec($_POST['message']) : '';
// We will check the variables and the email ...
$email = (IsEmail($email)) ? $email : ''; // either the email is empty if erroneous, or it equals the entered email
if (($prenom != '') && ($email != '') && ($message != ''))
{
// all 4 variables are filled, we generate and send the email
$headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'From:'.$prenom.' <'.$email.'>' . "\r\n" .
'Reply-To:'.$email. "\r\n" .
'Content-Type: text/plain; charset="utf-8"; DelSp="Yes"; format=flowed '."\r\n" .
'Content-Disposition: inline'. "\r\n" .
'Content-Transfer-Encoding: 7bit'." \r\n" .
'X-Mailer:PHP/'.phpversion();
// send a copy to the visitor?
if ($copie == 'oui')
{
$cible = $destinataire.','.$email;
}
else
{
$cible = $destinataire;
};
// Replacement of certain special characters
$message = str_replace("'","'",$message);
$message = str_replace("’","'",$message);
$message = str_replace(""",'"',$message);
$message = str_replace('<br>','',$message);
$message = str_replace('<br />','',$message);
$message = str_replace("<","<",$message);
$message = str_replace(">",">",$message);
$message = str_replace("&","&",$message);
// Send the email
if (mail($cible, $objet, $message, $headers))
{
echo '<p>'.$message_envoye.'</p>'."\n";
}
else
{
echo '<p>'.$message_non_envoye.'</p>'."\n";
};
}
else
{
// one of the 3 variables (or more) is empty ...
echo '<p>'.$message_formulaire_invalide.' <a href="#body">Return to the form</a></p>'."\n";
};
}; // end of if (!isset($_POST['envoi']))
?><br><br>
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Thank you infinitely again for this precious assistance.
4 answers
Good evening Piratabord,
Thank you for the clarification. Indeed, you had provided it in your previous comments. Sorry! So I did what you told me, then tried to send a form to the address I specified in the PHP. However, it redirects me to the PHP file page. This must be because my site is still local and, therefore, it's a matter of SMTP as you mentioned in your comment. Furthermore, it does not display any of the error messages indicated in the PHP file. Is that normal?
Best regards.
Thank you for the clarification. Indeed, you had provided it in your previous comments. Sorry! So I did what you told me, then tried to send a form to the address I specified in the PHP. However, it redirects me to the PHP file page. This must be because my site is still local and, therefore, it's a matter of SMTP as you mentioned in your comment. Furthermore, it does not display any of the error messages indicated in the PHP file. Is that normal?
Best regards.
Hello Piratabord,
I need to configure Gmail's SMTP and therefore insert the following settings to send emails from the form on my site:
- Configuration type: SMTP
- SMTP Server: mail.flexone.cloud
- Port: 587
- Security: STARTTLS
- Username: my email address
- Password: the password for my email account.
I searched for where to place these in the PHP you gave me, and I really can't see where to do it. If you have a moment, could you please clarify this for me? Thank you in advance.
Best regards.
I need to configure Gmail's SMTP and therefore insert the following settings to send emails from the form on my site:
- Configuration type: SMTP
- SMTP Server: mail.flexone.cloud
- Port: 587
- Security: STARTTLS
- Username: my email address
- Password: the password for my email account.
I searched for where to place these in the PHP you gave me, and I really can't see where to do it. If you have a moment, could you please clarify this for me? Thank you in advance.
Best regards.
Thank you so much for your invaluable help, as I am just a beginner in this area as you may have noticed. Yes, you are right! The tutorials are very varied and sometimes quite random. So we end up with codings that don't work. I copied the HTML that you took the time to redo for my contact page. It's great! As a result, I used your advice to redo my other pages with more operational HTML.
Regarding the processing of the form in PHP, I copied it into a file that I named "fichier-post_contact.php". However, I don't know the "link" that needs to be made to insert it into the "head" of the HTML page. I assume it is different from the "link" for a CSS file.
My author website is not yet hosted because it is not yet ready.
So thank you in advance for your help regarding my problem with the PHP file.
Geiffy
For the link of the PHP file with the HTML page, you need to put the path of the PHP file in the action attribute of the form tag.
If your HTML file is in the same folder as your PHP file for example, you should type action="fichier-post_contact.php" like this: