5 maneiras exclusivas de estilizar o módulo de formulário de contato da Divi

Os formulários de contato são uma parte vital de muitos sites. Seu objetivo principal é ser intuitivo e ajudar os visitantes a entrarem em contato com facilidade. Mas isso não significa que todos os formulários de contato devam ter uma aparência determinada e predefinida. Você pode combinar facilmente uma experiência intuitiva com um belo design. Isso é exatamente o que faremos neste post. Vamos compartilhar 5 designs de módulo de formulário de contato Divi exclusivos que você pode construir usando apenas as opções integradas do Divi.

Vamos lá!

Visualização dos designs de módulo do formulário de contato da Divi

Área de Trabalho

Vamos começar dando uma olhada nos designs do módulo de formulário de contato Divi no desktop.

Móvel

E é assim que os designs do módulo de formulário de contato Divi se parecem em tamanhos de tela menores:

5 maneiras exclusivas de estilizar o módulo de formulário de contato da Divi

Inscreva-se no nosso canal no Youtube

Criação do formulário de contato nº 1

Adicionar nova seção

Fundo Gradiente

Vamos começar com o primeiro exemplo! Adicione uma nova seção, vá para as configurações de fundo e adicione um fundo gradiente.

• Cor 1: # 4c00ff
• Cor 2: # ffd400
• Tipo de gradiente: radial
• Direção Radial: Esquerda Inferior
• Posição inicial: 34%
• Posição final: 34%

Espaçamento

Em seguida, vá para as configurações de espaçamento e adicione alguns valores de preenchimento personalizados.

• Preenchimento superior: 200px
• Preenchimento inferior: 200 px

Adicionar nova linha

Estrutura da Coluna

Adicione uma nova linha usando a seguinte estrutura de coluna:

Cor de fundo da coluna 1

Sem adicionar nenhum módulo ainda, abra as configurações de linha e adicione um fundo gradiente da coluna 1.

• Cor de fundo da coluna 1: rgba (255,255,255,0,55)

Imagem de fundo da coluna 1

Adicione também uma imagem de plano de fundo à primeira coluna.

• Repetição da imagem de fundo da coluna 1: sem repetição
• Coluna 1 Mistura de imagem de fundo: tela

Cor de fundo da coluna 2

E uma cor de fundo branca para a segunda coluna.

• Cor de fundo da coluna 2: #ffffff

Dimensionamento

Altere as configurações de dimensionamento a seguir.

• Equalize a altura das colunas: Sim

Espaçamento

Remova também todo o preenchimento personalizado padrão.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px

Raio da borda da coluna

Adicione algum raio de borda a ambas as colunas na guia avançada.

border-radius: 10px;

Adicionar Módulo de Texto à Coluna 1

Adicionar conteúdo

É hora de começar a adicionar os vários módulos! Adicione um Módulo de Texto à primeira coluna com algum conteúdo de sua escolha.

Configurações de texto

Em seguida, vá para as configurações de texto e faça algumas alterações.

• Fonte do texto: Satisfy
• Cor do texto: # 333333
• Tamanho do texto: 100px
• Altura da linha de texto: 1em
• Orientação do Texto: Centro

Espaçamento

Adicione alguns valores de preenchimento personalizados também.

• Enchimento superior: 600px
• Preenchimento inferior: 100px

Sombra da caixa

Para adicionar profundidade ao design, use uma sombra de caixa sutil.

• Força do desfoque de sombra da caixa: 80 px
• Força de propagação da sombra da caixa: -16px
• Cor da sombra: rgba (0,0,0,0.3)

Adicionar Módulo de Imagem à Coluna 2

Carregar imagem PNG

Continue adicionando um Módulo de imagem à segunda coluna. Faça upload de uma imagem PNG de sua escolha.

Dimensionamento

Altere as configurações de dimensionamento deste módulo.

• Largura: 25% (desktop), 50% (tablet), 60% (telefone)
• Alinhamento do Módulo: Centro

Espaçamento

Crie uma sobreposição usando alguma margem superior negativa.

• Margem superior: -60%

Adicionar Módulo de Texto # 1 à Coluna 2

Adicionar conteúdo

Logo abaixo do Módulo de Imagem, adicione um Módulo de Texto com algum conteúdo.

