Sélectionner une page

Pour mes formulaires de contact basiques, j’utilise quasiment systématiquement le plugin : Contact Form 7 ! Petit problème, le formulaire ne ressemble à rien… Mais ce n’est pas irrémédiable.

Vous souhaitez avoir un formulaire qui ressemble à celui-ci – Voir ? Suivez le guide !

Configurez Contact Form 7 sur votre WordPress

Comme d’habitude, rendez vous dans votre Back Office WordPress et ajoutez une extension. Recherchez le plugin Contact Form 7 et installez-le !

Installez et configurez contact form 7 sur DIVI

Le plugin est installé, il vous faut maintenant configurer vos premiers formulaires. Je vous invite à consulter l’article d’Alex de WP Marmite sur le sujet : https://wpmarmite.com/contact-form-7/

Intégrer le [SHORTCODE] de votre formulaire dans un module de texte – Votre formulaire est en ligne…

Formulaire de contact sans personnalisation du CSS

Soyons honnête, c’est moche ! C’est donc là qu’intervient le CSS pour venir bonifier tout cela.

Ajoutez le CSS dans votre Thème Enfant

Copiez-collez simplement le bout de code ci-dessous dans votre Thème Enfant (Child Theme).

/*---------------------------------*/
/*---CONTACT FORM 7 - FORMULAIRE---*/
/*---------------------------------*/

/*- Modification de l'aspect du formulaire -*/
.wpcf7-text, .wpcf7-textarea, .wpcf7-captchar {
    background-color: #f8f8f8 !important;
    border: none !important;
    width: 100% !important;
    -moz-border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    border-radius: 0 !important;
    font-size: 14px;
    color: #333 !important;
    padding: 16px !important;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-family: Open Sans !important
}

/*- Personnaliser le bouton d'envoi -*/
.wpcf7-submit {
    color: #000 !important;
    margin: 8px auto 0;
    cursor: pointer;
    text-transform: Uppercase;
    font-size: 20px;
    font-weight: 600;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 0px;
    padding: 6px 20px;
    line-height: 1.7em;
    background: transparent;
    border: 2px solid;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -moz-transition: all 0.2s;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}

/*- HOVER - Personnaliser le bouton d'envoi -*/
.wpcf7-submit:hover {
    background-color: #000;
    border-color:#000;
    color: #fff !important;
    padding: 6px 20px !important;
}

TADA ! Un beau formulaire de contact comme celui-ci !

Vous n’avez plus qu’à venir modifier les propriétés dans le CSS pour obtenir le design que vous souhaitez obtenir.

Good luck !