Sujet Précédent Sujet Suivant

Envoyer les données d'un formulaire

Fermé
geiffy Messages postés 15 Date d'inscription dimanche 29 avril 2018 Statut Membre Dernière intervention 4 février 2022 - 31 janv. 2022 à 11:50
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 - 5 juil. 2022 à 19:22
Bonjour,

J'ai réalisé un site d'auteur dans lequel il y a une page "contact" avec un formulaire en html. Je bute à présent sur l'envoi des données de ce formulaire. Je précise que ne suis pas un développeur chevronné, mais un néophyte qui s'appuie sur des tutos pour coder. Pourrais-je donc avoir une aide pour la finalisation de ce formulaire? Je remercie d'avance pour elle.

Voici donc ci-dessous la page du formulaire en html qui est liée avec une page css:

<!DOCTYPE html>
<html lang="fr">
<head>
<title>Contact</title>
<meta charset="utf-8"/>
<meta http-equiv="X_UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="fichier-css/page-menu.css">
<link rel="stylesheet" href="fichier-css/contact.css">
<link rel="stylesheet" href="fichier-css/contact-style.css">
<meta name="viewport" content="width=device=width, initial-scale=1">
<meta name="auteur" content="François de Calielli">
<meta name="description" content="page de contact"/>
<meta name="reply-to" content="decalielli@gmail.com">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

</head>

<div id="logo">
<img src="fichier-images/logo_atypic.jpg" alt= Le logo de mon site d'auteur />
<img src="fichier-images/Atypical_autoedition.jpg" alt= L'entête du site />
</div>
<body>
<div id="barre-menu">
<nav>

<label for="menu-mobile" class="menu-mobile">Menu</label>
<input type="checkbox" id="menu-mobile, role=button">

<ul>
<li class="menu-index"><a href="index.html">Accueil</a></li>
<li class="menu-a_propos"><a href="a_propos.html">A propos de moi</a></li>
<li class="menu-livres"><a href="livres.html">Mes livres</a>
<ul class="submenu">
<li><a href="romans.html">Les romans</a></li>
<li><a href="essais.html">Les essais</a></li>
<li><a href="poesies.html">Les poésies</a></li>
<li><a href="theatre.html">Les pièces de théâtre</a></li>

</ul>
</li>

<li class="menu-contact"><a href="contact.html">Contact</a></li>
<li class="menu-merci"><a href="merci.html">Merci!</a></li>

</ul>
</li>
</nav>
</div>
</body>
</html>
<html>
<body>
<div id="colonne-gauche">
<ul>

<div id="fb-root"></div>

<script async defer crossorigin="anonymous" src="https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v12.0" nonce="oFaS9Zcl"></script>
<div class="fb-page" data-href="https://www.facebook.com/decalielli/atypical.autoedition" style="margin-top: 40px" data-tabs="timeline,events,messages" data-width="340" data-height="500" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/decalielli/atypical.autoedition" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/decalielli/atypical.autoedition">Tribune d'auteurs</a></blockquote></div>
<div style="height:33px; width:98px; display: block; margin-right: auto; margin-left: auto; margin-top: 30px" id="link">
<a href="http://facebook.com/francois.decalielli.902" title="Suivez-moi sur facebook!"><img src="fichier-images/suivez-moi_facebook.png" /></a>

</div>

</ul>
</div>
<html>
<body>
<div id="contenu">

<form>
<h1>Formulaire de contact</h1>
<div class="separation"></div>
<div class="corps-formulaire"></div>
<div class="gauche">
<div style="margin-top: 20px" class="groupe">
<label style="margin-bottom: 5px" for="prenom">Prénom</label>
<input style="padding: 15px 15px 15px 10px; margin-left: 145px; margin-top: 10px" type="text" minlength="2" maxlength="24" placeholder="Nom"required/>
<div style="margin-top: -40px; margin-left: 20px" class="icone">
<i class="fa fa-user fa-lg fa-fw" aria-hidden="true"></i>
</div>


</div>

<div style="margin-top: 20px" class="groupe">
<label style="margin-bottom: 10px" for="email">E-mail</label>
<input style="padding: 15px 15px 15px 10px; margin-left: 145px" type="text" placeholder="Email"/>
<div style="margin-top: -45px; margin-left: 20px" class="icone">
<i class="fa fa-envelope-open fa-lg fa-fw" aria-hidden="true"></i>
</div>

</div>
</div>