Configurações de texto

Altere as configurações de texto deste módulo.

• Fonte do Texto: Satisfatório
• Cor do texto: # 333333
• Tamanho do texto: 44px
• Orientação do Texto: Centro

Adicionar Módulo de Texto # 2 à Coluna 2

Adicionar conteúdo

Adicione outro módulo de texto a seguir.

Configurações de texto

Altere também as configurações de texto deste módulo.

• Fonte do Texto: Arial
• Cor do texto: # ffd400
• Tamanho do texto: 18 px
• Espaçamento entre letras do texto: 2px
• Orientação do Texto: Centro

Espaçamento

Adicione alguma margem inferior a seguir.

• Margem inferior: 100px

Adicionar Módulo de Formulário de Contato à Coluna 2

Habilite a opção 'Make Fullwidth' no campo Nome e Email

O último módulo necessário é o Módulo de formulário de contato. Antes de qualquer coisa, abra os campos de nome e email e altere o layout.

• Faça largura total: Sim

Adicionar campo de assunto

Para criar este design, adicionamos outro campo para o assunto.

Elementos

Em seguida, desative a opção de captcha.

• Exibir Captcha: Não

Configurações de texto do campo do 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.

• Cor de fundo do campo do formulário: rgba (255,255,255,0)
• Fonte do campo do formulário: Arial
• Peso da fonte do campo do formulário: leve
• Tamanho do texto do campo do formulário: 16 px
• Espaçamento entre letras do campo do formulário: 2px

Configurações de botão

Estamos modificando a aparência do botão também.

• Use estilos personalizados para botão: Sim
• Cor do texto do botão: # ffd400
• Largura da borda do botão: 0 px
• Espaçamento entre letras dos botões: 2 px
• Fonte do botão: Arial
• Estilo da fonte: sublinhado
• Cor de sublinhado: # 4c00ff

Espaçamento

Adicione alguns valores de preenchimento personalizados a seguir.

• Preenchimento inferior: 100px
• Preenchimento esquerdo: 50 px
• Preenchimento direito: 50 px

Fronteira

E adicione uma borda inferior sutil a cada um dos campos.

• Largura da borda inferior: 2 px
• Cor da borda inferior: #efefef

Espaçamento de campo individual

Por último, mas não menos importante, adicione alguma margem inferior a cada um dos campos individuais, exceto para o da mensagem.

• Margem inferior: 20px

Criação do formulário de contato nº 2

Adicionar nova seção

Fundo gradiente

Vamos para o próximo exemplo! Adicione uma nova seção com um fundo gradiente.

• Cor 1: # 562fef
• Cor 2: #ffffff
• Tipo de gradiente: Linear
• Posição inicial: 50%
• Posição final: 50%

Espaçamento

Adicione alguns valores de preenchimento personalizados às configurações de espaçamento desta seção.

• Preenchimento superior: 200px
• Preenchimento inferior: 200 px

Adicionar 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 da linha e adicione uma cor de fundo à linha.

• Cor de fundo: #ffffff

Fundo Gradiente da Coluna 2

Adicione um fundo gradiente à segunda coluna da próxima linha.

• Cor 1: # 9932ff
• Cor 2: # 562fef
• Tipo de gradiente da coluna 2: Linear
• Direção do gradiente da coluna 2: 160deg

Dimensionamento

Altere também as configurações de dimensionamento da linha.

• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Equalize a altura das colunas: Sim

Espaçamento

Em seguida, adicione alguns valores de espaçamento personalizados.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px
• Preenchimento superior da coluna 1: 100 px
• Preenchimento inferior da coluna 1: 50 px
• Preenchimento esquerdo da coluna 1: 50 px
• Preenchimento direito da coluna 1: 50 px
• Preenchimento superior da coluna 2: 100 px
• Preenchimento inferior da coluna 2: 100 px
• Preenchimento esquerdo da coluna 2: 50 px
• Preenchimento direito da coluna 2: 50 px

Fronteira

Adicione '20px' a cada uma das bordas da linha.

Sombra da caixa

Por último, adicione uma sombra de caixa sutil à linha.

