Un formulaire de contact Jquery-PHP pour mobile

>

logo-wubijacq-mail-html-php

www.wubijacq.com

Les deux fichiers JavaScript et le fichier CSS, présentés ci-dessous, sont très volumineux.
Mon éditeur de texte Gedit s'est mis à bugger quand j'ai essayé de les enregistrer pour les étudier
Mais n'ayez aucune crainte vous ne serez pas obligé de les télécharger
Jquery met en ligne des CDNs (Content Delivery Network) pour vous simplifier la vie

http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css
http://code.jquery.com/jquery-1.6.1.min.js
http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js

Vous pouvez utiliser des CDNs plus récents, comme le 1.2.1, mais il existe un conflit javascript avec jquery-mobile.js dans la version 1.3.2

Ceci n'est pas une application de plus à télécharger dans votre mobile, mais un formulaire à placer dans votre site web mobile si vous en avez un.

Pour les sites orientés PC ou portables, ce formulaire peut aussi se placer dans une fenêtre Popup ou une fenêtre IFRAME
comme le Formulaire-test présenté dans cette page (IFRAME de dimensions hauteur 620px largeur 240px). À vous d'ajuster au mieux

Voir au bas de la page: Fenêtres pop-up et iframes








Jquery: Écrire Moins mais Faire Plus


Telle est la devise de ce framework Javascript
Les fichiers cités plus haut, sont en téléchargement sur le ouaibe et ce CDN permet au formulaire d'être lu par des navigateurs ancien comme Firefox5 par exemple.
The best CDNs for 2012

Les webmestres auront la possibilité de faire un lien vers ces trois fichiers dans la partie HEAD de leur page HTML voire de choisir un CDN plus récent

Entraînez vous à personnaliser votre formulaire avec CODIGA et ThemeRoller dans la page de JQUERYmobile
Mais ce sera à vous de construire le formulaire de contact en HTML et pour la sécurité un fichier PHP couplé (facultatif) à un fichier Javascript (Json)
Autre bacs à sable pour s'entrainer: JS Bin et jsfiddle

Jquery sans AJAX
c'est possible?



Si vous voulez une page PHP pour sécuriser ce type de formulaire, il n'est pas nécessaire de passer par Ajax,

+ (corrigez moi sur le forum)
ou à
+ Ajouter un commentaire

AJAX n'est pas un plus pour la sécurité pour votre formulaire. Il permet simplement de ne pas changer de page lors de l'envoi du message.

Mais vous pouvez désactiver Ajax facilement dans la partie FORM:

<form  data-ajax=false  action=contact.php  method=post>
mais aussi dans la partie HEAD,
l' événement mobileinit pour que cela fonctionne parfaitement

<script language="text/javascript"> $(document).bind("mobileinit", function () { $.mobile.ajaxEnabled = false; }); </script>
Il est possible aussi d'employer Javascript dans la partie HEAD de la page HTML, pour la vérification du remplissage correct des champs de saisie

Les couleurs trop sombres passent mal dans un mobile. Les couleurs claires, comme dans l'exemple ci-contre passent beaucoup mieux

Formulaire-test


vérification avec Javascript

.
Si votre navigateur est Firefox ou Google-Chrome vous pourrez facilement lire cette video-demo sur Opera
  Copier-coller c'est bien, apprendre c'est très bien, comprendre c'est encore mieux.
Cette vidéo de Grafikart explique le rôle du Javascript et du CSS dans la partie HTML de ce formulaire. Il a eu la bonne idée d' y ajouter un forum


Code HTML5 de ce formulaire


Avec ajout de CSS et Javascript
Pour la vérification du bon remplissage des champs requis

Enregistrez ce fichier sous mobile.htm
Cette page HTM pourra ainsi être facilement contenue dans un fenêtre Popup ou IFRAME

