Personalizar o código de incorporação do formulário de opt-in

Quando incorpora um formulário de opt-in do Flexmail no website, vem com estilo predefinido. Se esse estilo não corresponder ao design do website, pode substituí-lo usando CSS. Este artigo explica como o código de incorporação funciona e como aplicar estilos personalizados de forma segura.

Como funciona o código de incorporação

Quando gera o código de incorporação de um formulário de opt-in no Flexmail, receberá três partes:

• Um snippet JavaScript que passa os estilos personalizados para o formulário depois de este carregar.
• Um iframe que carrega o próprio formulário a partir de https://return.flexmail.eu.
• Um bloco **<style id="flx-styles">** vazio onde pode adicionar o próprio CSS.

Cola as três partes no HTML do website onde pretende que o formulário apareça. Quando a página carrega, o iframe vai buscar o formulário, e o JavaScript adiciona o conteúdo do bloco de estilo ao formulário para que o estilo seja aplicado.

Para obter o código de incorporação:

1. Aceda a Formulários > Formulários de opt-in.
2. Abra o formulário que pretende incorporar.
3. Clique no botão Incorporar o formulário.
4. Copie o código de incorporação da janela pop-up.

Dica de suporte Copie o código de incorporação sempre que fizer alterações estruturais ao formulário no Flexmail (como adicionar ou remover campos). O estilo pode permanecer o mesmo enquanto mantiver os mesmos seletores.

Adicionar CSS personalizado ao website

Os estilos personalizados vão dentro do bloco <style id="flx-styles">. O bloco está vazio por defeito e contém espaços reservados comentados para os seletores mais comuns:

• #flxml_frm > table > tbody > tr > td:nth-child(1) — as etiquetas dos campos.
• #flxml_frm input[type="text"] — os campos de entrada de texto.
• #flxml_frm button[type="submit"] — o botão de envio.

Pode expandir isto com seletores para outros elementos, como #flxml_frm select para listas pendentes, #flxml_frm input[type="checkbox"] para caixas de verificação, ou #flxml_frm input[type="number"] para campos numéricos. Prefixe sempre os seletores com #flxml_frm para que os estilos sejam aplicados apenas ao formulário.

Aqui está um pequeno exemplo que torna o formulário transparente, responsivo no mobile e dá ao botão de envio um aspeto personalizado:

A flag !important é por vezes necessária porque os estilos predefinidos do formulário usam valores de largura inline. A partir daqui pode desenvolver o resto: ajustar tipos de letra, cores, estilo de etiquetas, e assim por diante, adicionando mais regras com o mesmo prefixo #flxml_frm.

Atenção O formulário é carregado dentro de um iframe, o que significa que o CSS do website principal não se aplica automaticamente ao mesmo. É por isso que os estilos devem ser passados através do bloco <style id="flx-styles"> — o snippet JavaScript trata dessa parte por si.

Dica de suporte Use as ferramentas de programador do browser (clique com o botão direito > Inspecionar) para identificar os nomes de classe exatos no formulário em funcionamento antes de escrever o CSS. Os nomes de classe podem variar ligeiramente dependendo da configuração do formulário e da versão do Flexmail.

O que pode alterar

Pode aplicar estilos com segurança a qualquer propriedade visual dos elementos do formulário: cores, tipos de letra, espaçamento, margens, border-radius, largura e fundo.

O que não deve alterar

Não modifique nem remova o seguinte do código de incorporação:

• O URL src do iframe. Este carrega o formulário a partir dos servidores do Flexmail. Alterá-lo irá quebrar o formulário.
• O id do iframe (iframe_flxml_form) e o id do bloco