Besoin d'aide pour formulaire de contact.

Fermé
Wilde-Pictures Messages postés 14 Date d'inscription mercredi 1 août 2012 Statut Membre Dernière intervention 2 août 2012 - Modifié par Wilde-Pictures le 1/08/2012 à 19:45
Wilde-Pictures Messages postés 14 Date d'inscription mercredi 1 août 2012 Statut Membre Dernière intervention 2 août 2012 - 2 août 2012 à 18:01
Bonjour,

Voilà, je suis en train de créer mon site web, j'ai réaliser 60% de mon template pour le mettre en ligne, mais j'ai un gros soucis avec la partie contact de mon site web ....

J'ai bien créer ma partie contact, les différents champs à remplir et à valider, mais je ne sais vraiment pas comment insérer un script qui va permettre de faire fonctionner le tout.


Voici mon codage pour mon template :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<!-- META TAGS -->
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="description" content="Wilde Pictures" />
<meta name="keywords" content="tan, portfolio, photographie, photos, noir, et, blanc, photographer, photography, artist, art, portrait, paysage, trees, musique, artiste, nikon, D3S, N&b, France, défilé, free, free web template, free portfolio," />
<meta name="author" content="Wilde Pictures(christopher.paques@free.fr)" />


<!-- TITLE -->
<title>Wilde Pictures</title>

<!-- STYLE SHEETS -->
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen" />

<!-- JAVASCRIPT -->
<script type="text/javascript" src="js/jquery.js"></script>

</head>
<body>

<!-- WRAPPER -->
<div class="wrapper">

<!-- HEADER -->
<div class="header">

<!-- LOGO -->
<div class="logo"><a href="index.html" class="custom-font"><span class="ie6-png-fix"></span><img src="img/header/logo.png" class="logo-img"> W<span>ilde Pictures</span></a></div>

<!-- NAVIGATION -->
<div class="navigation">
<ul>
<li class="custom-font"><a href="index.html">Acceuil</a></li>
<li class="custom-font"><a href="portfolio.html">Portfolio</a></li>
<li class="custom-font"><a href="contact.html">Contact</a>

</ul>
</div>
<!-- END NAVIGATION -->

<div class="spacer"></div><!-- TO FIX FLOAT ISSUES -->

</div>
<!-- END HEADER -->

<!-- CONTACT -->
<div class="contact">

<h1 class="contact-header custom-font contact-header-free">Pour me contacter, c'est simple comme un clic.</h1>

<!-- CONTACT FORM FREE -->
<div class="contact-form-free">
<!-- CONTACT FORM -->
<div class="contact-form">

<!-- CONTACT FORM ROW -->
<div class="contact-form-row">

<div class="contact-form-item first">
<label>Nom et prénom</label>
<input type="text" class="size3">
</div>

<div class="contact-form-item">
<label>E-mail</label>
<input type="text" class="size3">
</div>

<div class="spacer"></div><!-- TO FIX FLOAT ISSUES -->

</div>
<!-- END CONTACT FORM ROW -->

<!-- CONTACT FORM ROW -->
<div class="contact-form-row">

<div class="contact-form-item first">
<label>Sujet de votre message.</label>
<input type="text" class="size3">
</div>

<div class="contact-form-item">
<label>D'ou venez vous ?</label>
<input type="text" class="size3">
</div>

<div class="spacer"></div><!-- TO FIX FLOAT ISSUES -->

</div>
<!-- END CONTACT FORM ROW -->

<!-- CONTACT FORM ROW -->
<div class="contact-form-row">

<div class="contact-form-item-full">
<label>Votre petit message.</label>
<textarea rows="" cols="" class="size5 height1"></textarea>
</div>

<div class="spacer"></div><!-- TO FIX FLOAT ISSUES -->

</div>
<!-- END CONTACT FORM ROW -->

<!-- CONTACT FORM ROW -->
<div class="contact-form-row">

<div class="contact-form-item-submit">
<input type="submit" value="">
</div>

<div class="spacer"></div><!-- TO FIX FLOAT ISSUES -->

</div>
<!-- END CONTACT FORM ROW -->

</div>
<!-- END CONTACT FORM -->
</div>
<!-- END CONTACT FORM FREE -->
</div>
<!-- END CONTACT -->

<!-- FOOTER -->
<div class="footer">

<!-- FOOTER LEFT -->
<div class="footer-left">

<!-- FOOTER LOGO -->
<a href="#" class="footer-logo custom-font">Wilde Pictures</a>

