Formulaires dupliqués dans WPForms

WPForms 1.1.4 - Formulaires dupliqués et styles de boutons de soumission

Nous travaillons dur pour ajouter toutes les fonctionnalités et améliorations demandées dans WPForms. Si tout se passe comme prévu, il y aura deux mises à jour majeures cette semaine. Voici les nouveautés de WPForms 1.1.4.

Dupliquer un formulaire en 1 clic

Beaucoup d'entre vous ont demandé un moyen facile de dupliquer les formulaires. Désormais, vous pouvez facilement dupliquer les formulaires en un seul clic.

Il suffit d'aller dans l'écran des formulaires, de placer votre souris sur le formulaire que vous souhaitez dupliquer et de cliquer sur le bouton "dupliquer".

Dupliquer un formulaire avec WPForms

Je sais que nos modèles de formulaires facilitent grandement la création de nouveaux formulaires WordPress. Cette fonctionnalité sera encore plus puissante car vous pourrez désormais dupliquer ces formulaires.

Avant même que vous ne posiez la question, nous travaillons sur un moyen facile de créer vos propres modèles de formulaires personnalisés. Bien qu'il y ait un moyen de le faire dès maintenant (cela nécessite juste un peu de codage).

Styles de boutons de soumission

WPForms vous permet d'ajouter des CSS personnalisés à tous les champs de saisie, à l'exception du bouton Submit. Je ne sais pas comment nous avons pu l'oublier, mais merci de nous l'avoir signalé.

Dans cette version, vous avez désormais la possibilité d'ajouter des styles CSS personnalisés à votre bouton de soumission.

Il vous suffit de cliquer sur le bouton Soumettre pour accéder à l'écran des paramètres où vous pouvez ajouter votre classe CSS personnalisée.

Classe du bouton de soumission

Améliorations + Corrections de bugs + Prochaines étapes

Outre ces deux nouveautés, nous avons également corrigé quelques bogues mineurs et amélioré des fonctionnalités existantes.

Nous prévoyons de publier la version 1.1.5 dans le courant de la semaine. Elle vous permettra d'exporter vos entrées de formulaire, de renvoyer des notifications par e-mail et d'améliorer considérablement l'interface utilisateur pour les pages d'entrée unique.

La semaine prochaine, nous lancerons l'intégration de GetResponse et deux autres fonctionnalités géniales.

Vous êtes à la recherche d'un constructeur de formulaires WordPress ? Obtenez WPForms aujourd'hui et débloquez toutes les fonctionnalités impressionnantes.

Divulgation: Notre contenu est soutenu par les lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, il se peut que nous recevions une commission. Voyez comment WPForms est financé, pourquoi c'est important, et comment vous pouvez nous soutenir.

Syed Balkhi

Syed est le cofondateur de WPForms et le fondateur et PDG de WPBeginner et Awesome Motive Inc. Il a commencé à utiliser WordPress en 2006 et s'est lancé avec succès dans une carrière d'entrepreneur au sein de la communauté WordPress.

Le meilleur plugin WordPress de construction de formulaires par glisser-déposer

Facile, rapide et sécurisé. Rejoignez plus de 6 millions de propriétaires de sites web qui font confiance à WPForms.

Veuillez activer JavaScript dans votre navigateur pour remplir ce formulaire.