• Força do desfoque de sombra da caixa: 45 px
• Força de propagação da sombra da caixa: -11 px
• Cor da sombra: rgba (0,0,0,0.3)

Adicionar 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

Altere as configurações de texto deste módulo.

• Peso da fonte do texto: ultra negrito
• Estilo da fonte do texto: maiúsculas
• Cor do texto: # 562fef
• Texto para Suze: 100 px (desktop), 80 px (tablet), 60 px (telefone)
• Espaçamento entre letras do texto: -10px
• Altura da linha de texto: 1em

Espaçamento

Adicione alguma margem inferior também.

• Margem inferior: 50px

Adicionar Módulo de Formulário de Contato à Coluna 1

Elementos

O segundo módulo de que precisaremos na primeira coluna é um Módulo de formulário de contato. Depois de adicionar o módulo, desative a opção 'Exibir Captcha'.

• Exibir Captcha: Não

Configurações de texto do campo do formulário

Altere a cor de fundo do campo de formulário a seguir.

• Cor de fundo do campo do formulário: #ffffff

Configurações de botão

Experimente também as configurações dos botões para criar um botão de ícone em vez de um que contenha texto.

• Use estilos personalizados para botão: Sim
• Tamanho do texto do botão: 73 px
• Cor do texto da parte inferior: rgba (0,0,0,0)
• Hover Button Background Color: rgba (255,255,255,0)
• Largura da borda do botão: 0 px
• Cor do ícone do botão: # 9932ff
• Mostrar apenas o ícone ao passar o mouse para o botão: Não

Sombra da caixa

Por último, adicione uma sombra de caixa sutil a cada um dos campos.

• Força do desfoque de sombra da caixa: 36 px
• Força do desfoque de sombra da caixa: -14 px
• Cor da sombra: rgba (0,0,0,0.3)

Adicionar Módulo de Texto à Coluna 2

Adicionar conteúdo

O primeiro módulo de que precisaremos na segunda coluna é outro Módulo de Texto.

Configurações de texto

Depois de adicionar o conteúdo, altere as configurações de texto deste módulo.

• Peso da fonte do texto: ultra negrito
• Cor do texto: #ffffff
• Tamanho do texto: 23px
• Espaçamento entre letras do texto: -1px

Adicione o Módulo Blurb nº 1 à Coluna 2

Adicionar conteúdo

O segundo módulo de 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 deste ícone.

• Cor do ícone: #ffffff
• Posicionamento do ícone: Esquerda

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 entre letras de título: -0,5 px

Espaçamento

E adicione alguma margem superior.

• Margem superior: 120px

Clonar módulo do Blurb duas vezes

Quando terminar de modificar o primeiro módulo do Blurb, você pode prosseguir e clonar o módulo duas vezes.

Alterar conteúdo e ícone de ambas as duplicatas

Altere o conteúdo e os ícones de ambas as duplicatas para compartilhar diferentes tipos de informações de contato com os visitantes.

Alterar o espaçamento de ambas as duplicatas

A margem superior de ambas as duplicatas também precisa ser alterada.

• Margem superior: 30px

Criação do formulário de contato nº 3

Adicionar nova seção

Cor de fundo

Passemos ao terceiro exemplo! Adicione uma nova seção com a seguinte cor de fundo:

• Cor de fundo: # 3491CE

Espaçamento

Continue adicionando alguns valores de preenchimento personalizados nas configurações de espaçamento.

• Preenchimento superior: 200px
• Preenchimento inferior: 200 px

Adicionar linha # 1

Estrutura da Coluna

Em seguida, adicione uma nova linha usando a seguinte estrutura de coluna:

Adicionar 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 algum conteúdo de sua escolha.

Configurações de texto

Em seguida, altere as configurações de texto.

• Peso da fonte do texto: ultra negrito
• Cor do texto: rgba (255,255,255,0,24)
• Tamanho do texto: 100 px (desktop), 86 px (tablet), 60 px (telefone)
• Altura da linha de texto: 1em
• Orientação do Texto: Centro

Espaçamento

Adicione alguma margem inferior negativa também.

• Margem inferior: -100px

Adicionar linha # 2

Estrutura da Coluna

A segunda linha de que precisamos para completar este exemplo contém a seguinte estrutura de coluna:

Fundo Gradiente

Sem adicionar nenhum módulo ainda, abra as configurações de linha e adicione um fundo gradiente.

• Cor 1: # 11CE84
• Cor 2: # 10C77F
• Tipo de gradiente: Linear
• Direção do gradiente: 160deg
• Posição inicial: 50%
• Posição final: 50%

Dimensionamento

Altere também as configurações de dimensionamento.

• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Equalize a altura das colunas: Sim

Espaçamento

Adicione alguns valores de preenchimento personalizados a seguir.

• Enchimento superior: 150px
• Preenchimento inferior: 100px
• Preenchimento esquerdo: 50 px
• Preenchimento direito: 50 px

Fronteira

Em seguida, vá para as configurações de borda e adicione '20px' a cada um dos cantos. Use uma borda inferior também.

• Largura da borda inferior: 10 px
• Cor da borda inferior: # 1ba35a

Sombra da caixa

Conclua as configurações de linha adicionando uma sombra de caixa sutil.

• Força do desfoque de sombra da caixa: 80 px
• Força de propagação da sombra da caixa: -24px
• Cor da sombra: rgba (0,0,0,0.3)

Adicionar Módulo de Formulário de Contato à Coluna 1

Habilite a opção 'Make Fullwidth' no campo Nome e Email

O primeiro módulo de 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.

• Faça largura total: Sim

Elementos

Desative o captcha em seguida.

• Exibir Captcha: Não

Configurações de botão

E altere as configurações do botão.

• Use estilos personalizados para botão: Sim
• Cor do texto do botão: #ffffff
• Cor 1: # 3AA0E3
• Cor 2: # 3491CE
• Tipo de gradiente: Linear
• Direção do gradiente: 155 graus
• Posição inicial: 50%
• Posição final: 50%
• Largura da borda do botão: 0 px
• Raio da borda do botão: 10 px
• Força de propagação da sombra da caixa: -2px
• Cor da sombra: # 0a60af

Fronteira

Também estamos adicionando '5px' de cantos arredondados a cada um dos campos.

Adicionar Módulo de Texto à Coluna 2

Adicionar conteúdo

Na segunda coluna, o primeiro módulo de 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.

• Cor de fundo: rgba (255,255,255,0,13)

Configurações de texto

Brinque com as configurações de texto também.

• Peso da fonte do texto: leve
• Cor do texto: #ffffff
• Tamanho do texto: 15px
• Espaçamento entre letras do texto: -0,5 px

Espaçamento

E adicione um pouco de preenchimento personalizado para dar ao módulo espaço para respirar.

• Enchimento superior: 12 px
• Preenchimento inferior: 12 px
• Preenchimento esquerdo: 10 px
• Preenchimento direito: 10 px

Fronteira

Também estamos adicionando '20px' aos cantos superior esquerdo e inferior esquerdo. Além disso, adicionaremos uma borda esquerda.

• Largura da borda esquerda: 34 px
• Cor da borda esquerda: # edf000

Visibilidade

Para fazer esse design corresponder aos diferentes tamanhos de tela, vamos desabilitar o Módulo de Texto no telefone e no tablet.

Clonar Módulo de Texto Duas Vezes

Quando terminar de modificar o primeiro Módulo de texto, vá em frente e clonar o módulo duas vezes.

Alterar o conteúdo de ambas as duplicatas

Transforme o conteúdo de ambas as duplicatas em outra coisa.

Alterar o espaçamento de ambas as duplicatas

E adicione alguma margem superior para criar espaço entre cada um dos módulos.

• Margem superior: 20px

Alterar borda de ambas as duplicatas

Por último, mas não menos importante, altere a cor da borda esquerda de cada uma das duplicatas individualmente.

• Cor 1: # 00faff
• Cor 2: # 00f76f

Criação do formulário de contato nº 4

Adicionar nova seção

Cor de fundo

Para o quarto exemplo! Adicione uma nova seção usando a seguinte cor de fundo:

• Cor de fundo: #FFBABD

Espaçamento

Remova o preenchimento padrão desta seção.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px

Adicionar nova linha

Estrutura da Coluna

Continue adicionando uma nova linha usando a seguinte estrutura de coluna:

