Formulaire de contact par MaxLbls44 - page 1

Bonjour à tous,

Premièrement, je ne sais pas si je suis dans la bonne catégorie mais bon je test ici.

Contexte : Pour mes études supérieur dans le domaine de l'informatique, je dois créer un e-Portfolio. J'ai opter pour un template html/css que je modifie à ma guise.

Je n'ai pas de gros soucis à part le formulaire de contact sur lequel je bloque. L'aspect y est, mais il n'est pas fonctionnel.

Si quelqu'un a un peu de temps à me consacrer, je suis preneur !

J'ai actuellement sur mon serveur le index.html et le style.css ainsi qu'une dizaine d'autres fichiers en .js

Merci

index.html (formulaire) :

<div id="tf-contact">
        <div class="container">
            <div class="section-title">
                <h3>Me contacter</h3>
                <p>Contacter-moi via le formulaire ci-dessous<br>ou bien via les réseaux sociaux en bas de cette page.</p>
                <hr>
            </div>

            <div class="space"></div>

            <div class="row">
                <div class="col-md-6 col-md-offset-3">
                    <form id="contact">
                      <div class="form-group">
                        <input type="text" class="form-control" id="exampleInputEmail1" placeholder="Votre Nom">
                      </div>
                      <div class="form-group">
                        <input type="email" class="form-control" id="exampleInputPassword1" placeholder="Votre E-mail">
                      </div>
                      <div class="form-group">
                        <input type="text" class="form-control" id="exampleInputEmail1" placeholder="Votre site Web">
                      </div>
                      <div class="form-group">
                        <textarea class="form-control" rows="4" placeholder="Message"></textarea>
                      </div>
                      <button type="submit" class="btn btn-primary my-btn dark">Envoyer</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

style.css (entier) :

@import url(http://fonts.googleapis.com/css?family=Raleway:500,600,700,100,800,900,400,200,300);
@import url(http://fonts.googleapis.com/css?family=Playball);

body, html{
	font-family: 'Raleway', sans-serif;
	text-rendering: optimizeLegibility !important;
	-webkit-font-smoothing: antialiased !important;
}

@media (min-width: 1200px){
	.container {
	width: 1100px;
	}
}

h1{
	text-transform: uppercase;
}

h2{
	line-height: 20px;
	margin:  0;
}

h4 {
	margin-bottom: 20px;
	font-size: 16px;
	font-weight: 700;
	color: rgb(47, 147, 123);
}
p{
	font-size: 13px;
}

a { 
	color: #ffffff;
	transition: all 0.8;
}
a:hover,
a:focus{
	color: #00B0F0;
	text-decoration: none;
}

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }

/* Home Style */
#tf-home{
	background: url(../img/back.jpg);
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	background-repeat: no-repeat;
	color: #cfcfcf;
}

#tf-home .overlay{
	background: -moz-linear-gradient(top,  rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.73) 17%, rgba(0,0,0,0.66) 35%, rgba(0,0,0,0.55) 62%, rgba(0,0,0,0.4) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.8)), color-stop(17%,rgba(0,0,0,0.73)), color-stop(35%,rgba(0,0,0,0.66)), color-stop(62%,rgba(0,0,0,0.55)), color-stop(100%,rgba(0,0,0,0.4))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc000000', endColorstr='#66000000',GradientType=0 ); /* IE6-9 */
	height: auto;
	background-attachment: fixed;
}

.content{
	padding: 15% 0 18% 0;
	text-align: center;
}
/* Navigation */
#tf-menu {
	margin-bottom: 0;
	background: transparent;
	border: 0;
	color: #fff !important;
	padding: 2% 0;
	transition: all 0.5s;
}
#sticky {
    padding: 0.5ex;
    background-color: #333;
    color: #fff;
    font-size: 2em;
    border-radius: 0.5ex;
}
#tf-menu.stick {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10000;
    background: #00B0F0;
    padding: 1% 0;
}
#tf-menu.navbar-default .navbar-nav > li > a {
	color: #ffffff;
	text-transform: uppercase;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
}

#tf-menu.navbar-default .navbar-nav > li > a:hover,
#tf-menu.navbar-default .navbar-nav > li > a:focus {
	color: #D3D3D3;
}

.logo {
	font-family: 'Playball', cursive;
}

#tf-service{
	padding: 7% 0; 
}

.media-left.media-middle i {
	padding: 20px 30px 20px 0;
	font-size: 30px;
	color: #00B0F0;

}

.media-body h4 {
	margin-bottom: 20px;
	font-size: 16px;
	font-weight: 700;
	color: rgb(29, 158, 14);
}

#tf-portfolio{
	background: #f1f1f1;
	padding: 5%  0 8% 0;
	text-align: center;
}

.section-title hr{
	border-color: rgb(47, 147, 123);
	width: 60px;
}