<!-- FOOTER NAVIGATION -->


</div>
<!-- END FOOTER LEFT -->

<!-- FOOTER RIGHT -->
<div class="footer-right">

<h3 class="custom-font">© Copyright <a href="#">Wilde Pictures 2012</a>
</div>
<!-- END FOOTER RIGHT -->

<div class="spacer"></div><!-- TO FIX FLOAT ISSUES -->

</div>
<!-- END FOOTER -->

</div>
<!-- END WRAPPER -->

</body>
</html>


A coté de ça j'ai ma feuille de style en CSS.
Mais voilà, je suis vraiment largué sur la façon dont je peut faire fonctionner le formulaire de contact, je fait 90% du travail graphique sous photoshop, Illustrator, Fireworks etc...
SI vous avez une idée de comment rendre fonctionnelle, je vous en serait vraiment très reconnaissant.

Merci à vous.

11 réponses

inspiring Messages postés 1813 Date d'inscription vendredi 28 janvier 2011 Statut Membre Dernière intervention 31 décembre 2018 265
1 août 2012 à 19:59
j'ai peut etre mal vu mais je n'ai pas l'impression que ton formulaire soit dans une balise <form> ...

pour en revenir à une regle générale il faut deja que tu nous precise si ton formulaire est HTML traité sur une autre page (une autre page php s'affichera apres la soumission) ou si tout se fait sur la meme page (formulaire en php sur une page php). pour info une page .php est identique à une html classique visuellement

et quelle est ton editeur de code ? si tu utilise dreamweaver (photoshop, Illustrator, Fireworks etc... ) ca devient assez rapide a t'expliqué
1
tryan44 Messages postés 1288 Date d'inscription mardi 24 janvier 2012 Statut Membre Dernière intervention 26 octobre 2014 220
Modifié par tryan44 le 1/08/2012 à 20:44
Salut,

Un formulaire commence par la balise <form> et se termine par la balise </form>. La première balise contient entre autre la méthode utilisé (POST ou GET), la page de destination si besoin (action) et bien d'autres encore.
<form method="POST" action="fichier.php"> 
<!-- éléments du formulaire--> 
</form>

Une question stupide engendre une réponse stupide!
Une question mal formulé engendre une réponse aléatoire!
1
tryan44 Messages postés 1288 Date d'inscription mardi 24 janvier 2012 Statut Membre Dernière intervention 26 octobre 2014 220
1 août 2012 à 21:03
Je répondais juste à votre interrogation précédente :
"Pour la balise, je ne connais pas ce que tu appel <Form>, qu'est-ce ? "
..et ma réponse est un des éléments qui rendra votre formulaire fonctionnel.

Pour envoyer un mail via votre formulaire, il faut que votre page soit en PHP, qu'il utilise les balises "form", que les éléments du formulaire possède tous un attribut "name", récupérer et traiter chaque élément du formulaire via PHP et enfin envoyer le mail via la fonction mail(). Pour comprendre, voici un tuto basique http://creer-un-site.fr
1
inspiring Messages postés 1813 Date d'inscription vendredi 28 janvier 2011 Statut Membre Dernière intervention 31 décembre 2018 265
1 août 2012 à 21:04
j'utilise Dreamweaver CS6
ca va te simplifier le travail :)