<!DOCTYPE html>
<html lang=fr>
<head> <meta charset="uft-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content=" contact form for mobile">
<meta name="keywords" content="contact,form,jquery,mobile" >
<meta name="author" content=" ">
<title>mobile contact form</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
<style type=text/css>
span.error {background:yellow;color:red;display:none;font-size:75%;font-weight:normal;padding:3px} </style>
<script type="text/javascript">
$(function() { $("#submit").click(function(){ valid = true; if($("#name").val() == ""){ $("#name").next(".error").fadeIn(3000).text("entrez votre nom"); valid = false; } else if(!$("#name").val().match(/^[a-z]{2,}$/i)){ $("#name").next(".error").fadeIn(3000).text("+2 caracteres alphabetiques"); 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("entrez une adresse valide"); valid=false; } else{ $("#email").next(".error").fadeOut(); } if($("#comments").val() ==""){ $("#comments").next(".error").fadeIn(3000).text("entrez votre message"); valid=false; } else{ $("#comments").next(".error").fadeOut(); } return valid; }); }); </script> </head>
<body>
<div data-role="page">
<div data-role="header">
<p align=center><strong>mobile-contact</strong></p>
</div>
<span style="text-align:center;padding:5px;display:block;color:blue;background:yellow"><b>Champs requis *</b></span>
<div style="background:lightblue" data-role="content">
<form method=post action="contact.php" data-ajax=false>
<fieldset style="font-weight:bold;color:blue">
<span style="display:block;padding:5px;width:100%">nom* </span>
<input type=text id=name name=realname title="pas de chiffres">
<span class=error></span>
<span style="display:block;padding:5px;width:100%">courriel*</span>
<input type=text id=email name=email style="text-align:center;color:blue"value="@"">
<span style="display:block;padding:5px;width:100%">objet</span>
<input type=text name=title title="objet ou site web" >
<span></span>
<span style="display:block;padding:5px;width:100%">message*</span>
<textarea rows=30 name=comments id=comments ></textarea>
<span class=error></span>
<input data-theme=e type=submit id=submit value=envoyer>
</fieldset></form>
<!-- /content -->
<span style="text-align:left;padding:5px;display:block;color:blue;background:yellow"> <b>Le nom de votre site </b></span>
<div data-role="footer">
<a href="http://www.wubijacq.com/files/copyleft.htm" data-icon="arrow-r" rel=external class="ui-btn-left">copyleft@wubijacq.com</a>
</div><!-- /footer -->
</div><!-- /page -->
</body>



Il faudra par la suite, placer javascript et CSS contenus dans la partie HEAD et BODY de ce fichier HTML respectivement dans des fichiers .js et .css distincts. Mais vous pouvez les garder ainsi pour tester en local d'abord après un copier-coller, par exemple




La page HTM et la page PHP doivent, de préférence, être placées à la racine de votre site Utilisez Filezilla par exemple (c'est un client FTP gratuit)


Annonce Google

Page PHP pouvant convenir à ce formulaire




Si vous avez choisi l'AJAX n'oubliez pas de supprimer data ajax=false
La base de données SQL devrait être codée en uft-8 unicode

<?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 email";
$sujet=" mobile-contact";
$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'>le mail a bien &eacute;t&eacute envoy&eacute, merci</font>,<br>
<a href='http://votre_site/remerciements.html'><font color='green'>veuillez cliquer sur ce lien pour retourner vers le site</font></a>";

}
else {

echo" <font color='red'>vous n'avez pas bien rempli tous les champs</font> ,<br>
<a href='http://votre_site/mobile.htm'><font color='blue'>veuillez cliquer sur ce lien pour retourner au formulaire</font></a>";

}
}

?>
<html><body><br><br><p align=center>propulsed by Jquery<br><br><span style="display:block;background:black;padding:5px;width:187px"> <img src="http://jquerymobile.com/wp-content/uploads/2012/09/jquery-mobile-logo-03.png"></span><br> <img src="http://www.wubijacq.com/images/arobasex.gif"></p></body></html>


Tester votre formulaire avec Localhost sur Linux




Fil de discussion ouvert sur le forum simple-graphique

Envoi des fichiers constituant ce formulaire sous forme de ZIP Demandez ici

retour haut de page

statistiques

who's.amung.us
  Partager




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