Às vezes, é necessário fazer um formulário de contato mais completo ou com campos que o formulário nativo do Divi não tem. Nesses casos, eu uso o plugin Contact Form 7 e juntamente o plugin Divi Contact Form 7 para ajustar o estilo direto no editor. O que nenhum dos dois oferece, é uma maneira de fazer os campos ficarem em 2 ou 3 colunas sem código. O Contact Form 7 aceita classes, então a maneira é definir classes para os campos que devem ocupar só uma parte da tela. O tutorial de onde tirei este código, está disponível em: https://deliciousthemes.com/contact-form-7-fields-columns/.
/*Formulário Contact Form 7*/
.one-half,
.one-third {
position: relative;
margin-right: 4%;
float: left;
margin-bottom: 20px;
}
.one-half {
width: 48%;
}
.one-third {
width: 30.66%;
}
.last {
margin-right: 0 !important;
clear: right;
}
@media only screen and (max-width: 767px) {
.one-half, .one-third {
width: 100%;
margin-right: 0;
}
}
Além disso, é necessário englobar os campos com divs com a classe escolhida. A primeira parte desse formulário que eu fiz ficou assim:
<h4>Dados do Cliente</h4>
<div class="one-half">
<label> Nome
[text* nome]
</label>
</div>
<div class="one-half last">
<label> Empresa
[text empresa]
</label>
</div>
<div class="one-half">
<label> Setor/Cargo
[text setor]
</label>
</div>
<div class="one-half last">
<label> Telefone
[tel* telefone]
</label>
</div>
<label> E-mail
[email* email]
</label>