27 commentaires sur "WPForms 1.1.4 - Duplicate Forms and Submit Button Styles"

  1. Bonjour,

    J'aime beaucoup WPForms, mais je n'arrive pas à changer la couleur du bouton. Je voudrais changer la couleur du bouton en #292929 et la couleur du texte en #ffffff. Et je voudrais que la couleur de survol du bouton soit #444444 et que la couleur du texte soit à nouveau #ffffff. Je ne veux pas modifier la taille, la forme ou la police du bouton. J'ai essayé plusieurs approches CSS, mais les couleurs des boutons n'ont pas changé. Quel code CSS spécifique dois-je ajouter au champ "Submit Button CSS Class" pour obtenir ces couleurs ?

    1. Bonjour David,

      Il suffit d'ajouter une classe css à votre bouton Submit. Disons que vous l'appelez : wpf-custom-button

      Ensuite, dans votre fichier CSS, ajoutez ce qui suit :

      .wpf-custom-button{ background: #292929 !important; color: #fff !important; }

      .wpf-custom-button:hover{background: #444 !important}

  2. J'utilise ce code CSS personnalisé pour modifier l'apparence du bouton de soumission, mais il n'a aucun effet sur l'apparence.

    .wpf-custom-button{ background: #ffdddd !important; color: #161616 !important; }

    1. Bonjour Bonnie ! Il y a plusieurs façons de styliser vos WPForms.

      L'une d'entre elles est le plugin CSS Hero, qui ne nécessite aucun codage - il suffit de pointer et de cliquer. Vous pouvez consulter notre guide sur la personnalisation de WPForms avec CSS Hero ici.

      Vous pouvez également styliser vos formulaires vous-même à l'aide de CSS. Nous avons publié un article sur la façon de styliser vos formulaires de contact avec CSS ici.

      Pour modifier l'arrière-plan de tous vos formulaires, vous pouvez utiliser un peu de CSS comme suit :

      .wpforms-form {background-color:black}

      L'article ci-dessus contient d'autres exemples et instructions sur la manière de procéder. J'espère que cela vous aidera ! N'hésitez pas à nous contacter si vous avez d'autres questions 🙂 .

  3. Bonjour,

    Je ne veux pas changer la couleur d'arrière-plan mais le texte de la description de la zone de texte. Ie : Nom, prénom, nom. etc...

    Merci de m'aider.

    1. Bonjour Arnold,

      Bonne question, et voici le CSS dont vous avez besoin pour le faire :

      div.wpforms-container-full .wpforms-form .wpforms-submit-container {
      text-align: center;
      }

      La seule chose à noter est que ce CSS centrera le bouton d'envoi sur tous les WPForms de votre site. Si vous préférez n'appliquer ce style qu'à un formulaire spécifique, vous pouvez découvrir comment le faire dans ce tutoriel (dans la section "Comment personnaliser le design de vos formulaires de contact", voir la méthode 2).

      J'espère que cela vous aidera 🙂 .

      1. Bonjour Arnold,

        De rien, je suis heureux de pouvoir vous aider ! Je vous souhaite une bonne journée 🙂 .

    1. Nous sommes ravis que cela ait fonctionné pour vous, Bryan, et nous vous remercions d'avoir pris le temps de nous le faire savoir !

      Je vous souhaite une bonne journée 🙂 .

  4. Je ne veux que trois champs dans mon formulaire et ils sont obligatoires, mais le formulaire ajoute un champ supplémentaire aléatoire en bas et il est différent à chaque fois que je recharge la page, généralement celui des trois que j'ai déjà choisi. Qu'est-ce qui se passe ? Comment résoudre ce problème ? Merci de votre compréhension.

    1. Bonjour Lena,

      D'après votre description, il semblerait que notre champ "honeypot" soit affiché. Ce champ n'est normalement pas visible par les humains, mais les robots spammeurs peuvent le voir. Ainsi, lorsqu'un champ "honeypot" est rempli dans un formulaire, nous savons qu'il s'agit d'un robot spammeur et nous pouvons empêcher la soumission de l'entrée.

      Comme je l'ai mentionné, ce champ ne devrait pas être visible par les humains. Il est donc très probable que votre thème applique un CSS qui rend accidentellement ce champ visible. Nous pouvons cependant rendre ce champ caché à nouveau, avec un peu de CSS :

      .wpforms-field-hp {
          display: none;
      }
      

      Si cela peut vous aider, voici un tutoriel de WPBeginner sur les moyens simples d'ajouter un CSS personnalisé comme celui-ci à votre site.

      J'espère que cela vous aidera 🙂 .

  5. Je suis confronté à un problème avec Wpforms, une fois que j'ai appuyé sur le bouton de soumission, la page réinitialise automatiquement tous les champs comme étant vides et une fois que j'ai réintroduit toutes les informations et appuyé sur le bouton de soumission, le formulaire est soumis correctement et redirigé sur la page de remerciement suivante. Mais à chaque fois que je dois saisir le formulaire deux fois, la première fois le formulaire réinitialise tous les champs lorsque l'utilisateur clique sur le bouton.

    1. Bonjour Marius,

      Bien sûr ! Pour ajuster ce style, vous aurez besoin d'un peu de CSS personnalisé. Nous avons partagé l'extrait CSS que vous devez ajuster dans ce tutoriel et je l'ai copié ci-dessous :

      div.wpforms-container-full .wpforms-form .wpforms-page-button.wpforms-page-next {
          background-color: #eee;
          border: 1px solid #ddd;
          color: #333;
      }
      

      Dans cet extrait, vous devez modifier les valeurs hexagonales (#eee, #dddet #333) - ils sont utilisés pour représenter les différentes couleurs. Si cela peut vous aider, j'aime bien un site qui s'appelle htmlcolorcodes.com pour rechercher les valeurs hexadécimales des couleurs souhaitées. Ces valeurs permettent d'ajuster respectivement la couleur d'arrière-plan, la couleur de la bordure et la couleur de la police.

      WPBeginner propose également un excellent tutoriel sur l 'ajout de CSS à votre site.

      J'espère que cela vous aidera ! Si vous avez d'autres questions à ce sujet, n'hésitez pas à nous contacter 🙂 .

  6. Bonjour les amis
    J'ai besoin d'aide, j'ai un problème avec mon site web qui affiche des formulaires de paiement 2 au lieu de 1.
    Je ne peux pas vous donner de lien, c'est sur localhost.

  7. Bonjour, quelqu'un pourrait-il m'aider ? J'ai besoin de créer un autre bouton dans le formulaire qui dirige les utilisateurs vers un autre site web avant qu'ils ne le soumettent. Est-ce possible ou dois-je ajouter du code ?

    1. Bonjour Manjinder !
      Actuellement, nous n'avons pas d'options intégrées dans WPForms pour ajouter des boutons autres que le bouton Submit, ou les boutons Next/Prev.
      Si vous voulez ajouter un bouton personnalisé, vous pouvez essayer d'utiliser le champ HTML et ajouter du code HTML pour le bouton et personnaliser son style avec un morceau de CSS.
      J'espère que cela vous aidera !
      Je vous souhaite une bonne journée 🙂 .

  8. un utilisateur un enregistrement unique - comment bloquer un utilisateur après un contact unique en mois, jour ou autre chose.

    J'utilise le formulaire wp pour collecter l'email des utilisateurs et quelques informations . le plugin fonctionne bien mais

    problèmes -

    1. Comment empêcher l'utilisateur de soumettre plusieurs formulaires comme le formulaire de contact ? Une fois qu'une personne a soumis le formulaire, elle doit être envoyée à la page de fin immédiatement après et ne doit pas demander les détails encore et encore.

    Une fois le formulaire rempli, la prochaine fois qu'il n'est pas nécessaire de demander les détails pendant au moins 10 à 15 jours, il doit être envoyé à la dernière page, c'est-à-dire à la page de remerciement.

    Aidez-nous

    1. Bonjour,

      L'entrée en double peut être due au fait que les utilisateurs actualisent la page lorsqu'un message de confirmation s'affiche. Dans ce cas, il existe plusieurs solutions pour éviter ce problème :

      1. Rediriger les utilisateurs vers une page de remerciement plutôt que vers un message de confirmation lors de l'envoi du formulaire.

      2. Utiliser la soumission de formulaire AJAX. Cette option peut être activée dans le générateur de formulaires lorsque vous allez dans Paramètres > Général et que vous sélectionnez Activer la soumission de formulaire AJAX.

      3. Si vous souhaitez empêcher un même utilisateur de soumettre plusieurs entrées, vous pouvez exiger des valeurs uniques pour certains champs. Pour ce faire, vous pouvez utiliser la fonctionnalité de l'addon Form Locker qui permet d'empêcher les entrées multiples d'un même utilisateur (disponible à partir du niveau Pro).

      J'espère que cela vous aidera ! Si vous avez une licence WPForms, vous avez accès à notre support par email, veuillez donc soumettre un ticket de support. Sinon, nous fournissons un support gratuit limité dans le forum de support WPForms Lite WordPress.org.

      Merci 🙂 .

    1. Hey Sam - Nous sommes désolés pour les désagréments que cela a pu causer.

      L'entrée en double peut être due au fait que les utilisateurs actualisent la page lorsqu'un message de confirmation s'affiche.

      Pour éviter les doublons, nous recommandons ce qui suit :

      Rediriger les utilisateurs vers une page de remerciement plutôt que vers un message de confirmation lors de la soumission du formulaire, ce qui est souvent une meilleure option, car les pages de remerciement peuvent être conçues pour aider vos utilisateurs de plusieurs façons. Pour plus de détails sur la mise en place d'une page de remerciement, ainsi que des exemples pour rendre cette page efficace, consultez ce tutoriel.

      Utiliser la soumission de formulaire AJAX. Cette option peut être activée dans le générateur de formulaires lorsque vous allez dans Paramètres > Général et que vous sélectionnez Activer la soumission de formulaire AJAX. Cette option permet d'éviter la création d'entrées en double lorsque les utilisateurs actualisent la page après la soumission du formulaire. Pour plus de détails concernant les soumissions de formulaires AJAX, veuillez consulter notre guide ici.

      Cela dit, si vous rencontrez toujours le même problème et que vous avez une licence WPForms, vous avez accès à notre support par email, veuillez donc soumettre un ticket de support. Sinon, nous fournissons un support gratuit limité dans le forum de support WPForms Lite WordPress.org.

      Merci.

Ajouter un commentaire

Nous sommes heureux que vous ayez choisi de laisser un commentaire. N'oubliez pas que tous les commentaires sont modérés conformément à notre politique de confidentialité et que tous les liens ne sont pas suivis. N'utilisez PAS de mots-clés dans le champ du nom. Engageons une conversation personnelle et constructive.

Ce formulaire est protégé par le tourniquet de Cloudflare et la politique de confidentialité et les conditions de service de Cloudflare s'appliquent.