Você gostaria de criar um formulário de contato ao seu site graças ao módulo Formulário de Contato de Divi? Aqui estão 3 ideias de personalização…
Os formas Os detalhes de contato são uma parte essencial de muitos sites. Seu principal objetivo é ser intuitivo e ajudar os visitantes a entrar em contato com facilidade.
Mas isso não significa que todos formas os contatos devem ter uma aparência precisa e predefinida. Você pode facilmente combinar uma experiência intuitiva com um belo design. É exatamente isso que vamos fazer neste tutorial.
Compartilharemos 3 designs exclusivos do módulo Formulário de Contato de Divi que você pode criar usando apenas as opções internas do Divi.
Vamos!
Visão geral dos designs do módulo Divi Contact Form
Versões para desktop
Vamos começar dando uma olhada na versão desktop dos diferentes designs do módulo Formulário de Contato que projetaremos neste tutorial.
Versões móveis
E aqui está como eles se parecem em tamanhos de tela menores:
Baixe o DIVI agora!!!
Como personalizar o módulo Divi Contact Form: 3 exemplos
Leia também: Divi: Como criar uma seção de membros da equipe como um carrossel
Criação do formulário de contato #1
Adicione uma nova seção
Fundo gradiente
Vamos começar com o primeiro exemplo! Adicione uma nova seção, vá para as configurações de plano de fundo e adicione um plano de fundo gradiente.
- Paradas de gradiente
- 34%: #4c00ff
- 34%: #ffd400
- Tipo: Redondo
- Direção do Gradiente: Inferior Esquerdo
espaçamento
Em seguida, vá para a opção Espaçamento na guia Design e altere as configurações da seguinte maneira.
- Preenchimento (superior e inferior): 200px
Adicione uma nova linha
Estrutura da coluna
Adicione uma nova linha usando a seguinte estrutura de coluna:
Coluna 1: cor de fundo
Sem adicionar nenhum módulo ainda, abra as configurações de linha, depois as configurações da coluna 1 e adicione a cor de fundo abaixo
- Plano de fundo: rgba(255,255,255,0.55)
Coluna 1: imagem de plano de fundo
Adicione também uma imagem de plano de fundo à primeira coluna.
- Repetição da imagem de fundo: sem repetição
- Mesclagem da Imagem de Fundo: Tela
Coluna 2: imagem de plano de fundo
E uma cor de fundo branca para a segunda coluna.
- Fundo: #ffffff
dimensionamento
Em seguida, modifique os parâmetros de dimensionamento.
- Equalizar alturas das colunas: SIM
espaçamento
Remova também todos os preenchimentos personalizados padrão.
- Preenchimento (superior e inferior): 0px
Raio da borda da coluna
Adicione um raio de borda a ambas as colunas na guia avançada.
border-radius: 10px;
Adicionar um módulo de texto à coluna 1
Adicionar conteúdo
É hora de começar a adicionar os diferentes módulos! Adicione um módulo de texto à primeira coluna com o conteúdo de sua escolha.
Configurações de texto
Em seguida, vá para a guia Design do módulo Texto e faça algumas alterações.
- Texto:
- Fonte: Satisfaça
- Cor do Texto: #333333
- Tamanho: 100px
- Altura da linha: 1 cm
- Alinhamento: Centro
espaçamento
Adicione também valores de preenchimento personalizados.
- Preenchimento (superior): 600px
- Preenchimento (inferior): 100px
Caixa de sombra
Para adicionar profundidade ao design, use uma sombra de caixa sutil.
- Intensidade do desfoque de sombra da caixa: 80px
- Força de propagação da sombra da caixa: -16px
- Cor da sombra: rgba(0,0,0,0.3)
Adicionar um módulo de imagem à coluna 2
Enviar Imagem
Continue adicionando um módulo Image à segunda coluna. Carregue uma imagem de sua escolha.
dimensionamento
Altere as configurações de dimensionamento para este módulo.
- Largura: 25% (desktop), 50% (tablet), 60% (telefone)
- Alinhamento do Módulo: Centro
espaçamento
Crie uma sobreposição usando uma margem superior negativa.
- Margem (superior): -60%
fronteira
Modifique as bordas da imagem da seguinte maneira:
- Cantos arredondados: 100px (todos os cantos)
Adicione o módulo Text #1 à coluna 2
Adicionar conteúdo
Logo abaixo do módulo Imagem, adicione um módulo Texto com conteúdo.
Configurações de texto
Edite as configurações de texto para este módulo.
- Texto:
- Fonte: Satisfaça
- Cor do Texto: #333333
- Tamanho do texto: 44px
- Orientação: Centro
Adicione o módulo Text #2 à coluna 2
Adicionar conteúdo
Em seguida, adicione outro módulo de texto.
Configurações de texto
Altere também as configurações de texto para este módulo.
- Texto:
- Fonte: Arial
- Cor do texto: #ffd400
- Cor do texto: 18px
- Espaçamento entre letras: 2px
- Orientação: Centro
espaçamento
Em seguida, adicione uma margem inferior.
- Margem (Inferior): 100px
Adicione o módulo Formulário de contato à coluna 2
Ative a opção "Make Fullwidth" no campo Nome e email
O último módulo necessário é o módulo Formulário de contato. Antes de fazer qualquer outra coisa, abra os campos de nome e e-mail e altere o layout.
- Fazer largura total: sim
Adicionar um campo de assunto
Para criar este design, adicionamos outro campo para o assunto.
proteção contra spam
Em seguida, desative a opção captcha.
- Usar captcha básico: NÃO
Configurações de texto do campo de formulário
Faça algumas alterações nas configurações de texto do campo de formulário deste módulo de formulário de contato
- Campos :
- Cor de fundo: rgba(255,255,255,0)
- Fonte: Arial
- Peso da Fonte: Leve
- Tamanho do texto: 16px
- Espaçamento entre letras: 2px
Configurações de botão
Também estamos mudando a aparência dos botões.
- Use tamanho personalizado para o botão: SIM
- Botão:
- Cor do texto: #ffd400
- Largura da borda: 0 pixels
- Espaçamento entre letras: 2px
- Fonte: Arial
- Estilo de fonte: U
- Cor do sublinhado: #4c00ff
espaçamento
Em seguida, adicione alguns valores de preenchimento personalizados.
- Preenchimento (inferior): 100px
- Preenchimento (esquerda e direita): 50px
Fronteira
E adicione uma borda inferior sutil a cada um dos campos.
- Entradas Largura da Borda Inferior: 2px
- Inputs Cor da borda inferior: #efefef
Espaçamento de campos individuais
Por fim, adicione uma margem inferior a cada um dos campos individuais, exceto o campo de mensagem.
- Margem (Inferior): 20px
Criação do formulário de contato #2
Adicione uma nova seção
Fundo gradiente
Vamos para o próximo exemplo! Adicione uma nova seção com um fundo gradiente.
- Paradas de gradiente:
- 50%: #562fef
- 50%: #ffffff
- Tipo de gradiente: linear
espaçamento
Adicione valores de preenchimento personalizados às configurações de espaçamento nesta seção.
- Preenchimento (superior e inferior): 200px
Adicione uma nova linha
Estrutura da coluna
Adicione uma nova linha usando a seguinte estrutura de coluna:
Cor de fundo
Sem adicionar nenhum módulo ainda, abra as configurações de linha e adicione uma cor de fundo à linha.
- Cor de fundo: #ffffff
fundo gradiente de 2 colunas
Adicione um plano de fundo gradiente à segunda coluna da linha.
- Paradas de gradiente:
- 0%: #9932ff
- 100%: #562fef
- Tipo: Linear
- Direção: 160 graus
dimensionamento
Modifique também os parâmetros de dimensionamento da linha.
- Use a largura da calha personalizada: SIM
- Largura da calha: 1
- Equalizar alturas das colunas: SIM
espaçamento
Em seguida, adicione valores de espaçamento personalizados.
- Linha :
- Preenchimento (superior e inferior): 0px
- Coluna 1:
- Preenchimento: 100px (superior), 50px (inferior)
- Preenchimento (esquerda e direita): 50px
- Coluna 2:
- Preenchimento (superior e inferior): 100px
- Preenchimento (esquerda e direita): 50px
Fronteira
Adicione '20px' a cada uma das bordas da linha.
Caixa de sombra
Por fim, adicione uma sombra de caixa sutil à linha.
- Intensidade do desfoque de sombra da caixa: 45px
- Força de propagação da sombra da caixa: -11px
- Cor do Sadow: rgba(0,0,0,0.3)
Adicionar um módulo de texto à coluna 1
Adicionar conteúdo
É hora de começar a adicionar os módulos! Comece com um módulo de texto na primeira coluna.
Configurações de texto
Edite as configurações de texto para este módulo.
- Texto:
- Peso da fonte: Ultra Bold
- Estilo da fonte: TT
- Cor: #562fef
- Tamanho: 100px (computador), 80px (tablet), 60px (telefone)
- Espaçamento entre letras: -10px
- Altura da linha: 1 cm
espaçamento
Adicione também uma margem inferior.
- Margem (Inferior): 50px
Adicione o módulo Formulário de contato à coluna 1
Elementos
O segundo módulo que precisaremos na primeira coluna é um módulo de formulário de contato Depois de adicionar o módulo, desative a opção 'Usar captcha básico'.
- Usar captcha básico: NÃO
Configurações de texto do campo de formulário
Em seguida, altere a cor de fundo dos campos do formulário.
- Cor de fundo dos campos: #ffffff
Configurações de botão
Também brinque com as configurações do botão para criar um botão de ícone em vez de um botão de texto.
- Usar estilos personalizados para botão: SIM
- Botão:
- Tamanho do texto: 73px
- Cor do texto: rgba(0,0,0,0) (Padrão),
- Cor de fundo: rgba(255,255,255,0) (Passe o mouse)
- Largura da borda: 0px
- Cor do ícone: #9932ff
- Mostrar apenas o ícone ao passar o mouse para o botão: NÃO
Caixa de sombra
Por fim, adicione uma sombra de caixa sutil a cada um dos campos.
- Intensidade do Desfoque de Sombra da Caixa: 36px
- Força de propagação da sombra da caixa: -14px
- Cor da sombra: rgba(0,0,0,0.3)
Adicionar um módulo de texto à coluna 2
Adicionar conteúdo
O primeiro módulo que precisaremos na segunda coluna é outro módulo de texto.
Configurações de texto
Depois de adicionar o conteúdo, edite as configurações de texto para este módulo.
- Texto:
- Peso da fonte: Ultra Bold
- Estilo da fonte: TT
- Cor: #ffffff
- Tamanho: 23px
- Espaçamento entre letras: -1px
Adicione o Módulo #1 do Blurb à Coluna 2
Adicionar conteúdo
O segundo módulo que precisaremos é um módulo Blurb. Vá em frente e insira algumas informações de contato.
Selecione o ícone
Em seguida, escolha um ícone correspondente.
Configurações de ícone
Altere as configurações desse ícone.
- Cor do ícone: #ffffff
- Posicionamento da imagem/ícone: à direita
Configurações de texto do título
Continue fazendo algumas alterações nas configurações de texto do título a seguir.
- Tamanho do texto do título: 15px
- Espaçamento da letra do título: -0,5 pixel
espaçamento
E adicione uma margem superior.
- Margem (superior): 120px
Clonar módulo Blurb duas vezes
Assim que terminar de editar o primeiro módulo Blurb, você pode prosseguir e clonar o módulo duas vezes.
Modifique o conteúdo e o ícone das duas duplicatas
Edite o conteúdo e os ícones das duas duplicatas para compartilhar diferentes tipos de informações de contato com os visitantes.
Altere o espaçamento das duas duplicatas
A margem superior das duas duplicatas também deve ser alterada.
- Margem (superior): 30px
Criação do formulário de contato #3
Adicione uma nova seção
Cor de fundo
Vamos para o terceiro exemplo! Adicione uma nova seção com a seguinte cor de fundo:
- Cor de fundo: #3491CE
espaçamento
Continue adicionando valores de preenchimento personalizados nas configurações de espaçamento.
- Preenchimento (superior e inferior): 200px
Adicionar linha nº 1
Estrutura da coluna
Em seguida, adicione uma nova linha usando a seguinte estrutura de coluna:
Adicionar um módulo de texto
Adicionar conteúdo
É hora de começar a adicionar módulos! O primeiro módulo que precisaremos adicionar à primeira coluna é um módulo de texto. Insira um conteúdo de sua escolha.
Configurações de texto
Em seguida, altere as configurações de texto.
- Texto:
- Peso da fonte: Ultra Bold
- Cor do texto: rgba(255,255,255,0.24)
- Tamanho do texto: 100px (desktop), 70px (tablet), 36px (telefone)
- Altura da linha: 1 cm
- Orientação: Centro
espaçamento
Adicione também uma margem inferior negativa.
- Margem (Inferior): -100px
Adicionar linha 2
Estrutura da coluna
A segunda linha que precisamos para completar este exemplo contém a seguinte estrutura de colunas:
Plano de fundo gradiente
Sem adicionar nenhum módulo ainda, abra as configurações de linha e adicione um fundo gradiente.
- Paradas de gradiente:
- 50%: #11CE84
- 50%: #10C77F
- Tipo de gradiente: linear
- Direção: 160 graus
dimensionamento
Modifique também os parâmetros de dimensionamento.
- Use a largura da calha personalizada: SIM
- Largura da calha: 1
- Equalizar alturas das colunas: SIM
espaçamento
Em seguida, adicione alguns valores de preenchimento.
- Preenchimento: 150px (superior), 100px (inferior)
- Preenchimento: 50px (esquerda e direita)
Fronteira
Em seguida, vá para as configurações de borda e adicione '20px' a cada um dos cantos. Use também uma borda inferior.
- Cantos arredondados: 20px
- Largura da borda inferior: 10px
- Cor da borda inferior: #1ba35a
Caixa de sombra
Complete as configurações de linha adicionando uma sombra de caixa sutil.
- Intensidade do Desfoque de Sombra da Caixa: 80px
- Força de propagação da sombra da caixa: -24px
- Cor da sombra: rgba(0,0,0,0.3)
Adicione o módulo Formulário de contato à coluna 1
Ative a opção "Make Fullwidth" no campo Nome e email
O primeiro módulo que precisamos na primeira coluna da linha é um módulo de formulário de contato. Abra o campo de nome e e-mail e altere as configurações de layout.
- Fazer largura total: SIM
Elementos
Em seguida, desative o captcha.
- Usar captcha básico: NÃO
Configurações de botão
E altere as configurações do botão.
- Usar estilos personalizados para botão: SIM
- Cor do texto do botão: #ffffff
- Paradas de gradiente:
- 50%: #3AA0E3
- 50%: #3491CE
- Tipo de Gradiente: Linear
- Direção do gradiente: 155 graus -
- Largura da borda do botão: 0 pixels
- Raio da borda do botão: 10px
- Força de propagação da sombra da caixa: -2px
- Cor da sombra: #0a60af
Veja também: Divi: Como personalizar a cesta e os ícones de pesquisa do módulo "Menu Fullwidth"
Fronteira
Também adicionamos '5px' de cantos arredondados a cada um dos campos.
Adicionar um módulo de texto à coluna 2
Adicionar conteúdo
Na segunda coluna, o primeiro módulo que precisaremos é um módulo de texto. Vá em frente e insira algum conteúdo.
Cor de fundo
Em seguida, altere a cor de fundo.
- Plano de fundo: rgba(255,255,255,0.13)
Configurações de texto
Também edite com configurações de texto.
- Texto:
- Peso da fonte: Leve
- Cor do texto: #ffffff
- Tamanho do texto: 15px
- Espaçamento entre letras: -0,5px
espaçamento
E adicione preenchimento personalizado para dar ao módulo espaço para respirar.
- Preenchimento (superior e inferior): 12px
- Preenchimento (esquerda e direita): 10px
Fronteira
Também adicionamos '20px' nos cantos superior esquerdo e inferior esquerdo. Além disso, adicionaremos uma borda esquerda.
- Cantos arredondados: 20px (superior esquerdo e inferior esquerdo)
- Largura da Borda Esquerda: 34px
- Cor da borda esquerda: #edf000
visibilidade
Para fazer com que esse design corresponda a diferentes tamanhos de tela, desativaremos o módulo Texto no telefone e no tablet.
Clonar módulo de texto duas vezes
Quando terminar de editar o primeiro módulo de texto, vá em frente e clone o módulo duas vezes.
Modifique o conteúdo das duas duplicatas
Altere o conteúdo das duas duplicatas para outra coisa.
Altere o espaçamento das duas duplicatas
E adicione uma margem superior para criar espaço entre cada um dos módulos.
- Margem (superior): 20px
Modifique a borda das duas duplicatas
Por fim, altere a cor da borda esquerda de cada uma das duplicatas individualmente.
- Cor 1: #00faff
- Cor 2: #00f76f
Veja também nosso artigo sobre Como criar um controle deslizante sanfonado responsivo
Visão geral
Versão para desktop
Agora que passamos por todas as etapas, vamos dar uma olhada final nos designs do módulo Divi Contact Form na área de trabalho.
Móvel Esteira
E aqui está o que você pode esperar dos designs de módulo de formulário de contato do Divi em tamanhos de tela menores:
Baixe o DIVI agora!!!
Conclusão
Nesta postagem, compartilhamos 3 designs incríveis de módulos de formulário de contato Divi que você pode usar e modificar facilmente para qualquer site que criar.
Os formas Os contatos são uma parte essencial de muitos sites, por isso é importante garantir que seu design convença os visitantes a entrar em contato.
Esperamos que este tutorial o inspire para seus próximos projetos Divi. Se você tiver alguma dúvida ou sugestão, encontre-nos em a seção de comentários para discutir isso.
Você também pode consultar nossos recursos, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet.
Não hesite em consultar também o nosso guia sobre o Criação de blog WordPress ou aquele em Divi: o melhor tema WordPress de todos os tempos.
Mas enquanto isso, compartilhe este artigo em suas diferentes redes sociais.
...