<div class="droite">
<div style="margin-top: 20px" class="groupe">
<label style="margin-bottom: 10px; margin-left: 10px" for="message">Message</label>
<textarea style="padding-top: 5px; margin-left: 135px; padding-left: 10px" name="message" id="message" cols="30" rows="20" placeholder="Saisissez ici ..." required></textarea>

</div>
</div>

<div class="pied-formulaire">
<button>Envoyer le message</button>
</div>

</form>
</body>
</hml>


</div>

<div id="footer">

</div>
</body>
</html>


Configuration: Windows / Chrome 97.0.4692.99

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Par ailleurs, j'ai récupéré dans un tuto une page "php" pour l'envoi du formulaire que je ne sais pas lier avec cette page "html". Est-elle opérationnelle d'ailleurs?
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------
<?php
 

// destinataire est votre adresse mail. Pour envoyer à plusieurs à la fois, séparez-les par une virgule
$destinataire = 'decalielli@gmail.com';
  
// copie ? (envoie une copie au visiteur)
$copie = 'oui'; // 'oui' ou 'non'
  
// Messages de confirmation du mail
$message_envoye = "Votre message nous est bien parvenu !";
$message_non_envoye = "L'envoi du mail a échoué, veuillez réessayer SVP.";
  
// Messages d'erreur du formulaire
$message_erreur_formulaire = "Vous devez d'abord <a href=\"../index.html#contact\">envoyer le formulaire</a>.";
$message_formulaire_invalide = "Vérifiez que tous les champs soient bien remplis et que l'email soit sans erreur."
  
