Créer un formulaire de contact HTML PHP classique

logo-wubijacq-mail-html-php


www.wubijacq.com

Interface de ce formulaire

C' est un formulaire utilisant les balises TABLE, TD, TR. Il n' est pas très mobile-friendly mais il est simple et coloré
c' est celui que j' utilise pour mon site classique




Emploi en France

logo  jooble
annonce Yulia Durand


Les faibles dimensions de son interface permettent de placer ce formulaire n'importe où dans le paragraphe d'une page d' un site classique.
Le formulaire présenté dans cette page est un formulaire de démonstration. Il n'envoie pas les messages, mais vous pouvez y tester le vérificateur Javascript


Niveau débutant +

Code HTML


<head>
<link rel="stylesheet" type="text/css" href='contact.css'>
</head>

<body>
<div class=block>
<form method=POST action=contact.php>
<span class="color">
<table class=center>
<div class=title>Mon formulaire de contact</div>
<tr><td style=text-align:left>&nbsp;Nom*</td>
<td style=text-align:center>
<input style=width:191px type=text name=realname id=name  title="pseudo" >
<div class=error></div>
</td></tr>
<tr><td style=text-align:left>&nbsp;Courriel*</td>
<td style=text-align:center>
<input class=email type=text name=email id=email title="enter a valid adress" value="@">
<div class=error></div>
</td></tr>
<tr><td style=text-align:left>&nbsp;Objet</td>
<td style=text-align:center>
<input style=width:191px type=text name=title title="website ?"></td></tr> <tr>
<td style=text-align:center colspan=2>
Message*<br>
<textarea  style="width:295px;height:120px" name=comments id=comments
onkeyup="Compter(this, this.form.CharRestant);"></textarea>
<div class=error></div>
</td></tr></table></span>
<span class=color> 
<font color=lightblue><small><small>message max:250 caract&egrave;res</small></small></font><br>
<input type="text" name="CharRestant" style="background-color:transparent;border:0px;color:lightblue"
disabled="disabled" size=2>
<input type=submit id=submit value=envoyer >
<a style="text-decoration:none" href="copyleft.htm">
&nbsp;&nbsp;<small><small>
<font color=white>@ copyleft wubijacq.com</small></small></a></font></span>
</form><br>
<span style="width:100%;display:block;text-align:center">
<small>Les champs (*) sont requis</small><br><br></span>
</div>
</body>



Il est possible, pour tester plus vite votre formulaire, d' employer des "STYLE" dans la partie "BODY" de votre code HTML. J' ai laissé volontairement quelques "STYLE" dans mon code
par exemple à "TEXTAREA" où vous pouvez aussi employer des "COLS" et des "ROWS",
disons COLS=38 ROWS=8

Il sera préférable, plus tard, d' employer des "CLASS" à la place des "STYLE"
par exemple dans le champs "Courriel" :
input style="text-align:center;color:blue;width:191px"
est équivalent à
input class=email
en renseignant le style CSS du formulaire:
input.email {
text-align:center;color:blue;width:191px }

dans la partie HEAD de la page HTML ou dans un fichier CSS séparé.

Les fichiers HTML, CSS, PHP, Javascript sont dans le ZIP en bas de cette page

code de ce formulaire coté PHP


Code CSS

j' ai nommé mon fichier "contact.css" dans la partie HEAD de mon fichier HTML

