Mise en forme formulaire de contact (Créer un compte)

  • WordPress :4.6.1
  • Statut : non résolu
11 sujets de 1 à 11 (sur un total de 11)
  • Auteur
    Messages
  • #1603456
    communication@feed-back.fr
    Participant
    Initié WordPress
    6 contributions

    Bonjour,

    Ma configuration WP actuelle

    • Version de PHP/MySQL : je ne trouve pas cette info
    • Thème utilisé : WordPress 4.2.10 avec le thème feedback
    • Extensions en place :
    • Nom de l’hébergeur : planetwork
    • Adresse du site : http://www.feed-back.fr/inscription_ifm/

    Problème(s) rencontré(s) :

    Bonjour,

    J’ai dupliqué un formulaire pour créer une nouvelle page sur mon site mais je perds la mise en forme http://www.feed-back.fr/inscription_ifm/ et je n’arrive pas à aligner les champs de texte.

    Ci-joint le code.

    Merci beaucoup pour votre aide,

    Margaux

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #1603462
    momofr@free.fr
    Modérateur
    Maître WordPress
    3214 contributions

    C’est toi qui à programmé ce code html ?

    A quoi te sert la classe “text-field” ?

    Le formulaire de base CF7 est basique mais fonctionne avec les labels au dessus des champs, si tu des labels devant il faut juste changer leur disposition avec les CSS (float + min-width par exemple)…

    #1603465
    communication@feed-back.fr
    Participant
    Initié WordPress
    6 contributions

    Non ce n’est pas moi mais une agence. et je ne sais pas à quoi sert la classe “text-field”

    Le problème c’est que si je change les CSS ca va modifier les autres formulaires du site ? (et je n’ai pas su trouver les CSS)

    #1603466
    PhiLyon
    Modérateur
    Maître WordPress
    25688 contributions

    Bonjour.

    Ce plugin offre plus de flexibilité que ContactForm 7 https://fr.wordpress.org/plugins/ninja-forms/

    🙂

    #1603467
    momofr@free.fr
    Modérateur
    Maître WordPress
    3214 contributions

    Pas de problème de flexibilité juste comprendre pourquoi c’est codé comme ça… ce que tu veux s’obtient avec des CSS adéquates, ici

    .text-field.clearfix > label {
      min-width: 90px;
    }

    Si veux aligner les labels à droite tu ajoutes un text-align comme ça :

    .text-field.clearfix > label {
      min-width: 90px;
      padding-right: 5px;
      text-align: right;
    }

    J’ai ajouté un padding pour chasser le champ des 2 points…

    On touche tous les .text-fied avec ça, si tu ne veux toucher que les formulaires CF7 ajoute avant .wpcf7 pour cibler dessus :

    .wpcf7 .text-field.clearfix > label {
      min-width: 90px;
      padding-right: 5px;
      text-align: right;
    }

    Est-ce clair pour toi ?

    #1603468
    communication@feed-back.fr
    Participant
    Initié WordPress
    6 contributions

    C’est bien ce que j’ai vu sur internet momofr@free.fr mais quand je le place dans mon HTML ca me donne ça : http://www.feed-back.fr/inscription_ifm/

     

    Je pense que je le mets au mauvais endroit…

    #1603469
    PhiLyon
    Modérateur
    Maître WordPress
    25688 contributions

    Il y a têtu et têtu.

    Ce plugin permet de faire ce que tu veux sans coder, tu peux même mettre les labels à l’intérieur du champ.

    Il suffit simplement d’ajouter une classe CSS dans ton style.css pour les éléments que tu veux personnaliser.

    🙂

    #1603484
    communication@feed-back.fr
    Participant
    Initié WordPress
    6 contributions

    J’ai bien installé Ninja Form mais lorsque je veux modifier le formulaire il ne se passe rien et j’ai une page blanche donc ça ne m’avance pas plus malheureusement !

    #1603495
    momofr@free.fr
    Modérateur
    Maître WordPress
    3214 contributions

    Pour les codes CSS tu dois les placer dans un champ dédié dans l’administration de ton thème si il y en a un, ce qui n’est pas certain.

    Je ne trouve pas la page de présentation de ton thème. Le champ la plupart du temps se nomme “Customs CSS”.

    Sinon tu mets AVANT le code du formulaire ceci :

    <style>
    .wpcf7 .text-field.clearfix > label {
      min-width: 90px;
      padding-right: 5px;
      text-align: right;
    }
    </style>

    #1603548
    communication@feed-back.fr
    Participant
    Initié WordPress
    6 contributions

    Merci beaucoup momofr@free.fr ça marche !

    #1603550
    communication@feed-back.fr
    Participant
    Initié WordPress
    6 contributions

    Une dernière chose, sauriez-vous me dire comment ajouter une image de fond svp ?

    J’ai bien entendu trouver la structure pour insérer une image mais ça ne marche pas quand je l’insère dans le code.

    Merci,

11 sujets de 1 à 11 (sur un total de 11)
  • Vous devez être connecté pour répondre à ce sujet.