Fundo Gradiente

Sem adicionar nenhum módulo ainda, abra as configurações de linha e adicione um fundo gradiente.

• Cor 1: #ffffff
• Cor 2: rgba (41,196,169,0)
• Tipo de gradiente: radial
• Direção Radial: Centro
• Posição inicial: 38%
• Posição final: 38%

Dimensionamento

Altere as configurações de dimensionamento a seguir.

• Tornar esta linha com largura total: Sim
• Usar largura de calha personalizada: Sim
• Largura da calha: 1

Espaçamento

E adicione algum preenchimento personalizado.

• Enchimento superior: 160 px
• Preenchimento inferior: 160 px

Adicionar Módulo de Texto

Adicionar conteúdo

O primeiro módulo de que precisamos é um Módulo de Texto. Vá em frente e insira algum conteúdo.

Configurações de texto

Altere as configurações de texto de acordo:

• Fonte do Texto: Abril Fatface
• Cor do texto: # 640076
• Tamanho do texto: 45 px (desktop), 34 px (tablet), 20 px (telefone)
• Altura da linha de texto: 1em
• Orientação do Texto: Centro

Espaçamento

Adicione alguns valores de espaçamento personalizados a seguir.

• Margem superior: 300px
• Enchimento superior: 50 px
• Preenchimento inferior: 50 px

Adicionar Módulo de Formulário de Contato

Habilite a opção 'Make Fullwidth' no campo Nome e Email

O segundo e último módulo de que precisamos é um Módulo de formulário de contato. Abra os campos de nome e e-mail e altere as configurações de layout.

• Faça largura total: Sim

Elementos

Em seguida, desative a opção captcha nas configurações dos elementos.

• Exibir Captcha: Não

Configurações de texto do campo do formulário

Faça algumas alterações nas configurações de texto do campo do formulário também.

• Cor de fundo do campo do formulário: # fff6f6
• Cor do texto do campo do formulário: # ff7c7c

Configurações de botão

Transforme o botão em um botão de ícone usando as seguintes configurações:

• Use estilos personalizados para botão: Sim
• Tamanho do texto do botão: 88 px
• Cor do texto do botão: rgba (255,255,255,0)
• Hover Button Background Color: rgba (255,255,255,0)
• Largura da borda do botão: 0 px
• Cor do ícone do botão: # e60085
• Mostrar apenas o ícone ao passar o mouse para o botão: Sim

Dimensionamento

E brinque com os valores de dimensionamento para fazer o design corresponder a todos os tamanhos de tela.

• Largura: 42% (desktop), 50% (tablet), 77% (telefone)
• Alinhamento do Módulo: Centro

Espaçamento

Continue adicionando alguns valores de espaçamento personalizados ao módulo.

• Margem inferior: 200px
• Preenchimento esquerdo: 50 px
• Preenchimento direito: 50 px

Fronteira

E adicione '10px' a cada um dos cantos.

Margem do botão

Por último, mas não menos importante, pressione o botão do ícone para a direita usando a seguinte linha de código CSS na guia avançada:

margin-right: -100px;

Criando o Formulário de Contato nº 5

Adicionar nova seção

Fundo Gradiente

Vamos para o último exemplo! Adicione uma nova seção com o seguinte fundo gradiente:

• Cor 1: # 4bf2d0
• Cor 2: #ffffff
• Tipo de gradiente: radial
• Direção Radial: Esquerda
• Posição inicial: 36%
• Posição final: 36%

Espaçamento

Em seguida, vá para as configurações de espaçamento e adicione algum preenchimento personalizado.

• Enchimento superior: 250px
• Preenchimento inferior: 250 px

Adicionar nova linha

Estrutura da Coluna

Quando terminar de modificar as configurações da seção, 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.

• Cor de fundo: #ffffff

Cor de fundo da coluna 1

Adicione outra cor de fundo à primeira coluna.

• Cor de fundo da coluna 1: # f9f9f9

Dimensionamento

Em seguida, altere as configurações de dimensionamento da linha.

• Usar largura personalizada: Sim
• Unidade: PX
• Largura personalizada: 1730 px
• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Equalize a altura das colunas: Sim

Espaçamento

E adicione alguns valores de espaçamento personalizados para corresponder a todos os tamanhos de tela.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px
• Preenchimento superior da coluna 1: 200 px (desktop), 0 px (tablet e telefone)
• Preenchimento inferior da coluna 1: 150 px (área de trabalho), 0 px (tablet e telefone)
• Preenchimento esquerdo da coluna 1: 50 px
• Preenchimento direito da coluna 1: 50 px
• Preenchimento superior da coluna 2: 200 px (desktop), 100 px (tablet e telefone)
• Preenchimento inferior da coluna 2: 150px, 100px (tablet e telefone)

Sombra da caixa

A última coisa que você precisa fazer nas configurações de linha é adicionar uma sombra de caixa sutil.

• Força do desfoque de sombra da caixa: 56 px
• Força de propagação da sombra da caixa: -17px
• Cor da sombra: rgba (0,0,0,0.3)

Adicionar Módulo de Texto à Coluna 1

Adicionar conteúdo

É hora de começar a adicionar módulos! Adicione um Módulo de Texto à primeira coluna.

Configurações de texto

Depois de adicionar o conteúdo, vá para as configurações de texto e faça algumas alterações.

• Fonte do texto: Cambay
• Cor do texto: # 000000
• Tamanho do texto: 26px
• Espaçamento entre letras do texto: -0,5 px
• Orientação do texto: direita

Espaçamento

Adicione alguma margem superior também.

• Margem superior: 60px

Visibilidade

E esconda o módulo no telefone e no tablet.

Clonar Módulo de Texto Duas Vezes

Alterar o conteúdo de ambas as duplicatas

Quando terminar de modificar o primeiro Módulo de texto, vá em frente e clonar o módulo duas vezes. Altere o conteúdo de ambas as duplicatas.

Alterar o espaçamento de ambas as duplicatas

Modifique a margem superior de ambas as duplicatas também.

• Margem superior: 80px

Adicionar Módulo de Formulário de Contato à Coluna 2

Habilite a opção 'Make Fullwidth' no campo Nome e Email

O único módulo de que precisamos na segunda coluna é um Módulo de formulário de contato. Abra os campos de nome e e-mail e altere as configurações de layout.

• Faça largura total: Sim

Elementos

Em seguida, desative a opção de captcha.

• Exibir Captcha: Sim

Configurações de texto do campo do formulário

Em seguida, vá para as configurações de texto do campo do formulário e faça algumas modificações.

• Cor de fundo do campo do formulário: rgba (255,255,255,0)
• Fonte do campo do formulário: Cambay

Configurações de botão

E crie um botão exclusivo usando as seguintes configurações de botão:

• Use estilos personalizados para botão: Sim
• Tamanho do texto do botão: 64 px (desktop), 50 px (tablet), 40 px (telefone)
• Cor do texto do botão: # 000000
• Cor 1: # 4bf2d0
• Cor 2: rgba (41,196,169,0)
• Tipo de gradiente: radial
• Direção Radial: Centro
• Posição inicial: 25%
• Posição final: 25%
• Largura da borda do botão: 0 px
• Mostrar botão ao passar o mouse apenas para o botão: Não

Espaçamento

Adicione alguma margem superior a este módulo também.

• Margem superior: 50px

Fronteira

E use uma borda inferior sutil para cada um dos campos.

• Largura da borda inferior: 0,5 px
• Cor da borda inferior: # 000000

Espaçamento de campo individual

Por último, mas não menos importante, adicione a seguinte margem inferior a cada um dos campos individualmente e pronto!

• Margem inferior: 50px

Antevisão

Área de Trabalho

Agora que passamos por todas as etapas, vamos dar uma olhada final nos designs do módulo de formulário de contato Divi no desktop.

Móvel

E isso é o que você pode esperar dos designs de módulo de formulário de contato Divi em tamanhos de tela menores:

Pensamentos finais

Neste post, compartilhamos 5 lindos designs de módulo de formulário de contato Divi que você pode usar e modificar facilmente para qualquer site que criar. Os formulários de contato são uma parte vital de muitos sites, por isso é importante certificar-se de que seu design convença os visitantes a entrar em contato. Se você tiver dúvidas ou sugestões, deixe um comentário na seção de comentários abaixo!