pour la balise form : onglet insert > form > form
cela signifie que tu integre un formulaire, la balise (et celle de fermeture) sont OBLIGATOIRE, quelque soit la methode de soumission utilisé
pour les elements de formulaire : onglet insert > form >là tu choisi ton element
les element SPRY sont un type permettant de regler tres facilement ton champ de formulaire (obligatoire, type d'entrée, case a cocher, ...)

la tu peut construire ton formulaire

pour se qui est de la soumission l'entete de @tryan44 te dis l'essentiel, reste en POST - le fichier .PHP symbolise la page qui traitera le formulaire

Pour ce qui est du traitement la c'est plus vaste
il faut nous dire si :
1-l'utilisateur rempli et valide et est rediriger ensuite vers une autre page (le plus simple à mettre en place pour un "novice" --je dis ca tres respectueusement--)
ou 2-l'utilisateur rempli et valide , le formulaire est traité sur place et lui affiche le petit mot d'envoie (ou plus) sur cette meme page (plus complexe mais tout a fait abordable) , dans ce cas on utilise un language php dans ton corps de page

je ne peut pas te faire un cours sur les formulaire ce soir par manque de temps ...

a la limite post une demande tres precise de ce que tu veux et je peux te poster un code tout pret (tu t'occupe d'integrer les class ou style CSS puisque tu maitrise) dans la journée

n'hesite pas si d'autre question, je posterai un peu ce soir
1

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
inspiring Messages postés 1813 Date d'inscription vendredi 28 janvier 2011 Statut Membre Dernière intervention 31 décembre 2018 265
Modifié par inspiring le 1/08/2012 à 21:48
futé la capture de page, ca dis tout !

je peux te faire le code demain sans problème

par contre quels champs veux tu rendre obligatoire ?

ce sera un code de structure, tu devras ajouter les spécificité CSS toi-meme (car moi je ne les ai pas) et peaufiner la mise en page (largeur, hauteur, etc...) mais la structure sera détaillée
en resume je t'enverrais :
-le code html formulaire
-le code php de soumission
-le fonctionnement afin que tu puisses modifier ou ajouter les choses toi meme par la suite, voir mettre un autre formulaire sur le meme principe

je pense que je te transmettrais ca par MP, on verra, je te contacte par la forum si j'ai une question

Le plus important ! pourquoi je te le fais ? y'a pas de piège, j'ai pas trop de boulot en ce moment, j'aime faire ces choses et j'ai aussi galérer quand j'ai commencé a me mettre au codage donc j'ai une idée de ta situation.
et tu bosse sur dream CS6 donc je me dit que tu est peut etre sur un periode d'essai de 30j du logiciel et qu'il faudrai que ca aille vite pour que tu transfere ton site avt la fin

voila :)
1
Wilde-Pictures Messages postés 14 Date d'inscription mercredi 1 août 2012 Statut Membre Dernière intervention 2 août 2012
1 août 2012 à 20:22
Bonjour,

Alors j'utilise Dreamweaver CS6.

Pour la balise, je ne connais pas ce que tu appel <Form>, qu'est-ce ?

Sinon, j'ai une page en CSS pour les styles etc... une HTML pour le site en lui même.
0
Wilde-Pictures Messages postés 14 Date d'inscription mercredi 1 août 2012 Statut Membre Dernière intervention 2 août 2012
1 août 2012 à 20:53
Hummm d'accord, mais en quoi cela va il m'aider à rendre ma page de contact fonctionnelle ?

Car actuellement je ne sais pas justement, comment faire en sorte de faire fonctionner cette page pour que les e-mails et messages soient bien envoyé sur mon email ... :/
0
Wilde-Pictures Messages postés 14 Date d'inscription mercredi 1 août 2012 Statut Membre Dernière intervention 2 août 2012
Modifié par Wilde-Pictures le 1/08/2012 à 21:44
Alors, d'abord merci :)

Alors en gros, la personne arriverait sur la page validerait son message et serait redirigée vers une petite page que je créerais pour lui confirmer la validation de l'envoi de son message.


Voici un aperçus de cette dite page : http://img35.imageshack.us/img35/9536/sanstitrektk.png


Edit : Oh je n'avais pas vus le nouveau message de votre part Tryan44
Merci pour le lien et merci beaucoup pour ces explications nouvelles qui devraient me permettre de mieux prendre en main cette partie encore inconnue des sites web ;)
0
Wilde-Pictures Messages postés 14 Date d'inscription mercredi 1 août 2012 Statut Membre Dernière intervention 2 août 2012
1 août 2012 à 22:01
Alors déjà merci beaucoup :)

Les seuls champs "obligatoires" seraient le "Nom prénom" et l'e-mail.
Alors pour le CS6, pas de licence essais, j'ai la suite Master CS6 grâce à mon travail je dispose de réduction sur les licences professionnelles.

Il n'y a pas vraiment d'important pour moi, sachant que j'ai déjà fait ma page de style et html pour le formulaire, il ne me manque vraiment que ce qui me permettras de rendre cette page fonctionnelle car finalement la je n'ai que le visuel.


En tout cas, merci beaucoup :)
0
inspiring Messages postés 1813 Date d'inscription vendredi 28 janvier 2011 Statut Membre Dernière intervention 31 décembre 2018 265
2 août 2012 à 16:51
je t'ai poster un MP
en haut à droite de cette page pour y acceder
0
Wilde-Pictures Messages postés 14 Date d'inscription mercredi 1 août 2012 Statut Membre Dernière intervention 2 août 2012
2 août 2012 à 18:01
Merci ;)
0