Formulaire de contact vers une boite Gmail

[Keyboard16]

Bonjour à tous !

J'ai un code d'un formulaire de contact, je me demande si c'est possible de recevoir les messages sur ma boite Gmail et comment procéder.

Code CSS :

<style type="text/css">

.feedbackform{
padding: 5px;
}

div.fieldwrapper{ /*field row DIV (includes two columns- Styled label column and 'thefield' column)*/
width: 550px; /*width of form rows*/
overflow: hidden;
padding: 5px 0;
}

div.fieldwrapper label.styled{ /* label elements that should be styled (left column within fieldwrapper DIV) */
float: left;
width: 150px; /*width of label (left column)*/
text-transform: uppercase;
border-bottom: 1px solid red;
margin-right: 15px; /*spacing with right column*/
}

div.fieldwrapper div.thefield{ /* DIV that wraps around the actual form fields (right column within fieldwrapper DIV) */
float: left;
margin-bottom: 10px; /* space following the field */
}

div.fieldwrapper div.thefield input[type="text"]{ /* style for INPUT type="text" fields. Has no effect in IE7 or below! */
width: 250px;
}

div.fieldwrapper div.thefield textarea{ /* style for TEXTAREA fields. */
width: 300px;
height: 150px;
}

div.buttonsdiv{ /*div that wraps around the submit/reset buttons*/
margin-top: 5px; /*space above buttonsdiv*/
}

div.buttonsdiv input{ /* style for INPUT fields within 'buttonsdiv'. Assumed to be form buttons. */
width: 80px;
background: #e1dfe0;
}

</style>

Code HTML :

<form class="feedbackform">

<div class="fieldwrapper">
	<label for="username" class="styled">Your Name:</label>
	<div class="thefield">
		<input type="text" id="username" value="" size="30" />
	</div>
</div>

<div class="fieldwrapper">
	<label for="email" class="styled">Email address:</label>
	<div class="thefield">
		<input type="text" id="email" value="" size="30" /><br />
		<span style="font-size: 80%">*Note: Please make sure it's correctly entered!</span>
	</div>
</div>

<div class="fieldwrapper">
	<label for="somehighschool" class="styled">education:</label>
	<div class="thefield">
		<ul style="margin-top:0;">
		<li><input type="radio" id="somehighschool" name="education" value=""/> <label for="somehighschool">Some Highschool</label></li>
		<li><input type="radio" id="highschool" name="education" value="" /> <label for="highschool">Highschool graduate</label></li>
		<li><input type="radio" id="somecollege" name="education" value="" /> <label for="somecollege">Some college</label></li>
		<li><input type="radio" id="vocation" name="education" value="" /> <label for="vocation">Vocation school</label></li>
		<li><input type="radio" id="college" name="education" value="" /> <label for="college">College graduate or higher</label></li>
		</ul>
	</div>
</div>

<div class="fieldwrapper">
	<label for="html" class="styled">Skills:</label>
	<div class="thefield">
		<ul style="margin-top:0;">
		<li><input type="checkbox" id="html" name="skills" value="" /> <label for="html">HTML/ CSS</label></li>
		<li><input type="checkbox" id="javascript" name="skills" value=""/> <label for="javascript">JavaScript</label></li>
		<li><input type="checkbox" id="ajax" name="skills" value="" /> <label for="ajax">Ajax and XML</label></li>
		<li><input type="checkbox" id="php" name="skills" value="" /> <label for="php">PHP and Database</label></li>
		</ul>
		<span style="font-size: 80%">* Please check all that apply.</span>
	</div>
</div>

<div class="fieldwrapper">
	<label for="agegroup" class="styled">Department:</label>
	<div class="thefield">
		<select id="agegroup">
		<option value="2.1">HR department</option>
		<option value="3">Sales</option>
		<option value="4.1">Customer Service/ Support</option>
		<option value="5.2">Accounting</option>
		</select>
	</div>
</div>

<div class="fieldwrapper">
	<label for="about" class="styled">About yourself:</label>
	<div class="thefield">
		<textarea id="about"></textarea>
</div>
</div>

<div class="buttonsdiv">
	<input type="submit" value="Submit" style="margin-left: 150px;" /> <input type="reset" value="Reset" />
</div>

</form>

 

[UsagiYojimbo]

Il te manque le plus important là : la soumission du formulaire et le traitement des champs.

 

[Keyboard16]

Peux-tu m'expliquer un peu plus ?

 

[UsagiYojimbo]

Là tu as juste mis du HTML, donc la mise en page de ton formulaire en quelques sorte. Quand tu cliques sur le bouton submit il y a tout un traitement à mettre en place :

- récupérer les valeurs saisies dans les champs du formulaire
- les vérifier
- créer le contenu du mail qui va être envoyé et contiendra ces données
- envoyer le mail

Et ça, soit tu ne l'as pas déjà, soit tu ne l'a pas mis.

Un tutoriel complet : http://a-pellegrini.developpez.com/tutoriels/php/mail/

 

[Keyboard16]

D'accord, donc j'ai mis que l'interface !
Une question, est ce que c'est possible de créer un formulaire de contact et de recevoir les messages sur ma boite Gmail ?
Si oui, pouvez vous m'orienter vers un exemple prêt à l'emploi ?
J'aimerais aussi savoir comment ajouter un contact sur Gmail

 

[UsagiYojimbo]

C'est tout à fait possible, c'est une boîte mail comme une autre. Regarde le lien que j'ai mis dans mon précédent billet, tu as un tutoriel très bien fait sur la manière dont tu dois procéder.

 

[Keyboard16]

Merci UsagiYojimbo ! : )