Contact Form 7 è uno dei principali plugin per la creazione di form di contatto su siti realizzati con WordPress.

La sua semplice interfaccia e la sua grande versatilità sono i punti di forza di questo fantastico plugin, con Contact Form 7 puoi creare form di contatto in modo facile e veloce.

L’unica pecca, se così possiamo definirla, di Contact Form 7 è il design di default dei form generati: molto basico e, soprattutto, su una colonna, molto limitante in moltissimi contesti.

In questo articolo ti spiego la miglior configurazione base da utilizzare per Contact Form 7.

La configurazione base del modulo di Contact Form 7

Questa è la porzione di codice HTML che dovete inserire all’interno del modulo:

HTML

<div id="responsive-form" class="clearfix">
    <div class="form-row">
        <div class="column-half">Il tuo Nome* [text* your-name]</div>
        <div class="column-half">La tua Email* [email* your-email]</div>
    </div>
    <div class="form-row"><div class="column-full">Il tuo Messaggio* [textarea your-message]</div></div>
    <div class="form-row"><div class="column-full">[submit "Invia"]</div></div>
</div>

Questa, invece, è la porzione di CSS da inserire all’interno della sezione “CSS Personalizzato”:

CSS

/** Plugin – Contact Form 7 **/
#responsive-form {
    width: 100%;
    max-width: 600px /* Larghezza del Form */;
    margin: 0 auto;
}

.form-row {
    width: 100%;
}

.column-half,
.column-full {
    position: relative;
    float: left;
    width: 100%;
    padding: 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

/** Mobile **/
@media only screen and (min-width: 48em) {
    .column-half {
        width: 50%;
    }
}

Personalizza ogni aspetto del design!

Se desiderate migliorare l’aspetto del frontend e del design del bottone di invio e del messaggio visualizzato dopo l’invio del modulo, potete personalizzare il CSS seguente e inserirlo sempre all’interno di “CSS Personalizzato”.

CSS EXTRA

/** Bottone **/
.wpcf7-submit {
    color: white; /** Colore del Testo **/
    background: #000; /** Colore dello Sfondo **/
    float: right; /** Posizione del Bottone **/
}

.wpcf7-submit:hover {
    color: #000; /** Colore del Testo **/
    background: #f3f3f3; /** Colore dello Sfondo **/
}

/** Messaggio di Successo **/
div.wpcf7-mail-sent-ok {
    font-family: ‘Raleway’;
    color: white;
    background: #8bc34a;
    text-shadow: none;
    border: none;
}
Tags: