Como formatar um formulário de Formulário de Contato 7 em Divi

Como formatar um formulário de Formulário de Contato 7 em Divi

maio 2, 2023 0 Por Como Posso?
criar forma em divi

Diante disso, podemos perceber quando o nível de detalhamento poderemos cobrir dentro de nossos sites . No entanto, tudo depende do nível de criatividade que podemos ter para colocar esforço em nosso site. Pois, antes disso, falamos de um pequeno detalhe que você pode cobrir em poucos minutos, que é o ContactForm 7.

ContactForm 7 é um dos plug-ins de formulário mais usados ​​entre os usuários de diferentes páginas da web . Isso porque é uma forma muito eficiente de permitir que nossos visitantes interajam conosco através de uma página de contato ou outro local.

Mas, você tem o pequeno detalhe que muitas vezes acaba sendo um plugin de pesquisa um tanto simples, a ponto de muitos considerarem sua aparência um tanto feia . É por isso que temos que pensar em maneiras melhores de adaptar este popular plugin ao nosso tema.

Pensando nisso, podemos citar o Divi como um dos temas mais populares do WordPress e por sua estética. É muito bom olhar. Por causa disso, pode ser um pouco chato usar ContactForm 7 dentro de uma página da web com Divi, porque os dois estilos não combinam.

É por isso que temos que formatar ContactForm 7 para que possa ser visto no mesmo sentido estético que Divi. Veja abaixo como você pode fazer isso.

logotipo roxo divi

Personalizando ContactForm 7 for Divi

Na verdade, poder usar ContactForm 7 é uma bênção quando queremos receber uma mensagem de nossos visitantes e poder interagir com eles se quisermos. Mas se tivermos Divi como tema, podemos ter o pequeno problema de descobrir que esse plugin não combina de forma alguma com nosso tema.

É por isso que temos que reformular a aparência do ContactForm 7 e adaptá-lo à aparência do Divi. Podemos fazer isso de uma maneira muito simples. Para isso, devemos entrar no menu Divi , e a seguir na opção que aparece como “Opções de Tema” , aqui encontraremos o CSS customizado. Dentro disso, teremos que inserir o seguinte código .

Saiba +  Como colocar corretamente um protetor de tela anti-choque no celular

.wpcf7-text, .wpcf7-textarea, .wpcf7-captchar {

cor de fundo: #eee! importante;

fronteira: nenhum! importante;

largura: 100%! importante;

-moz-border-radius: 0! importante;

-webkit-border-radius: 0! importante;

raio da fronteira: 0! importante;

tamanho da fonte: 14px;

cor: # 999! importante;

preenchimento: 16px! importante;

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

dimensionamento da caixa: caixa de borda;

}

.wpcf7-submit {

cor: # 8B3C90! importante;

margem: 8px auto 0;

cursor: ponteiro;

tamanho da fonte: 20px;

peso da fonte: 500;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

raio da borda: 3px;

preenchimento: 6px 20px;

altura da linha: 1,7em;

fundo: transparente;

borda: 2px sólido;

-webkit-font-smoothing: suavizado;

-moz-osx-font-smoothing: tons de cinza;

-moz-transição: todos os 0.2s;

-webkit-transição: todos os 0.2s;

transição: todos os 0,2s;

}

.wpcf7-submit: hover {

cor de fundo: #eee;

border-color: #eee;

preenchimento: 6px 20px! importante;

}

Lembre-se de que em cada um dos lugares onde está escrito #eee e # 8B3C90 , você deve alterá-lo para poder personalizar as cores mais alinhadas com as que você usa em seu site. Agora você só precisa usar o construtor Divi para poder customizar o formulário .

projete-nos em divi

Por que não usar outras alternativas?

Você pode estar se perguntando por que não deveria usar melhor a ferramenta de formulário de contato que vem com o Divi. A resposta para isso é que realmente não é tão útil quanto usar ContactForm 7, não tem tantas opções e não é tão intuitivo e direto. É por isso que é melhor ficar com ContactForm 7 e modificá-lo conforme necessário.