Comment personnaliser le lien Enregistrer et reprendre

Aperçu

Souhaitez-vous personnaliser le lien Enregistrer et reprendre ? En utilisant un petit extrait CSS, vous pouvez facilement transformer le lien texte qui apparaît lorsque le module complémentaire Enregistrer et reprendre est activé pour qu'il ressemble à un bouton. Commençons !

Ajout de l'extrait CSS

Dans le cadre de cette documentation, nous supposerons que vous avez déjà créé votre formulaire et activé le module complémentaire Enregistrer et reprendre.

Cependant, si vous avez besoin d'aide pour activer ce module complémentaire pour votre formulaire, veuillez consulter ce guide utile.

Une fois votre formulaire créé et le module complémentaire activé, ajoutez simplement ce CSS à votre site et personnalisez les couleurs, la police, la taille de la police, etc., comme vous le souhaitez.

Si vous avez besoin d'aide sur comment et où ajouter des extraits CSS à votre site, veuillez consulter ce tutoriel.

Style pour tous les formulaires

a.wpforms-save-resume-button {
    padding: 10px;
    text-decoration: none !important;
    background-color: #e27730;
    border-radius: 3px;
    color: #ffffff !important;
    font-family: 'Roboto' !important;
    font-size: 17px !important;
    border: 1px solid #e27730;
    transition: all 0.3s ease-out;
}

a.wpforms-save-resume-button:hover {
    color: #e27730 !important;
	background-color: #ffffff;
}

Style pour des formulaires spécifiques

Si vous ne souhaitiez appliquer cette modification qu'à un formulaire spécifique, utilisez plutôt ce CSS.

form#wpforms-form-999 a.wpforms-save-resume-button {
    padding: 10px;
    text-decoration: none !important;
    background-color: #e27730;
    border-radius: 3px;
    color: #ffffff !important;
    font-family: 'Roboto' !important;
    font-size: 17px !important;
    border: 1px solid #e27730;
    transition: all 0.3s ease-out;
}

form#wpforms-form-999 a.wpforms-save-resume-button:hover {
    color: #e27730 !important;
	background-color: #ffffff;
}

Et maintenant, lorsque vous visualisez le formulaire, vous pouvez immédiatement voir la différence !

Souhaitez-vous également personnaliser la ligne d'objet de l'e-mail pour ce module complémentaire lorsque des notifications sont envoyées ? Consultez notre tutoriel sur Comment modifier la ligne d'objet de l'e-mail pour les notifications par e-mail Enregistrer et reprendre.