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
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 |
|
|
 |
<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> 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> 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> 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è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">
<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}
|
|
|
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 )
|
|
|
 |
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) |
|  | Retour PHP, si les champs ne sont pas bien remplis
Ici, depuis un téléphone mobile (OperaMini)
De mon autre formulaire jQuery-mobile |
|
|
|
Coté PHP
C' est bien de savoir "copier-coller", c' est mieux d'apprendre pour bien comprendre
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
|
|
|
|
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
|
|
|
statistiques
who's.amung.us Partager
message 
|
|
