Como Enfileirar uma Folha de Estilos para Formulários de Conversa

Gostaria de enfileirar a sua própria folha de estilos para o addon Formulários de Conversa? Pode adicionar o seu próprio CSS usando qualquer um destes métodos deste tutorial, mas sabia que também pode usar um filtro para enfileirar uma folha de estilos dedicada para os seus formulários de conversa. Este método pode facilitar muito a organização e, neste tutorial, mostraremos como enfileirar uma folha de estilos dedicada para estes formulários.

Criação do seu formulário de conversa

Primeiro, terá de criar um formulário de conversa e adicionar os seus campos. Se precisar de ajuda para fazer isto, por favor, reveja esta documentação.

Personalização do formulário de conversa

Depois de ter criado o seu formulário de conversa, para efeitos deste tutorial, vamos adicionar algum texto ao campo Mensagem no separador Formulário de Conversa. Esta é uma mensagem que os seus visitantes verão assim que o formulário carregar.

Pode adicionar o que precisar, mas estamos a adicionar algum texto, um link e uma lista não ordenada com o seguinte.

<p>Está prestes a completar um formulário de encomenda para o pacote de temas 3.</p>
<p>Para rever os termos e condições, <a href="#">clique aqui, por favor</a>.</p>
<p>Que inclui, mas não se limita a:</p>
<ul>
<li>Tema 1</li>
<li>Tema 2</li>
<li>Tema 3</li>
<li>Plugin Grátis 1</li>
<li>Plugin Grátis 2</li>
<li>Plugin Grátis 3</li>
</ul>


Enfileirar uma Folha de Estilos para Formulários de Conversa

Antes de podermos enfileirar a nossa própria folha de estilos para formulários de conversa, primeiro precisamos de adicionar este trecho de código que o permitirá.

Se precisar de ajuda para adicionar código ao seu site, por favor, reveja este tutorial.

/**
 * Enqueue your own stylesheet for conversational forms
 * 
 * @link  https://wpforms.com/developers/how-to-enqueue-a-stylesheet-for-conversational-forms/
 */

function wpfdev_convoform_custom_css() {

	wp_enqueue_style( 'style', get_stylesheet_directory_uri().'/name-of-your-css-file.css' );
}

add_action( 'wpforms_conversational_forms_enqueue_styles', 'wpfdev_convoform_custom_css', 10 );

Criação e carregamento da folha de estilos para o diretório do seu tema

Depois de o código ser adicionado, precisa agora de criar o seu ficheiro CSS.

Aqui estão alguns estilos CSS básicos que usámos para este tutorial

.wpforms-title {
    color: #e27730!important;
    font-size: 36px !important;
}
.wpforms-description {
    line-height: 1.6em;
    text-align: left;
    white-space: normal !important;
    max-width: 90%;
    font-size: 18px !important;
    margin: 0 auto;
}
.wpforms-description a {
    color: #e27730;
    text-decoration: none;
}
.wpforms-description a:hover {
    color: #c45e1b;
}
.wpforms-description ul li {
    list-style: circle !important;
    list-style-position: inside !important;
    font-size: 16px;
}
button.wpforms-conversational-btn-start.wpforms-conversational-btn {
    background-color: #e27730 !important;
    color: rgba(255,255,255,1) !important;
}
button.wpforms-conversational-btn-start.wpforms-conversational-btn:hover {
    background-color: #c45e1b !important;
}
.wpforms-conversational-form-btn-desc {
    display: none !important;
}

Estas são apenas algumas regras CSS de estilo padrão para links e listas não ordenadas. Também estilámos o título do formulário de conversa e removemos o texto que normalmente vê ao lado do botão Iniciar.

Depois de ter criado as regras CSS, é hora de as carregar usando FTP ou um plugin do tipo FTP, carregue-as para o diretório do tema. Para carregar usando FTP, pode seguir este tutorial.

Para o nosso tutorial, usámos um plugin WordPress mencionado neste tutorial para ter acesso ao nosso servidor.

Visualização do formulário de conversa

Agora, quando os visitantes visualizarem a página, verão os novos estilos adicionados apenas pelo enfileiramento da nossa folha de estilos única.

E é tudo o que precisa para enfileirar uma folha de estilos específica para o addon Conversational Forms. Gostaria de associar o logótipo que aparece nos seus formulários conversacionais? Dê uma vista de olhos na nossa documentação sobre Como Associar o Logótipo do Seu Formulário Conversacional.

Ação de Referência

wpforms_conversational_forms_enqueue_styles

FAQ

Q: Posso usar isto também para o addon Form Pages?

R: Para ter um enfileiramento único para o addon Form Pages, utilize este trecho de código em vez disso. Pode ler mais sobre esta ação revendo esta documentação.

/**
 * Enqueue your own stylesheet for the Form Pages addon
 * 
 * @link  https://wpforms.com/developers/wpforms_form_pages_enqueue_styles/
 */

function wpfdev_formpages_custom_css() {

	wp_enqueue_style( 'style', get_stylesheet_directory_uri().'/name-of-your-css-file.css' );

}
add_action( 'wpforms_form_pages_enqueue_styles', 'wpfdev_formpages_custom_css', 10 );