Suporte » Plugins » MailPoet-Alterar aparência de formulário

  • Bom dia!
    Eu recentemente adicionei o MailPoet em meu site para gerenciar newsletter, porém estou com um problema quanto a aparência do formulário.
    Eu queria que o botão assinar aparecesse do lado do campo de e-email e não embaixo como está agora.
    Eu tentei mudar o CSS na personalização da aparência, porém não obtive sucesso.
    No próprio plugin, quando criamos o formulário ele tem uma seção chamada Estilos, que contém o seguinte código:

    /* form */
    .mailpoet_form {

    }

    /* paragraphs (label + input) */
    .mailpoet_paragraph {
    line-height:20px;
    }

    /* labels */
    .mailpoet_segment_label,
    .mailpoet_text_label,
    .mailpoet_textarea_label,
    .mailpoet_select_label,
    .mailpoet_radio_label,
    .mailpoet_checkbox_label,
    .mailpoet_list_label,
    .mailpoet_date_label {
    display:block;
    font-weight:bold;
    }

    /* inputs */
    .mailpoet_text,
    .mailpoet_textarea,
    .mailpoet_select,
    .mailpoet_date_month,
    .mailpoet_date_day,
    .mailpoet_date_year,
    .mailpoet_date {
    display:block;
    }

    .mailpoet_text,
    .mailpoet_textarea {
    width:200px;
    }

    .mailpoet_checkbox {
    }

    .mailpoet_submit input {
    }

    .mailpoet_divider {
    }

    .mailpoet_message {
    }

    .mailpoet_validate_success {
    font-weight: 600;
    color:#468847;
    }

    .mailpoet_validate_error {
    color:#B94A48;
    }

    .mailpoet_form_loading {
    width: 30px;
    text-align: center;
    line-height: normal;
    }

    .mailpoet_form_loading > span {
    width: 5px;
    height: 5px;
    background-color: #5b5b5b;
    }

    Acredito que tenha que mudar algo nesse código para fazer essa alteração, mas não sei fazer isso, alguém poderia me ajudar?

    A página que eu preciso de ajuda: [fazer login para ver o link]

Visualizando 4 respostas - 1 até 4 (de um total de 4)
  • saudações @luiza6,

    primeiramente, vendo o código-fonte de seu site, vejo que está usando o tema Electro, da ThemeForest,

    https://themeforest.net/item/electro-electronics-store-woocommerce-theme/15720624

    como é um tema pago, conforme as regras do Fórum, o suporte deve ser fornecido pelo desenvolvedor.

    mas vou ter apontar algumas questões aqui para tentar lhe ajudar.

    primeiro, se clicar com o botão direito do mouse sobre a página e escolher a opção “Inspecionar” (ou “Inspecionar Elemento”) e colocar a coluna de inspeção do lado direito do navegador ou escolher o “Responsive Mode”, verá que esse campo de newsletter não aparecer em versão responsiva, apenas desktop, versão de computador. caso também queira que apareça em celular, precisa ver isso.

    o problema do botão ficar abaixo do campo de e-mail é que eles então dentro de campos de parágrafo diferentes, usando class=”mailpoet_paragraph” cada um, como pode ver no print abaixo,

    https://pasteboard.co/IfIrcfM.jpg

    assim como em um texto, quando você dá um Enter e cria um novo parágrafo [<p></p>], um texto fica abaixo do outro, se usa o HTML <p> para elementos diferentes, eles irão ficar um abaixo do outro.

    não conheço o Mailpoet, então só posso ir até aqui. indico que veja a forma como configurou esse campos e busque colocar os dois elementos, o campo para o e-mail e o botão Assinar, dentro do mesmo <p> para ficarem um do lado do outro. talvez só precise dar uma ajustada na largura dos elementos, mas fazendo assim eles ficarão um do lado do outro.

    espero ter ajudado.

    Gassho, Namaste

    Criador do tópico luiza6

    (@luiza6)

    Bom dia!
    Obrigada pela ajuda.
    Eu entrei em contato com o fornecedor do tema e é só colocar esse código no CSS adicional do tema:

    #mailpoet_form_3 .mailpoet_form,
    #mailpoet_form_3 .mailpoet_paragraph {
    display: flex;
    margin-bottom: 0;
    }

    #mailpoet_form_3 .mailpoet_paragraph .mailpoet_text {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    }

    #mailpoet_form_3 .mailpoet_paragraph .mailpoet_submit {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    }

    Caso mais alguém tenha esse problema está ai a solução.

    saudações @luiza6,

    uau, a solução ficou incrível. grato por ter compartilhado com a comunidade.

    uma última coisa, só lembrando que em versões mobile seu formulário para inscrição de newsletter não aparece. se realmente é essa sua escolha, ok. mas se não for for, bom verificar se não há uma opção de seu tema para que também apareça em aparelhos móveis.

    espero que tenha uma ótima experiência com seu WordPress!

    Gassho, Namaste

    Criador do tópico luiza6

    (@luiza6)

    Bom dia!
    É que eu ainda não configurei a versão mobile, mas pelo que vi tem como eu fazer aparecer sim. Obrigada pela atenção.

    • Esta resposta foi modificada 4 anos, 11 meses atrás por luiza6.
Visualizando 4 respostas - 1 até 4 (de um total de 4)
  • O tópico ‘MailPoet-Alterar aparência de formulário’ está fechado para novas respostas.