.section-title h2{ font-weight: 700;}
button.btn,
a.btn {
	margin: 15px 5px;
	transition: all 0.5s;
}
button.btn.btn-primary.my-btn,
a.btn.btn-primary.my-btn {
	background: #00B0F0;
	border-color: #00B0F0;
	border-radius: 0px;
	border-width: 2px;
	padding: 10px 30px;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 1px;
	font-weight: 600;
	color: #ffffff;
}
button.btn.btn-primary.my-btn:hover,
a.btn.btn-primary.my-btn:hover{
	background: #00B0F0;
	color: #000000;
	border-color: transparent;
}
button.btn.btn-primary.my-btn.dark:hover,
a.btn.btn-primary.my-btn.dark:hover{
	background: #222222;
	color: #ffffff;
	border-color: transparent;
}
a.btn.btn-primary.my-btn2 {
	background: rgba(47, 147, 123, 0);
	border-color: #FFFFFF;
	border-radius: 0px;
	border-width: 2px;
	padding: 10px 30px;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 1px;
	font-weight: 600;
	color: #FFFFFF;
}

a.btn.btn-primary.my-btn2:hover{
	background: #00B0F0;
	color: #000000;
	border-color: transparent;
}

ul.cat.list-inline li a {
	border: 1px solid #00B0F0;
	padding: 5px 15px;
	font-size: 11px;
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 1px;
	color: #00B0F0;
	transition: all 0.5s;
}

ul.cat.list-inline li a:hover{
	background: #00B0F0;
	color: #ffffff;
}

.space{ padding: 20px}
.toppadding{ padding-top: 30px}
.nopadding{ padding:  0;}

#tf-about{
	background: url(../img/07.jpg);
	background-size: cover;
	background-position: center;
	background-attachment: scroll;
	background-repeat: no-repeat;
	color: #222222;
}

#tf-about .overlay{
	height: auto;
	background-attachment: fixed;
	padding: 10% 0;
}

#tf-contact{
	background: url(../img/08.jpg);
	background-size: cover;
	background-position: center;
	background-attachment: scroll;
	background-repeat: no-repeat;
	padding: 5% 0;
	text-align: center;
}

form#contact {
	padding: 5%;
	background: #f1f1f1;
	outline: 6px solid rgba(34, 34, 34, 0.08);
}

#tf-contact input.form-control {
	height: 40px;
}

#tf-contact .form-control{
	display: block;
	width: 100%;
	height: 150px;
	margin-bottom: 20px;
	padding: 0px 12px;
	font-size: 14px;
	line-height: 1.42857143;
	color: #555;
	background-color: #FFF;
	background-image: none;
	border: 1px solid #FFF;
	border-radius: 0;
	border-top: 2px solid transparent;
	-webkit-box-shadow: none;
	box-shadow: none;
	-webkit-transition: none;
	-o-transition: none;
	transition: all 0.8s;
}
#tf-contact .form-control:focus,
#tf-contact .form-control:hover{
	border-top: 2px solid #00B0F0;
}
nav#tf-footer {
	background: #222222;
	padding: 1% 0 1% 0;
	color: #f1f1f1;
}

MaxLbls44

10 octobre 2017 à 23:43:00

Cookie : Anciennement petit gâteau sucré, qu'on acceptait avec plaisir. Aujourd'hui : petit fichier informatique drôlement salé, qu'il faut refuser avec véhémence.

EmmanuelBeziat

10 octobre 2017 à 23:57:55

Salut,

Pour qu'il soit fonctionnel, il te faut un moyen de traiter les infos et d'envoyer le mail — généralement, via un langage serveur (php ou autre).

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

11 octobre 2017 à 0:05:51

Re,

Merci pour ta reponse rapide @rhooManu

C'est bien ce que je pensais, il me semblais que c’était du PHP sur Adobe Muse, mais là je suis en travail manuel, et je suis plutôt perdu et je ne sais pas par ou commencer.

Il me faudrait donc, si je te suis bien, un nouveau fichier, qui va chercher les infos dans mon index.html, mais écrit en php ?

Anonyme

12 octobre 2017 à 17:47:34

Il te faudra effectivement du PHP pour récupérer les infos de ton formulaire.

Tu auras besoin d'utiliser des 'supergloblales' pour pouvoir récupérer et vérifier les informations voulues.

Voici un petit exemple mais avec un select, j'ai mis le tout dans un fichier index.php:

<form name="form" method="post">
 <select name="month">
  <option value="January">January</option>
  <option value="February">February</option>
  <option value="March">March</option>
 </select>
 <button name="submit" type="submit">Submit</button>
</form>

<?php

if(isset($_POST['submit'])) 
{
	$month = $_POST['month'];
	echo "Selected option is " . $month;
}

?>

Je te conseille également de regarder ces explications et regarder un peu tous les éléments qui gravitent autour.

Bonne continuation

Formulaire de contact

Formulaire de contact

Supprimer

Modérer

Signaler le message aux modérateurs