CONTACT FORM 7 SU DUE COLONNE CON IMPREZA & ZEPHYR

La realizzazione di un modulo Contact Form 7 a due colonne all’interno dei temi Impreza e Zephyr, mediate un’integrazione di codice HTML e di codice CSS personalizzati, permette di ottenere un layout pulito, moderno e perfettamente integrato con lo stile visivo del sito web. Grazie alla flessibilità del page builder nativo ed alla compatibilità con le classi responsive del tema, il form viene strutturato in modo elegante, mantenendo una perfetta leggibilità sui dispositivi fissi e mobili.

UN ESEMPIO DI PERSONALIZZAZIONE PER IL TEMA IMPREZA

HTML

<div class="cf7-row">
  <div class="cf7-col">
    [text* your-name placeholder "Nome e Cognome *"]
  </div>

  <div class="cf7-col">
    [email* your-email placeholder "E-mail *"]
  </div>
</div>

<div class="cf7-row">
  <div class="cf7-col">
    [text* your-subject placeholder "Oggetto *"]
  </div>

  <div class="cf7-col">
    [text your-company placeholder "Azienda"]
  </div>
</div>

[textarea* your-message placeholder "Messaggio *"]

[acceptance acceptance-419] Acconsento al trattamento dei dati personali comunicati. * [/acceptance]

[submit "Invia"]

CSS

/* Wrapper righe */
.wpcf7 form .cf7-row {
  display: flex;
  gap: 25px;
  margin-bottom: 20px;
}

/* Colonne */
.wpcf7 form .cf7-col {
  flex: 1;
}

/* Campi al 100% */
.wpcf7 form .cf7-col input,
.wpcf7 form .cf7-col select,
.wpcf7 form .cf7-col textarea {
  width: 100%;
}

/* Responsive */
@media (max-width: 768px) {
  .wpcf7 form .cf7-row {
    flex-direction: column;
  }
}

/* Impreza-like (facoltativo) */
.wpcf7 form .cf7-row {
  align-items: flex-start;
}

.wpcf7 form .cf7-col .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

UN ESEMPIO DI PERSONALIZZAZIONE PER IL TEMA ZEPHYR

HTML

<div class="cf7-row">
  <div class="cf7-col">
    [text* your-name placeholder "Nome e Cognome *"]
  </div>

  <div class="cf7-col">
    [email* your-email placeholder "E-mail *"]
  </div>
</div>

<div class="cf7-row">
  <div class="cf7-col">
    [text* your-subject placeholder "Oggetto *"]
  </div>

  <div class="cf7-col">
    [text your-company placeholder "Azienda"]
  </div>
</div>

[textarea* your-message placeholder "Messaggio"]

[acceptance acceptance-765] Acconsento al trattamento dei dati personali comunicati. * [/acceptance]

[submit "Invia"]

CSS

/* Layout base */
.cf7-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.cf7-col {
  flex: 1;
}

/* Campi full width */
.wpcf7 textarea {
  width: 100%;
}

/* Responsive */
@media (max-width: 768px) {
  .cf7-row {
    flex-direction: column;
  }
}