Faire un formulaire dans cms avec son html css js

Luna Lou · March 29, 2014

Bonjour a toutes et a tous =) Voila je suis auto entrepreneur, jeune créatrice de bijoux, les affaires marchent très bien sur les marchés mais je souhaite maintenant également me faire un petit site e - commerce, je connais les bases en code mais j'ai un soucis avec prestashop...

Je fait une boutique ok, mais je vous explique je crée sur les marchés devant les gens des shamballa personnalisé et je souhaite faire une page cms pour que les gens puissent faire leurs bracelets personnalisés en ligne en choisissant leur perles, couleurs de fil et clique sur le bouton "envoyer" qui m'enverra le contenu par mail...

Voila un aperçu de ce que j'ai fait:

https://fbcdn-sphotos-a-a.akamaihd.net/hphotos-ak-prn1/t31.0-8/1015330_440230922790342_1658573913_o.jpg

https://scontent-b-fra.xx.fbcdn.net/hphotos-frc1/t31.0-8/1655404_440230886123679_1219766707_o.jpg

https://fbcdn-sphotos-f-a.akamaihd.net/hphotos-ak-ash3/t1.0-9/48027_440230852790349_1250149836_n.jpg

Le probleme c'est que je ne sais pas du tout où et comment mettre ces codes sur prestashop...

Et je ne sais meme pas comment faire fonctionner mon bouton "envoyer" ...

Quelqu'un peut il m'aider svp? :x

<style type="text/css">
body{
background:url("images/templatemo_main_wrapper.png") #000 repeat;
}

body{
				
				font-family: 'Helvetica', 'Lucida Grande', 'Arial', sans-serif;
			}
			.border,
			.rain{
				height: 1240px;
				width: 400px;
			}
			/* Layout with mask */
			.rain{
				 padding: 10px 12px 12px 10px;
				 -moz-box-shadow: 10px 10px 10px rgba(0,0,0,1) inset, -9px -9px 8px rgba(0,0,0,1) inset;
				 -webkit-box-shadow: 8px 8px 8px rgba(0,0,0,1) inset, -9px -9px 8px rgba(0,0,0,1) inset;
				 box-shadow: 8px 8px 8px rgba(0,0,0,1) inset, -9px -9px 8px rgba(0,0,0,1) inset;
				 margin: 100px auto;
			}
			/* Artifical "border" to clear border to bypass mask */
			.border{
				padding: 1px;
				-moz-border-radius: 5px;
			    -webkit-border-radius: 5px;
				border-radius: 5px;
			}

			.border,
			.rain,
			.border.start,
			.rain.start{
				background-repeat: repeat-x, repeat-x, repeat-x, repeat-x;
				background-position: 0 0, 0 0, 0 0, 0 0;
				/* Blue-ish Green Fallback for Mozilla */
				background-image: -moz-linear-gradient(left, #09BA5E 0%, #00C7CE 15%, #3472CF 26%, #00C7CE 48%, #0CCF91 91%, #09BA5E 100%);
				/* Add "Highlight" Texture to the Animation */
				background-image: -webkit-gradient(linear, left top, right top, color-stop(1%,rgba(0,0,0,.3)), color-stop(23%,rgba(0,0,0,.1)), color-stop(40%,rgba(255,231,87,.1)), color-stop(61%,rgba(255,231,87,.2)), color-stop(70%,rgba(255,231,87,.1)), color-stop(80%,rgba(0,0,0,.1)), color-stop(100%,rgba(0,0,0,.25)));
				/* Starting Color */
				background-color: #39f;
				/* Just do something for IE-suck */
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00BA1B', endColorstr='#00BA1B',GradientType=1 );
			}

			/* Non-keyframe fallback animation */
			.border.end,
			.rain.end{
				-moz-transition-property: background-position;  
				-moz-transition-duration: 30s;
				-moz-transition-timing-function: linear;
				-webkit-transition-property: background-position;  
				-webkit-transition-duration: 30s;  
				-webkit-transition-timing-function: linear;
				-o-transition-property: background-position;  
				-o-transition-duration: 30s;  
				-o-transition-timing-function: linear;
				transition-property: background-position;  
				transition-duration: 30s;  
				transition-timing-function: linear;
				background-position: -5400px 0, -4600px 0, -3800px 0, -3000px 0;	
			}

			/* Keyfram-licious animation */
			@-webkit-keyframes colors {
			    0% {background-color: #39f;}
			    15% {background-color: #F246C9;}
			    30% {background-color: #4453F2;}
			    45% {background-color: #44F262;}
			    60% {background-color: #F257D4;}
			    75% {background-color: #EDF255;}
			    90% {background-color: #F20006;}
			    100% {background-color: #39f;}
		    }
		    .border,.rain{
			    -webkit-animation-direction: normal;
			    -webkit-animation-duration: 20s;
			    -webkit-animation-iteration-count: infinite;
			    -webkit-animation-name: colors;
			    -webkit-animation-timing-function: ease;
		    }

		    /* In-Active State Style */
			.border.unfocus{
				background: #333 !important;	
				 -moz-box-shadow: 0px 0px 15px rgba(255,255,255,.2);
				 -webkit-box-shadow: 0px 0px 15px rgba(255,255,255,.2);
				 box-shadow: 0px 0px 15px rgba(255,255,255,.2);
				 -webkit-animation-name: none;
			}
			.rain.unfocus{
				background: #000 !important;	
				-webkit-animation-name: none;
			}

			/* Regular Form Styles */
			form{
				background: #212121;
				-moz-border-radius: 5px;
				-webkit-border-radius: 5px;
			    border-radius: 5px;
				height: 100%;
				width: 100%;
				background: -moz-radial-gradient(50% 46% 90deg,circle closest-corner, #242424, #090909);
				background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 150, from(#242424), to(#090909));
			}
			form label{
				display: block;
				padding: 10px 10px 5px 15px;
				font-size: 11px;
				color: #777;
			}
			form input{
				display: block;
				margin: 5px 10px 10px 15px;
				width: 85%;
				background: #111;
				-moz-box-shadow: 0px 0px 4px #000 inset;
				-webkit-box-shadow: 0px 0px 4px #000 inset;
				box-shadow: 0px 0px 4px #000 inset;
				outline: 1px solid #333;
				border: 1px solid #000;
				padding: 5px;
				color: #444;
				font-size: 16px;
			}
			form input:focus{
				outline: 1px solid #555;
				color: #FFF;
			}
			input[type="submit"]{
				color: #999;
				padding: 5px 10px;
				float: right;
				margin: 10px 30px;
				border: 1px solid #000;
				font-weight: lighter;
				-moz-border-radius: 15px;
			    -webkit-border-radius: 15px;
				border-radius: 15px;
				background: #45484d;
				background: -moz-linear-gradient(top, #222 0%, #111 100%);
				background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#222), color-stop(100%,#111));
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#22222', endColorstr='#11111',GradientType=0 );
				-moz-box-shadow: 0px 1px 1px #000, 0px 1px 0px rgba(255,255,255,.3) inset;
				-webkit-box-shadow: 0px 1px 1px #000, 0px 1px 0px rgba(255,255,255,.3) inset;
				box-shadow: 0px 1px 1px #000,0px 1px 0px rgba(255,255,255,.3) inset;
				text-shadow: 0 1px 1px #000;
			}
</style>

<center><TABLE border cellpadding="5" class="tableau_fond" cellspacing="5" >
   
<TR>
	<td>
		<div class="item">
			<img src="images shamballa simple/blanc.png" class="images_shamballa_simple" /></br>
		
		<p><center>Blanc :</br> 10 dispo</center></p>
		</div>
	</td>



<td>
		<div class="item">
			<img src="images shamballa simple/noir.png" class="images_shamballa_simple" />
		<p><center>Noir :</br> 5 dispo</center></p>
		</div>
	</td>

	
	<td>
		<div class="item">
			<img src="images shamballa simple/gris.png" class="images_shamballa_simple" /></br>
		
		<p><center>Gris :</br> 6 dispo</center></p>
		</div>
	</td>
	<td>
		<div class="item">
			<img src="images shamballa simple/blanc arc en ciel.png" class="images_shamballa_simple" />
		<p><center>Blanc multi :</br> 10 dispo</center></p>
		</div>
	</td>

	
	<td>
		<div class="item">
			<center><img src="images shamballa simple/gris hematite.png" class="images_shamballa_simple" /></br></center>
		
		<p><center>Gris hematite :</br> 8 dispo</center></p>
		</div>
	</td>
	<td>
		<div class="item">
			<center><img src="images shamballa simple/turquoise foncé.png" class="images_shamballa_simple" /></center>
		<p><center>Turquoise foncé :</br> 2 dispo</center></p>
		</div>
	</td>

	
	<td>
		<div class="item">
			<img src="images shamballa simple/bleu marine.png" class="images_shamballa_simple" /></br>
		
		<p><center>Bleu marine :</br> 19 dispo</center></p>
		</div>
	</td>
	
      </TR>
      <TR>
	  <td>
		<div class="item">
			<img src="images shamballa simple/bleu ciel.png" class="images_shamballa_simple" />
		<p><center>Bleu ciel :</br> 32 dispo</center></p>
		</div>
	</td>

	
	<td>
		<div class="item">
			<center><img src="images shamballa simple/turquoise clair.png" class="images_shamballa_simple" /></br></center>
		
		<p><center>Turquoise clair :</br> 9 dispo</center></p>
		</div>
	</td>
	  
	  
	  <td>
		<div class="item">
			<img src="images shamballa simple/vert clair.png" class="images_shamballa_simple" />
		<p><center>Vert clair :</br> 2 dispo</center></p>
		</div>
	</td>

	
	<td>
		<div class="item">
			<img src="images shamballa simple/orange.png" class="images_shamballa_simple" /></br>
		
		<p><center>Orange :</br> 6 dispo</center></p>
		</div>
	</td>
<td>
		<div class="item">
			<img src="images shamballa simple/or.png" class="images_shamballa_simple" />
		<p><center>Or :</br> 2 dispo</center></p>
		</div>
	</td>
	
	
	<td>
		<div class="item">
			<img src="images shamballa simple/violet noir.png" class="images_shamballa_simple" /></br>
		
		<p><center>Violet noir :</br> 6 dispo</center></p>
		</div>
	</td>
	
	
<td>
		<div class="item">
			<img src="images shamballa simple/fuchia.png" class="images_shamballa_simple" />
		<p><center>Fuchia :</br> 1 dispo</center></p>
		</div>
	</td>
	
	
      </TR>
	  <TR>
<td>
<div class="item">
			<img src="images shamballa simple/rouge.png" class="images_shamballa_simple" />
		<p><center>Rouge :</br> 6 dispo</center></p>
		</div>
	</td>
	<td>
	<div class="item">
			<img src="images shamballa simple/rose foncé.png" class="images_shamballa_simple" />
		<p><center>Rose foncé :</br> 0 dispo</center></p>
		</div>
	</td>
	<td>
	<div class="item">
			<img src="images shamballa simple/rose clair.png" class="images_shamballa_simple" />
		<p><center>Rose clair :</br> 1 dispo</center></p>
		</div>
	</td>
	<td>
	<div class="item">
			<img src="images shamballa simple/jaune clair.png" class="images_shamballa_simple" />
		<p><center>Jaune clair :</br> 4 dispo</center></p>
		</div>
	</td>
	<td>
	<div class="item">
			<img src="images shamballa simple/jaune.png" class="images_shamballa_simple" />
		<p><center>Jaune foncé:</br> 10 dispo</center></p>
		</div>
	</td>
	<td>
	<div class="item">
			<center><img src="images shamballa simple/champagne.png" class="images_shamballa_simple" /></center>
		<p><center>Champagne :</br> 16 dispo</center></p>
		</div>
	</td>
	<td>
	<div class="item">
			<img src="images shamballa simple/beige.png" class="images_shamballa_simple" />
		<p><center>Beige :</br> 11 dispo</center></p>
		</div>
	</td></TR>
	<TR>
	<td>
	<div class="item">
			<img src="images shamballa simple/topaz.png" class="images_shamballa_simple" />
		<p><center>Topaz :</br> 13 dispo</center></p>
		</div>
	</td>
	<td>
	<div class="item">
			<img src="images shamballa simple/violet clair.png" class="images_shamballa_simple" />
		<p><center>Violet clair :</br> 10 dispo</center></p>
		</div>
	</td>
	
		<td>
	<div class="item">
			<img src="images shamballa simple/violet foncé.png" class="images_shamballa_simple" />
		<p><center>Violet foncé :</br> 5 dispo</center></p>
		</div>
	</td>
		<td>
	<div class="item">
			<img src="images shamballa simple/violet bleu.png" class="images_shamballa_simple" />
		<p><center>Violet bleu :</br> 0 dispo</center></p>
		</div>
	</td>
		<td>
	<div class="item">
			<img src="images shamballa simple/angleterre.png" class="images_shamballa_simple" />
		<p><center>Angleterre  :</br> 35 dispo</center></p>
		</div>
	</td>
		<td>
	<div class="item">
			<center><img src="images shamballa simple/usa.png" class="images_shamballa_simple" /></center>
		<p><center>Amerique :</br> 15 dispo</center></p>
		</div>
	</td>
		<td>
	<div class="item">
			<img src="images shamballa simple/hematite.png" class="images_shamballa_simple" />
		<p><center>Hematite :</br> 50 dispo</center></p>
		</div>
	</td>
	</TR>
   </TABLE></center></br>
<div class="color_text"><center>BRACELET A 5€ !</br>
<strong>Frais de port : 1,50€ (lettre a bulle) </strong></br>
ATTENTION SI VOUS CHOISISSEZ DES PERLES ANGLETERRE OU AMERIQUE LE BRACELET SERA A 7€ !</br>
Après validation de votre commande par mail, l'administrateur vous enverra un lien Paypal par mail pour régler votre commande dans un délai de 48h !</center></div>
 <center><img src="images shamballa simple/shamballa modele simple.png"/>  </center>
 <center>Fil de nylon & soie ! plus épais, doux, plus solide que dans les commerces !</center>
 <center><img class="fil" src="images shamballa simple/test fil.png"/>  </center></br>
<center class="color_text">Merci de tenir compte des stocks affichés sous les perles ! </br>Ne pas selectionner les couleurs hors stock ! </br>Et merci de compter le nombres de perles voulu par rapport au stock affiché !</br> Si vous selectionnez des perles hors stock, vous recevrez un mail (ou sms) vous disant de refaire votre commande!</br> Merci de votre comprehension =)</center>
		<div class="rain">
			<div class="border start">
				<form action="[email protected]" method="post" enctype="text/plain" name="Formulaire_simple1">
			<center><table border><tr><td>	<label for="perle 1">Perle 1:</label>
				<select name="couleur">
<option> Noir
<option> Blanc
<option> Orange
<option> Rouge
<option> Jaune
<option> Bleu
				</select></td><td>
						<label for="perle 2 ">Perle 2:</label>
				<select name="couleur">
<option> Noir
<option> Blanc
<option> Orange
<option> Rouge
<option> Jaune
<option> Bleu
				</select></td><td>
						<label for="perle 3">Perle 3:</label>
				<select name="couleur">
<option> Noir
<option> Blanc
<option> Orange
<option> Rouge
<option> Jaune
<option> Bleu
				</select></td><td>
						<label for="perle 4">Perle 4:</label>
				<select name="couleur">
<option> Noir
<option> Blanc
<option> Orange
<option> Rouge
<option> Jaune
<option> Bleu
				</select></td><td>
						<label for="perle 5">Perles 5:</label>
				<select name="couleur">
<option> Noir
<option> Blanc
<option> Orange
<option> Rouge
<option> Jaune
<option> Bleu
				</select></td></tr><tr><td colspan="5"><label for="couleur fil">Choisissez la couleur de votre fil (vous pouvez choisir jusqu'a 2 couleurs):</label><center><select name="couleur">
<option> Noir
<option> Blanc
<option> Orange
<option> Rouge
<option> Jaune
<option> Bleu
				</select></center></td></tr></table></center>
				<label for="Nom">Nom:</label>
				<input name="Nom" type="text" placeholder="Nom">
				<label for="prenom">Prénom:</label>
				<input name="prenom" type="text" placeholder="Prenom">
				<label for="email">Email:</label>
				<input name="email" type="text" placeholder="Email"/>
				<label for="tel">Numéro de portable: </br>(pour le suivi de vos achats en direct par sms)</label>
				<input name="tel" type="text" placeholder="Numero de portable"/>
				<label for="adresse">Adresse:</label>
				<input name="adresse" type="text" placeholder="Adresse"/>
				<label for="CP">Code Postal:</label>
				<input name="CP" type="text" placeholder="code postale"/>
				<label for="Ville">Ville:</label>
				<input name="Ville" type="text" placeholder="Ville"/>
				<label for="paiement">Quel moyen de paiement préférez vous ? :</label>
				<label for="paypal">Paypal (carte bancaire sécurisé)</label><INPUT TYPE="checkbox" NAME="paiement" VALUE="paypal">
                <label for="cheque">Chèque</label><INPUT TYPE="checkbox" NAME="paiement" VALUE="cheque">
                <label for="commentaire">Un commentaire ? Une question ? :</label>
				<center><TEXTAREA NAME="commentaire" ROWS="4" COLS="60" placeholder="Votre commentaire ou question ici =)"></TEXTAREA></center>
				
				
         <center> <input name="envoyerbouton" type="submit" id="envoyerbouton" value="Envoyer"/></center>
				</form>
			</div>
		</div>

YopixelAE · March 30, 2014

Bonjour, pourquoi n'utilisez vous pas une page produit avec les champs personnalisés ?

Luna Lou · March 30, 2014

ce ,n'est pas vraiment ce que je voudrais faire :x

Sign In

Faire un formulaire dans cms avec son html css js

Recommended Posts

Luna Lou

Link to comment

Share on other sites

YopixelAE

Link to comment

Share on other sites

Luna Lou

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity

Go back to prestashop.com