Pergunta sobre Formulário de contato do WPForms – Construtor de formulários de arrastar e soltar para WordPress do WordPress: Centralize o WPForms Lite na página.

Um usuário perguntou ?

Olá, como faço para centralizar todo o formulário em uma página? Estou usando o tema Twenty Seventeen baby.

Eu quero colocar todo o formulário, texto, campos e botão em uma página. Procurei tutoriais e online, mas não encontrei a resposta. Também pesquisei fóruns do WordPress onde encontrei 5 consultas semelhantes, tentei todos os CSS sugeridos para centralizar o formulário, mas nenhum deles funcionou para mim. Eu também usei o Inspect, mas não vejo onde estaria o alinhamento do formulário.

Qualquer ajuda será muito apreciada.

(@jquigam)

faz 3 anos

Olá jane,

Claro, eu posso te ajudar com isso. Os estilos de centralização podem ser um pouco sutis e, em muitos casos, há muitos fatores envolvidos, portanto, geralmente é melhor trabalhar site a site.

Aqui está o SEC que você precisará para centralizar seu formulário de contato:

form#wpforms-form-1647 {
    text-align: center;
}

div.wpforms-container-full .wpforms-form#wpforms-form-1647 input[type=date], 
div.wpforms-container-full .wpforms-form#wpforms-form-1647 input[type=datetime], 
div.wpforms-container-full .wpforms-form#wpforms-form-1647 input[type=datetime-local], 
div.wpforms-container-full .wpforms-form#wpforms-form-1647 input[type=email], 
div.wpforms-container-full .wpforms-form#wpforms-form-1647 input[type=month], 
div.wpforms-container-full .wpforms-form#wpforms-form-1647 input[type=number], 
div.wpforms-container-full .wpforms-form#wpforms-form-1647 input[type=password], 
div.wpforms-container-full .wpforms-form#wpforms-form-1647 input[type=range], 
div.wpforms-container-full .wpforms-form#wpforms-form-1647 input[type=search], 
div.wpforms-container-full .wpforms-form#wpforms-form-1647 input[type=tel], 
div.wpforms-container-full .wpforms-form#wpforms-form-1647 input[type=text], 
div.wpforms-container-full .wpforms-form#wpforms-form-1647 input[type=time], 
div.wpforms-container-full .wpforms-form#wpforms-form-1647 input[type=url], 
div.wpforms-container-full .wpforms-form#wpforms-form-1647 input[type=week], 
div.wpforms-container-full .wpforms-form#wpforms-form-1647 select, 
div.wpforms-container-full .wpforms-form#wpforms-form-1647 textarea {
    margin-left: auto;
    margin-right: auto;
}

onde ajuda aqui está um tutorial do WPBeginner sobre como adicionar CSS personalizado como este ao seu site.

Por fim, notei que você tem duas classes CSS no campo Mensagens deste formulário (wpforms-one-half e wpforms-first). Portanto, certifique-se de remover essas classes para que esse campo também fique centralizado (aqui está uma imagem de onde você pode encontrar essas classes para remover: http://cloud.supportally.com/1G1x2X3W0n0l).

Eu espero que isso ajude! Quando tiver a oportunidade de experimentar, poderia me contar como foi?

Obrigado! ?

lançador de tópicos

(@jane-milburn)

faz 3 anos

Olá Jess, obrigado pela resposta. Funciona! No entanto, eu queria saber, como tenho apenas 3 campos, Nome, Email e Mensagem e o botão Enter, o código poderia ser mais curto?

Além disso, após enviar uma mensagem, a mensagem de confirmação aparece em uma caixa verde. Pode ser alterado para cor ou branco?

(@jquigam)

faz 3 anos

Olá jane,

Ótimo, que bom que funcionou para você!

Se você quiser uma versão mais curta desse código, certamente poderá remover as linhas de outros campos; no entanto, essas linhas adicionais não alterarão a velocidade do seu site de forma alguma e fornecerão mais flexibilidade se você alterar seu formulário no futuro. . Então depende totalmente de você ?

Para a cor de fundo da mensagem de confirmação, este é outro ajuste rápido de CSS. Aqui está nosso tutorial onde compartilhamos todos os estilos de formulário padrão para que você possa copiá-lo e ajustá-lo conforme necessário.

E aqui está o SEC específico que você precisará:

.wpforms-confirmation-container-full {
    background: #fff;
    border: none;
}

Isso definirá a cor de fundo para branco (#fff) e removerá a borda (que também é verde). Você pode adicionar este snippet da mesma maneira mencionada acima.

Espero que ajude! ?

lançador de tópicos

(@jane-milburn)

faz 3 anos

Oi Jess, obrigado novamente por todas as informações que funcionam. Você foi muito útil. ?

(@jquigam)

faz 3 anos

De nada, Janaína! ?

lançador de tópicos

(@jane-milburn)

2 anos, 10 meses atrás

Oi novamente, eu fiz toda a largura e os campos no meu formulário de contato e agora os estendi fazendo com que o formulário parecesse estranho. Existe uma maneira de reduzir o tamanho das parcelas?

lançador de tópicos

(@jane-milburn)

2 anos, 10 meses atrás

Além disso, existe uma maneira de traduzir bem o formulário completo, mas um pouco?

(@jquigam)

2 anos, 10 meses atrás

Olá jane,

Definitivamente! A maneira mais fácil de ajustar a largura dos campos de formulário é abrir o construtor de formulários e clicar em um campo dentro da área de visualização. Isso abrirá o painel Opções de campo, a partir do qual você pode abri-lo. Opções avançadas. Nesta seção, você deve ver um menu suspenso chamado tamanho do campo (isso permitirá que você selecione Pequeno, Médio ou Grande).

No entanto, se ainda estivermos discutindo o formulário de contato que você compartilhou em sua postagem introdutória aqui, você precisará de uma abordagem um pouco diferente. As opções de tamanho de campo para campos de texto de elemento (como o campo Mensagem para o formulário) alterarão a altura vertical, não a largura horizontal. Portanto, para alterar a largura de todo o formulário, você pode usar o seguinte CSS:

#wpforms-1647 {
    max-width: 500px;
}

Para empurrar o formulário, você pode simplesmente adicionar margens a este stick. Por exemplo, para centralizar o formulário, você pode modificar o snippet para:

#wpforms-1647 {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

Se você quiser tentar essa opção, você pode encontrar mais detalhes sobre as margens CSS em este artigo do W3Schools.

E eu compartilhei isso em um post anterior, apenas no caso de ter ajudado. este é um tutorial do WPBeginner sobre como adicionar CSS personalizado ao seu site.

Eu espero que isso ajude! ? Se você quiser fazer alterações de estilo adicionais, considere verificar nosso guia para iniciantes da SEC ou olhando para dentro herói cssque permite aplicar estilos sem tocar em nenhum código.

lançador de tópicos

(@jane-milburn)

2 anos, 10 meses atrás

Muito obrigado, CSS funciona perfeitamente e agora posso alterar a altura com suas instruções. Excelente. Muito obrigado ?

(@jquigam)

2 anos, 10 meses atrás

De nada, Jane. Feliz por ajudar! ?

Isto foi útil?

0 / 0

Deixe uma resposta 0

O seu endereço de email não será publicado. Campos obrigatórios são marcados *