Problème de mise en forme (mail reçu)

16 mai 2014, 19:38

Hello à tous,

J'ai crée un fichier PHP pour le traitement de mon formulaire.
Pour la mise en forme j'ai utilisé un tableau et l'outil CSS inliner tool de MailChimp pour le CSS inline.

Le problème c'est que la mise en forme dans le mail que je reçois est une catastrophe.
Mon fichier PHP est encodé en UTF-8 sans BOM.

L'intitulé Nom et Téléphone sont complétement décalé, j'ai un encadré noir qui apparait autour du champ mail.
La mise en forme change de façon aléatoire !
Le souci viendrait d'ou à votre avis ?

Je ne peux pas poster le code le forum le considère comme du SPAM

16 mai 2014, 20:18

Cela peut provenir du CSS. Mais aussi de l'outil qui génére le CSS. Bref, cela vient de la mise en forme CSS lol.

17 mai 2014, 01:20

(PS : je ne m'étais pas loguer lors de mon post).

Merci pour ta réponse.

Ça viendrait de mon CSS ? Mais pourquoi les problèmes de mise en forme changent tout le temps de façon aléatoire ? Un coup le cadre noir est sur Email un autre coup sur le nom.

17 mai 2014, 01:25

Probablement à cause d'un selecteur, ou encore de la génération dynamique de class ou d'id lors du formatage mais le résultat reste de la css ...

Tu doit sans doute pouvoir remonter le script pour vérifier ou est-ce que la mise en page est créer, à savoir si ton script génère des id ou des class, ou alors si il place directement le style dans les balises.

De là tu devrait facilement pouvoir régler ton souci.

17 mai 2014, 21:24

J'avoue ne pas du tout savoir. J'utilise un code CSS inline (directement dans les balises)

Voici mon code :

		<?php

		header('Content-type: text/html; charset=utf-8');
 
			if(isset($_POST) 
			&& isset($_POST['form3_prenom']) 
			&& isset($_POST['form3_nom']) 
			&& isset($_POST['form3_email']) 
			&& isset($_POST['form3_telephone']) 
			&& isset($_POST['form3_message'])) {
				foreach($_POST as $index=>$valeur){
					   if($_POST[$index] === ""){
						  $_POST[$index] = "Non renseigné";
					   }
				}
				extract($_POST);
				if(!empty($form3_prenom) && !empty($form3_nom) && !empty($form3_email) && !empty($form3_message)) {

					$to = '[email protected]';

					$subject = 'Message depuis le site';
					
					$headers = 'MIME-Version: 1.0' . "\r\n";
					$headers .= 'Content-Type: text/html; charset=utf-8' . "\r\n";
					$headers .= 'From:' .$form3_prenom. " " .$form3_email. "\r\n";
					$headers .= 'Reply-To:'.$form3_email. "\r\n";
					
					$message = '<!doctype html><html>';
					$message .= '<head>';
					$message .= '<meta charset="utf-8"><title>Devis depuis le site</title>';
					$message .= '</head>';
					$message .= '<body style="font-family: Arial;font-style: normal;font-weight: bold;font-size: 14px;color: #64696a;background-color: #d2d4d5;margin-left: 15px;margin-top: 15px;margin-right: 15px;margin-bottom: 15px;text-align: center;">';
					$message .= '<table width="960" border="1" cellspacing="0" cellpadding="5" style="border: none;border-collapse: collapse;margin: auto;">';
					$message .= '<tr>';
					$message .= '<td colspan="2" style="font-family: Arial;font-style: normal;font-weight: bold;font-size: 14px;color: #64696a;border: none;text-align: center;padding-top: 10px;padding-right: 10px;padding-bottom: 10px;padding-left: 15px;"><p><img src="http://monsite.com/images/logo-solo.png" width="114" height="114" alt=""></p>';
					$message .= '<h1 style="font-family: Arial;font-style: normal;font-weight: 900;font-size: 40px;color: #15abd2;text-transform: uppercase;text-align: center;">MESSAGE</h1>';
					$message .= '<hr style="display: block;height: 1px;border: 0;background: #15abd2;width: 100%;margin-bottom: 0px;margin-left: auto;margin-right: auto;margin-top: 24px;"></td>';
					$message .= '</tr>';
					$message .= '<tr>';
					$message .= '<td width="50%" style="font-family: Arial;font-style: normal;font-weight: bold;font-size: 14px;color: #64696a;border: none;text-align: center;padding-top: 10px;padding-right: 10px;padding-bottom: 10px;padding-left: 15px;"><h3 style="font-family: Arial;font-style: normal;font-weight: 900;font-size: 14px;color: #64696a;text-transform: uppercase;text-align: left;margin-top: 0px;margin-right: 0px;margin-bottom: 3px;margin-left: 0px;display: block;vertical-align: middle;">PRENOM</h3>';
					$message .= '<div class="champ" style="font-family: Arial;font-size: 16px;font-style: normal;line-height: 35px;color: #15abd2;text-decoration: none;background-color: #c3c6c7;display: block;width: 94%;border: 1px solid #9fa5a7;text-align: left;height: 35px;padding-left: 10px;padding-right: 10px;padding-top: 5px;padding-bottom: 5px;">'. $form3_prenom .'</div></td>';
					$message .= '<td width="50%" style="font-family: Arial;font-style: normal;font-weight: bold;font-size: 14px;color: #64696a;border: none;text-align: center;padding-top: 10px;padding-right: 10px;padding-bottom: 10px;padding-left: 15px;"><h3 style="font-family: Arial;font-style: normal;font-weight: 900;font-size: 14px;color: #64696a;text-transform: uppercase;text-align: left;margin-top: 0px;margin-right: 0px;margin-bottom: 3px;margin-left: 0px;display: block;vertical-align: middle;">E-MAIL</h3>';
					$message .= '<div class="champ" style="font-family: Arial;font-size: 16px;font-style: normal;line-height: 35px;color: #15abd2;text-decoration: none;background-color: #c3c6c7;display: block;width: 94%;border: 1px solid #9fa5a7;text-align: left;height: 35px;padding-left: 10px;padding-right: 10px;padding-top: 5px;padding-bottom: 5px;">'. $form3_email .'</div></td>';
					$message .= '</tr>';
					$message .= '<tr>';
					$message .= '<td width="50%" style="font-family: Arial;font-style: normal;font-weight: bold;font-size: 14px;color: #64696a;border: none;text-align: center;padding-top: 10px;padding-right: 10px;padding-bottom: 10px;padding-left: 15px;"><h3 style="font-family: Arial;font-style: normal;font-weight: 900;font-size: 14px;color: #64696a;text-transform: uppercase;text-align: left;margin-top: 0px;margin-right: 0px;margin-bottom: 3px;margin-left: 0px;display: block;vertical-align: middle;">NOM</h3>';
					$message .= '<div class="champ" style="font-family: Arial;font-size: 16px;font-style: normal;line-height: 35px;color: #15abd2;text-decoration: none;background-color: #c3c6c7;display: block;width: 94%;border: 1px solid #9fa5a7;text-align: left;height: 35px;padding-left: 10px;padding-right: 10px;padding-top: 5px;padding-bottom: 5px;">'. $form3_nom .'</div></td>';
					$message .= '<td width="50%" style="font-family: Arial;font-style: normal;font-weight: bold;font-size: 14px;color: #64696a;border: none;text-align: center;padding-top: 10px;padding-right: 10px;padding-bottom: 10px;padding-left: 15px;"><h3 style="font-family: Arial;font-style: normal;font-weight: 900;font-size: 14px;color: #64696a;text-transform: uppercase;text-align: left;margin-top: 0px;margin-right: 0px;margin-bottom: 3px;margin-left: 0px;display: block;vertical-align: middle;">TELEPHONE</h3>';
					$message .= '<div class="champ" style="font-family: Arial;font-size: 16px;font-style: normal;line-height: 35px;color: #15abd2;text-decoration: none;background-color: #c3c6c7;display: block;width: 94%;border: 1px solid #9fa5a7;text-align: left;height: 35px;padding-left: 10px;padding-right: 10px;padding-top: 5px;padding-bottom: 5px;">'. $form3_telephone .'</div></td>';
					$message .= '</tr>';
					$message .= '<tr>';
					$message .= '<td colspan="2" style="font-family: Arial;font-style: normal;font-weight: bold;font-size: 14px;color: #64696a;border: none;text-align: center;padding-top: 10px;padding-right: 10px;padding-bottom: 10px;padding-left: 15px;"><img src="http://monsite.com/images/caps-triple.png" alt="" width="118" height="40" class="caps" style="padding-top: 20px;padding-right: 20px;padding-bottom: 5px;padding-left: 20px;"></td>';
					$message .= '</tr>';
					$message .= '<tr>';
					$message .= '<td colspan="2" style="font-family: Arial;font-style: normal;font-weight: bold;font-size: 14px;color: #64696a;border: none;text-align: center;padding-top: 10px;padding-right: 10px;padding-bottom: 10px;padding-left: 15px;"><h3 style="font-family: Arial;font-style: normal;font-weight: 900;font-size: 14px;color: #64696a;text-transform: uppercase;text-align: left;margin-top: 0px;margin-right: 0px;margin-bottom: 3px;margin-left: 0px;display: block;vertical-align: middle;">MESSAGE</h3>';
					$message .= '<div class="champ-large" style="font-family: Arial;font-size: 16px;font-style: normal;line-height: normal;color: #15abd2;text-decoration: none;background-color: #c3c6c7;display: block;width: 97%;border: 1px solid #9fa5a7;text-align: left;min-height: 50px;padding-top: 10px;padding-bottom: 10px;padding-left: 10px;padding-right: 10px;">'. $form3_message .'</div></td>';
					$message .= '</tr>';
					$message .= '</table>';
					$message .= '</body>';
					$message .= '</html>';

					if(mail($to, $subject, $message, $headers)){
						echo "Le formulaire a bien été envoyé";
					} else {
						echo "Le formulaire n'a pas été envoyé";
					}

				} else {
					echo "Vous n'avez pas rempli tous les champs";
				}
			}
		?>

Problème de mise en forme (mail reçu)

Qui est en ligne