div.block {width:310px;text-align:center;display:block;margin:auto}
span.color
{background:#4e2140;color:#9e934c;width:100%; display:block;}
span.bottom
{width:100%;display:block;text-align:center;font-size:small}
span.max
{background:#4e2140;color:lightblue;width:100%;display:block;font-size:x-small}
table.center {table-layout:auto; width:310px}
td.center {text-align:center }
td.left {text-align:left }
.error
{color:lightgreen;font-size:70%;font-weight:bold}
div
{font-family:Arial, Helvetica, sans-serif;font-weight:bold}
div.title
{font-family:'Bookman Old Style',Bookman,'URW Bookman L','Palatino Linotype',serif;font-size:20px;font-weight:bolder;padding:5px}
input.email {text-align:center;color:blue;width:191px}
input.count { background-color:transparent;border:0px;color:lightblue;font-size:90%}
input.text { width:191px}
a.copy {text-decoration:none;color:white;font-size:x-small}

 Personnaliser l'interface de ce formulaire

Code Javascipt

Ce sont en fait deux scripts à placer dans la partie HEAD de votre fichier HTML. Le premier script limite le nombre de caractères et empêche des mots interdits de s' inscrire. Le second est un validateur avec ses animations
      <script src="limitation.js"></script>

<script type="text/javascript">

var mots_interdits = new Array('http://', 'href=');

var RemplacementEtoiles = true;

var Nombre_Caracteres_Maximum = 250;

var Constante_Doute = 4;
</script>


      <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>

<script type="text/javascript">

$(function() {
$("#submit").click(function(){

valid = true;

if($("#name").val() == ""){
$("#name").next(".error").fadeIn(3000).text("entrer votre nom");
valid = false;
}
else if(!$("#name").val().match(/^[a-z]{2,}$/i)){
$("#name").next(".error").fadeIn(3000).text("au moins 2caract.alphab.sans espace");
valid = false;
}
else{
$("#name").next(".error").fadeOut();
}

if(!$("#email").val().match(/^[a-z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$/)){
$("#email").next(".error").fadeIn(3000).text("entrer une adresse valide");
valid=false;
}
else{
$("#email").next(".error").fadeOut();
}

if($("#comments").val() ==""){
$("#comments").next(".error").fadeIn(3000).text("entrer votre message");
valid=false;
}
else{
$("#comments").next(".error").fadeOut();
}

return valid;

});
});
</script>



Le petit formulaire, présenté en haut de cette page ne fait que 310px de largeur. Les balises TABLE créent une charpente bien structurée. Les balises SPAN dont il est préférable d'exprimer la largeur (width) en pixels, tendent une toile de fond colorée. Vous pouvez aussi contenir ces SPAN avec un WIDTH à 100%, dans une grande DIV principale Le texte. Avec ce formulaire pas de problème, les robots ne peuvent pas y induire de code malicieux ni envoyer de spam

Ce formulaire est contenu dans une fenêtre IFRAME
Pourquoi ?

C' est simplement pour l' appel de la page PHP
Contrairement à AJAX, avec PHP une nouvelle page s' affiche en plein écran. Là, elle restera contenue dans la fenêtre IFRAME

 Les fenêtres magiques

.

  Share alike, le copyleft, Installation et échange de liens


Si vous installez un de mes formulaires dans votre site et que vous m'indiquez l'endroit où vous l'avez installé en me contactant à mon

formulaire de contact de wubijacq.com

Si vous gardez le petit copyleft, et si cela vous intéresse, je ferai un lien vers votre site dans ma

Page spéciale liens

On peut installer ces deux fichiers HTML et PHP dans un méme répertoire de votre site.
Dans votre page HTML, par exemple, vous pouvez faire un lien discret vers votre fichier PHP:
<a href="url de votre fichier PHP depuis votre fichier local">.</a> (ce qui équivaut à le mettre en téléchargement dans votre page HTML)

Mais le plus fonctionnel est de placer le fichier PHP et le fichier HTML à la racine du site (avec Filezilla par exemple)

Que ceux qui ne comprennent pas tout-à-fait n'hésitent pas à me contacter de nouveau. Ou questions-réponses sur le

forum simple-graphique

C'est aussi cela le Share Alike ( Partage Équitable )




free-zimbra-mailbox

Aperçu d'un message que j'ai envoyé à nicorama depuis son formulaire et qu'il a réceptionné sur sa box Zimbra Free
(Le texte peut être plus long bien sur)
refus-php
Retour PHP, si les champs ne sont pas bien remplis
Ici, depuis un téléphone mobile (OperaMini)
De mon autre formulaire jQuery-mobile


Annonce Google



Coté PHP


C' est bien de savoir "copier-coller", c' est mieux d'apprendre pour bien comprendre


D'abord il faut que le serveur de l'hébergeur supporte le PHP
Mon hébergeur Digitalvox/ieuropa le supporte
Free pagesperso (gratuit) le supporte
Hébergeurs PHP gratuits: Comparer: developpez.com



Attention ce n'est pas encore votre vraie page contact.php

Il y aura quelques petites modifications à faire ( parties colorées)
Il faudra indiquer l'adresse e-mail où vous désirez recevoir le courriel.
Ne pas oublier d'indiquer les pages de retour entre des guillemets simples 'http://......'
Comme éditeur de texte, je vous recommande Notepad++ si vous êtes sur windows
Copier-coller les lignes ci-dessous dans l'éditeur de texte, faites les modifications nécessaires, puis, Fichier => Enregistrer sous...: contact.php ou machin.php , du moment que le nom correspond avec:
<form method=POST action="...php" dans la partie HTML

Code PHP


<?php

if(isset($_POST) && isset($_POST['realname']) && isset($_POST['email']) && isset($_POST['comments']))
{
extract($_POST);
if(!empty($realname) && !empty($email) && !empty($comments))
{
$comments=str_replace( " \ ' " , " ' " , $comments);
$destinataire="votre adresse @mail";
$sujet=" depuis votre site";
$message=" message de: \n
nom: $realname \n
email: $email \n
objet: $title \n
message: $comments";
$entete="From $realname n Reply-To: $email";


mail($destinataire,$sujet,$message,$entete);

echo" <font color='blue'>merci le mail a bien été envoyé</font>,<br> <a href='http://votre-site/votre-page-d'accueil'>retour sur le site</a>";

}
else {

echo" <font color='red'>désolé vous n'avez pas rempli tous les champs</font> ,
 <a href='http://votre site/la page/le paragraphe ou se trouve votre formulaire'><font color='blue'>veuillez retourner au formulaire</font></a>";

}
}
?>

code de ce formulaire coté HTML




Tuto vidéo sur Grafikart Valider un formulaire avec jQuery


Tester votre formulaire avec Localhost sur Linux


Votre formulaire fonctionnera très bien ainsi, sans rien ajouter

Ce genre de formulaire ne craint pas les robots spammeurs. Toutefois méfiez-vous: comme dans tout autre formulaire, un "plaisantin" peut y placer un lien hypertexte menant vers un site malveillant ou publicitaire.
Si vous trouvez un lien hypertexte, à part si vous connaissez bien l'expéditeur, réfléchissez toujours avant de cliquer sur ce lien,
Cette box n'est pas faite pour ça et les internautes le savent: C'est juste pour un contact

Une parade parmi d'autres est le limiteur en javascript de Sirjojo qui interdira certains mots comme http: ou href=
En prime, il limite le nombre de caractères permis dans le message<(ajout d'un fichier .js, quelques lignes de javascript dans HEAD et dans BODY)

Le site MailTester.com pour voir si l'adresse mail existe

Mais si vous voulez ajouter du JavaScript, vous pouvez vous informer sur les derniers scripts de Jquery


Autres formulaires WUBIJACQ.COM


Je teste actuellement un formulaire de contact pour mobile sur le site "Nicorama Site"
url: http://wubijack.free.fr/mobile.htm

   mobile contact form (formulaire de contact propulsé par jQuery-mobile)

   formulaire responsive AJAX/PHP (s' adapte à différentes résolutions d' écran)



Fichiers constituant le formulaire classique dans le ZIP

ZIP

statistiques

who's.amung.us
  Partager

  
message wwg1.com



www.wubijacq.com Cliquez ici pour vous abonner à ce flux RSS