// on teste si le formulaire a été soumis
if (!isset($_POST['fname']) || !isset($_POST['lname']) || !isset($_POST['email']) || !isset($_POST['subject']) || !isset($_POST['message']))
{
    // formulaire non envoyé
    echo '<p>'.$message_erreur_formulaire.'</p>';
    var_dump(isset($_POST['fname']));
    var_dump(isset($_POST['email']));
    var_dump(isset($_POST['subject']));
    var_dump(isset($_POST['message']));

}
else
{
    /*
     * cette fonction sert à nettoyer et enregistrer un texte
     */
    function Rec($text)
    {
        $text = htmlspecialchars(trim($text), ENT_QUOTES);
        if (1 === get_magic_quotes_gpc())
        {
            $text = stripslashes($text);
        }
  
        $text = nl2br($text);
        return $text;
    };
  
    /*
     * Cette fonction sert à vérifier la syntaxe d'un email
     */
    function IsEmail($email)
    {
        $value = preg_match('/^(?:[\w\!\#\$\%\&\'\*\+\-\/\=\?\^\`\{\|\}\~]+\.)*[\w\!\#\$\%\&\'\*\+\-\/\=\?\^\`\{\|\}\~]+@(?:(?:(?:[a-zA-Z0-9_](?:[a-zA-Z0-9_\-](?!\.)){0,61}[a-zA-Z0-9_-]?\.)+[a-zA-Z0-9_](?:[a-zA-Z0-9_\-](?!$)){0,61}[a-zA-Z0-9_]?)|(?:\[(?:(?:[01]?\d{1,2}|2[0-4]\d|25[0-5])\.){3}(?:[01]?\d{1,2}|2[0-4]\d|25[0-5])\]))$/', $email);
        return (($value === 0) || ($value === false)) ? false : true;
    }
  
    // formulaire envoyé, on récupère tous les champs.
    $prenom     = (isset($_POST['fname']))     ? Rec($_POST['fname'])     : '';
    $email   = (isset($_POST['email']))   ? Rec($_POST['email'])   : '';
    $message = (isset($_POST['message'])) ? Rec($_POST['message']) : '';
  
    // On va vérifier les variables et l'email ...
    $email = (IsEmail($email)) ? $email : ''; // soit l'email est vide si erroné, soit il vaut l'email entré
  
    if (($prenom != '') && ($email != '') && ($message != ''))
    {
        // les 4 variables sont remplies, on génère puis envoie le mail
        $headers  = 'MIME-Version: 1.0' . "\r\n";
        $headers .= 'From:'.$prenom.' <'.$email.'>' . "\r\n" .
                'Reply-To:'.$email. "\r\n" .
                'Content-Type: text/plain; charset="utf-8"; DelSp="Yes"; format=flowed '."\r\n" .
                'Content-Disposition: inline'. "\r\n" .
                'Content-Transfer-Encoding: 7bit'." \r\n" .
                'X-Mailer:PHP/'.phpversion();
     
        // envoyer une copie au visiteur ?
        if ($copie == 'oui')
        {
            $cible = $destinataire.','.$email;
        }
        else
        {
            $cible = $destinataire;
        };
  
        // Remplacement de certains caractères spéciaux
        $message = str_replace("'","'",$message);
        $message = str_replace("’","'",$message);
        $message = str_replace(""",'"',$message);
        $message = str_replace('<br>','',$message);
        $message = str_replace('<br />','',$message);
        $message = str_replace("<","<",$message);
        $message = str_replace(">",">",$message);
        $message = str_replace("&","&",$message);
  
        // Envoi du mail
        if (mail($cible, $objet, $message, $headers))
        {
            echo '<p>'.$message_envoye.'</p>'."\n";
        }
        else
        {
            echo '<p>'.$message_non_envoye.'</p>'."\n";
        };
    }
    else
    {
        // une des 3 variables (ou plus) est vide ...
        echo '<p>'.$message_formulaire_invalide.' <a href="#body">Retour au formulaire</a></p>'."\n";
    };
}; // fin du if (!isset($_POST['envoi']))
?><br><br>
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Merci infiniment encore pour ce précieux concours.
A voir également:

4 réponses

Réponse 1 / 4
piratabord Messages postés 152 Date d'inscription jeudi 9 février 2017 Statut Membre Dernière intervention 3 février 2022 39
2 févr. 2022 à 18:29
Bonsoir geiffy,

Alors il y a plusieurs choses à dire.
La première c'est que ton code HTML est fonctionnel, mais saches que le modèle de base d'une page HTML c'est : head, header, body, footer.
Tu n'est donc pas obligé de rouvrir et fermer les balises body à chaque fois que tu ajoutes une div comme tu l'as fait. Un seul body suffit et tu mets tout dedans ;)
Par ailleurs, un peu de css ne serait pas de refus car là, la page est très mal en point en tant que tel, mais ce n'est que de la forme.

Concernant le code PHP, il est bien pourri, je ne sais pas sur quel tuto tu l'as récupéré, mais il est long pour rien, mal codé, très défaillant niveau sécurité, bref, attention aux tutos que tu suis.

Je t'ai refait ton code HTML et ton code PHP avec des commentaires pour que tu t'y retrouves. Si tu as besoin d'aide ou de précision, réponds ou envoie moi un MP on pourra en discuter.

Ci-dessous le code PHP : 

<?php
# On vérifie que les champs du formulaire ont été remplis correctement
if(isset($_POST['envoyer'])){
    if(!empty($_POST['nom']) && !empty($_POST['email']) && !empty($_POST['message'])){
        # On sécurise les paramètres passés en POST pour les traiter en PHP
        $nom = htmlspecialchars(trim($_POST['nom']));
        $email = htmlspecialchars(trim($_POST['email']));
        $message = htmlspecialchars(trim($_POST['message']));

        # On définit le destinataire, l'expéditeur, l'objet du mail et son contenu
        # Pour le destinataire, si on veut en mettre plusieurs, on les sépare par une virgule comme ça :
        # $destinataire = "adresse1@gmail.com,adresse2@gmail.com,adresse3@gmail.com";
        $destinataire = "pradiergeoffroy@gmail.com";
        $expediteur  = $email;
        # Si on ne veut pas définir d'objet au mail, on peut laisser vide
        $objet = "";
        # Le contenu du mail est le message tapé par le visiteur dans le formulaire
        $contenu_mail = $message;
        # Si on veut que le visiteur soit mis en copie du mail qu'il va envoyer, on définit sur true, sinon false
        $copie = true;

        # On vérifie que la syntaxe de l'adresse mail est correcte
        if(filter_var($email, FILTER_VALIDATE_EMAIL)){
            $headers  = 'MIME-Version: 1.0' . "\n";
            $headers .= 'Content-type: text/html; charset=ISO-8859-1'."\n";
            $headers .= 'Reply-To: '.$expediteur."\n";
            $headers .= 'From: "Nom_de_expediteur"<'.$expediteur.'>'."\n";
            $headers .= 'Delivered-to: '.$destinataire."\n";
            if($copie == true){
                $headers .= 'Cc: '.$expediteur."\n";
            }
            $headers .= "\n";

            # On envoie le mail et on affiche un message en fonction de la réussite de l'envoi
            if(mail($destinataire, $objet, $contenu_mail, $headers)){
                echo "Votre message a bien été envoyé";
            }else{
                echo "Votre message n'a pas pu être envoyé";
            }
        }else{
            echo "L'adresse mail est invalide !";
        }
    }else{
        echo "Le formulaire est incomplet !";
    }
}
?>


Et voici le code HTML : 

<!DOCTYPE html>
<html lang="fr">
<head>
    <title>Contact</title>
    <meta charset="utf-8"/>
    <meta http-equiv="X_UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="fichier-css/page-menu.css">
    <link rel="stylesheet" href="fichier-css/contact.css">
    <link rel="stylesheet" href="fichier-css/contact-style.css">
    <meta name="viewport" content="width=device=width, initial-scale=1">
    <meta name="auteur" content="François de Calielli">
    <meta name="description" content="page de contact"/>
    <meta name="reply-to" content="decalielli@gmail.com">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<div id="logo">
    <img src="fichier-images/logo_atypic.jpg" alt= Le logo de mon site d'auteur />
    <img src="fichier-images/Atypical_autoedition.jpg" alt= L'entête du site />
</div>

<body>
    <div id="barre-menu">
        <nav>
            <label for="menu-mobile" class="menu-mobile">Menu</label>
            <input type="checkbox" id="menu-mobile, role=button">
            <ul>
                <li class="menu-index"><a href="index.html">Accueil</a></li>
                <li class="menu-a_propos"><a href="a_propos.html">A propos de moi</a></li>
                <li class="menu-livres"><a href="livres.html">Mes livres</a>
                    <ul class="submenu">
                        <li><a href="romans.html">Les romans</a></li>
                        <li><a href="essais.html">Les essais</a></li>
                        <li><a href="poesies.html">Les poésies</a></li>
                        <li><a href="theatre.html">Les pièces de théâtre</a></li>
                    </ul>
                </li>
                <li class="menu-contact"><a href="contact.html">Contact</a></li>
                <li class="menu-merci"><a href="merci.html">Merci!</a></li>
            </ul>
            </li>
        </nav>
    </div>
    <div id="colonne-gauche">
        <ul>
            <div id="fb-root"></div>
            <script async defer crossorigin="anonymous" src="https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v12.0" nonce="oFaS9Zcl"></script>
            <div class="fb-page" data-href="https://www.facebook.com/decalielli/atypical.autoedition" style="margin-top: 40px" data-tabs="timeline,events,messages" data-width="340" data-height="500" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/decalielli/atypical.autoedition" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/decalielli/atypical.autoedition">Tribune d'auteurs</a></blockquote></div>
            <div style="height:33px; width:98px; display: block; margin-right: auto; margin-left: auto; margin-top: 30px" id="link">
                <a href="http://facebook.com/francois.decalielli.902" title="Suivez-moi sur facebook!"><img src="fichier-images/suivez-moi_facebook.png" /></a>
            </div>
        </ul>
    </div>
    <div id="contenu">
        <form method="POST" action="">
            <h1>Formulaire de contact</h1>
            <div class="separation"></div>
            <div class="corps-formulaire"></div>
            <div class="gauche">
                <div style="margin-top: 20px" class="groupe">
                    <label style="margin-bottom: 5px" for="prenom">Prénom</label>
                    <input name="nom" style="padding: 15px 15px 15px 10px; margin-left: 145px; margin-top: 10px" type="text" minlength="2" maxlength="24" placeholder="Nom" required/>
                    <div style="margin-top: -40px; margin-left: 20px" class="icone">
                        <i class="fa fa-user fa-lg fa-fw" aria-hidden="true"></i>
                    </div>
                </div>
                <div style="margin-top: 20px" class="groupe">
                    <label style="margin-bottom: 10px" for="email">E-mail</label>
                    <input name="email" style="padding: 15px 15px 15px 10px; margin-left: 145px" type="text" placeholder="Email"/>
                    <div style="margin-top: -45px; margin-left: 20px" class="icone">
                        <i class="fa fa-envelope-open fa-lg fa-fw" aria-hidden="true"></i>
                    </div>
                </div>
            </div>
            <div class="droite">
                <div style="margin-top: 20px" class="groupe">
                    <label style="margin-bottom: 10px; margin-left: 10px" for="message">Message</label>
                    <textarea style="padding-top: 5px; margin-left: 135px; padding-left: 10px" name="message" id="message" cols="30" rows="20" placeholder="Saisissez ici ..." required></textarea>
                </div>
            </div>
            <div class="pied-formulaire">
                <input type="submit" name="envoyer" value="Envoyer le message"/>
            </div>
        </form>
    </div>
    <div id="footer">

    </div>
</body>
</html>


Maintenant explications :

Quand tu souhaites envoyer des données via un formulaire HTML, dans la balise <form> tu dois préciser la méthode d'envoi (POST ou GET), et l'action (page où est traité le formulaire, si tu as ton code PHP dans le même fichier, il suffit de mettre action="").
Ensuite, PHP ne peut pas savoir tout seul que tu lui envoie un formulaire, il faut donc un input de type "submit" dans ton formulaire (le bouton envoyer en fait) avec un name, ici dans le code, j'ai mis name="envoyer".
Les attributs name sont des noms qu'on donne à nos input pour que PHP sache récupérer leur valeur. Vois ça comme l'attribut class ou id qui permet à CSS de savoir sur quel objet appliquer le style.
Il faut donc donner un attribut name à tous tes inputs (et textarea qui est un input déguisé).

Une fois que c'est fait, on passe à PHP. Tout d'abord, il faut vérifier si on a cliqué sur le bouton "Envoyer le message", c'est ce que fait la ligne n°3 dans le code, ensuite, on vérifie que tous les champs sont remplis, (on utilise donc empty), ensuite on récupère la valeur des champs du formulaire, et on fait le traitement PHP, et on envoie le mail.

/!\ Attention /!\ : L'envoi de mails avec PHP, c'est particulier, et cela nécessite quelques connaissances, ou alors la volonté de se plonger un peu les mains dans le cambouis. La réussite de l'envoi du mail dépend de où est hébergé ton site, en local ou chez un hébergeur, de la configuration du serveur smtp de ton hébergeur, ou bien de ton propre serveur en local etc.
Il n'est donc pas exclu que le code que je t'ai donné là fonctionne du premier coup pour toi, il y aura certainement d'autres choses à régler. Mais il fonctionne pour moi donc si ça ne fonctionne pas, tu sauras d'où vient le problème ;)
1
geiffy Messages postés 15 Date d'inscription dimanche 29 avril 2018 Statut Membre Dernière intervention 4 février 2022 1
3 févr. 2022 à 12:05
Bonjour Piratabord,

Je te remercie infiniment pour ton aide qui m'est précieuse, n'étant qu'un néophyte en la matière comme tu as pu le constater. Oui, tu as raison! Les tutos sont très variés et, parfois, très aléatoires. Aussi on se retrouve avec des codages qui ne fonctionnent pas. J'ai fait un copier/coller du html que tu as pris le temps de refaire pour ma page contact. C'est super! Du coup, je me suis servi de tes conseils pour refaire mes autres pages avec un html plus opérationnel.
Concernant le traitement en PHP du formulaire, je l'ai copié dans un fichier que j'ai nommé "fichier-post_contact.php". Par contre je ne connais pas le "link" qu'il faut faire pour l'insérer dans le "head" de la page html. Je suppose qu'il est différent du "link" d'un fichier css.

Mon site d'auteur n'est pas encore chez un hébergeur, car il n'est pas au point.

Je te remercie donc par avance pour ton aide concernant mon problème au niveau du fichier PHP.

Geiffy
1
piratabord Messages postés 152 Date d'inscription jeudi 9 février 2017 Statut Membre Dernière intervention 3 février 2022 39 > geiffy Messages postés 15 Date d'inscription dimanche 29 avril 2018 Statut Membre Dernière intervention 4 février 2022
3 févr. 2022 à 14:53
Avec plaisir ;)

Pour le link du fichier PHP avec la page HTML, il faut que tu mettes le chemin du fichier PHP dans l'attribut action de la balise form.

Si ton fichier HTML est dans le même dossier que ton fichier PHP par exemple, tu devras taper action="fichier-post_contact.php" comme ceci : 

<form method="POST" action="fichier-post_contact.php">
1
Réponse 2 / 4
geiffy Messages postés 15 Date d'inscription dimanche 29 avril 2018 Statut Membre Dernière intervention 4 février 2022 1
3 févr. 2022 à 17:20
Bonsoir Piratabord,

Merci pour la précision. Certes, tu me l'avais fournie dans tes précédents commentaires. Pardon! J'ai donc fait comme tu m'as dit, puis essayé d'envoyer un formulaire à l'adresse que j'ai précisée dans le PHP. Or il me renvoie sur la page du fichier PHP. Cela doit provenir de ce que mon site est encore en local et, donc, être une histoire de SMTP comme tu l'as spécifié dans ton commentaire. Par ailleurs, il n'affiche aucun des messages d'erreur indiqués dans le fichier PHP. Est-ce normal?

Cordialement.
0
Réponse 3 / 4
geiffy Messages postés 15 Date d'inscription dimanche 29 avril 2018 Statut Membre Dernière intervention 4 février 2022 1
4 févr. 2022 à 15:01
Bonjour Piratabord,

Il me faut en effet configurer le SMTP gmail et, donc, insérer les paramètres suivants pour l'envoi des mails depuis le formulaire de mon site:
- Type de configuration : SMTP
- Serveur SMTP : mail.flexone.cloud
- Port : 587
- Sécurité: STARTTLS
- Identifiant: mon adresse email
- Mot de passe: le mot de passe de ma boîte mail.

J'ai cherché où les placer dans le PHP que tu m'as donné et je ne vois vraiment pas où le faire. Si tu as un moment, pourrais-tu me le préciser. Je t'en remercie par avance.
Cordialement.
0
Réponse 4 / 4
elvis
5 juil. 2022 à 18:24
bonjour, serait-il possible d'avoir de l'aide s'il vous plaît, pareillement, j'ai un site avec une page contact.html lié à une page css et je n'arrive pas à parametrer le bouton "envoyer".

Voici le code de ma page html:

<!Doctype html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="feuillecontact.css"/>
<meta name="viewport"content="widht=device-widht, initial-scale=1.0">
<title> Studio d'enregistrement à 25mn d'Aix en provence contact studio z4recordz production de musique</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2633599427639219"
crossorigin="anonymous"></script>
</head>

<body>
<form>
<h1>Nous contacter</h1>

<div class="separation"></div>
<div class="corps-formulaire">


<div class="gauche">

<div class="groupe">
<label>Ton blaze</label>
<input type="text">
<i class="fa-solid fa-user"></i>
</div>

<div class="groupe">
<label>Ton e-mail</label>
<input type="text">
<i class="fa-solid fa-envelope"></i>
</div>

<div class="groupe">
<label>Ton bigo</label>
<input type="text">
<i class="fa-solid fa-mobile-screen"></i>
</div>
</div>


<div class="droite">
<div class="groupe">
<label>Ton message</label>
<textarea placeholder="Saisissez votre texte..."></textarea>
</div>
</div>
</div>


<div class="pied-formulaire" align="center">
<button>Envoyer le message</button>
</div>
</form>


</body></html>

et voici ma page css:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
body
{
margin: 0px;
padding: 0px;
background-color: lightblue;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-family: "roboto", sans serif;
font-weight: bold;
}
form
{
background-color: white;
padding: 30px;
border-radius: 10px;
}
form h1
{
font-size: 20px;
}
form .separation
{
width: 100%;
height:1px;
background-color: blue;
}
form .corps-formulaire
{

display: flex;
flex-wrap: wrap;
margin-bottom: 30px;
}
form .corps-formulaire .groupe
{
position: relative;
margin-top: 20px;
display: flex;
flex-direction: column;
}
form .corps-formulaire .gauche .groupe input
{
margin-top: 5px;
padding: 10px 5px 10px 30px;
border: 1px solid pink;
outline-color: yellow;
border-radius: 5px;
}
form .corps-formulaire .gauche .groupe i
{
position: absolute;
left: 0;
top: 25px;
padding: 9px 8px;
color: blue;
}
form .corps-formulaire .droite
{
margin-left: 40px;
}

form .corps-formulaire .droite .groupe
{
height: 100%;

}
form .corps-formulaire .droite .groupe textarea
{
margin-top: 5px;
padding: 10px;
background-color: lightgrey;
border-radius: 2px solid purple;
border-radius: 5px;
resize: none;
height: 72%;
}
form .pied-formulaire button
{
margin-top: 10px;
background-color: blue;
color: white;
font-size: 15px;
border-radius: none;
padding: 10px 20px;
border-radius: 5px;
outline: none;
cursor: pointer;
transition: tranform 0.5s;
}
form .pied-formulaire button:hover
{
transform: scale(1.05);
}
@media screen and (max-width: 920px){
form .pied-formulaire .droite
{
margin-left: Opx;
}
}

Merci d'avance pour vos réponses
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
5 juil. 2022 à 19:21
Merci de bien vouloir créer ta propre question au lieu de venir dans une vieille discussion..

De plus, qu'entends-tu par paramétrer le bouton...
Avec quoi utilises-tu ensuite ce formulaire du PHP ?
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650 > jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024
5 juil. 2022 à 19:22
À noter qu'il manque les attributs action et method dans ton formulaire
0

Discussions similaires

ALERT en php
snoopy -
appkech -

14 réponses