Como Enfileirar uma Planilha para Formulários de Conversa

Gostaria de enfileirar sua própria folha de estilos para o addon Conversational Forms? Você pode adicionar seu próprio CSS usando qualquer um destes métodos deste tutorial, mas você sabia que também pode usar um filtro para enfileirar uma folha de estilos dedicada para seus formulários conversacionais. Este método pode facilitar muito para fins organizacionais e, neste tutorial, mostraremos como enfileirar uma folha de estilos dedicada para esses formulários.

Criando seu formulário conversacional

Primeiro, você precisará criar um formulário conversacional e adicionar seus campos a ele. Se precisar de ajuda para fazer isso, revise esta documentação.

Personalizando o formulário conversacional

Depois de criar seu formulário conversacional, para fins deste tutorial, adicionaremos algum texto ao campo Mensagem na aba Formulário Conversacional. Esta é uma mensagem que seus visitantes verão assim que o formulário carregar.

Você pode adicionar o que precisar, mas estamos adicionando algum texto, um link e uma lista não ordenada com o seguinte.

<p>Você está prestes a completar um formulário de pedido para o pacote de temas 3.</p>
<p>Para revisar os termos e condições, <a href="#">clique aqui</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>


Enfileirando uma folha de estilos para formulários conversacionais

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

Se precisar de ajuda para adicionar código ao seu site, revise 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 );

Criando e enviando a folha de estilos para o diretório do seu tema

Após o código ser adicionado, você agora precisa criar seu arquivo CSS.

Aqui estão alguns estilos CSS básicos que usamos 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 estilizamos o título do formulário conversacional e removemos o texto que você normalmente vê ao lado do botão Iniciar.

Depois de criar as regras CSS, agora é hora de enviá-las usando FTP ou um plugin do tipo FTP, envie-o para o diretório do tema. Para enviar via FTP, você pode seguir este tutorial.

Para o nosso tutorial, usamos um plugin do WordPress mencionado neste tutorial para ter acesso ao nosso servidor.

Visualizando o formulário conversacional

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

E é tudo o que você precisa para enfileirar uma folha de estilos específica para o addon Conversational Forms. Gostaria de vincular o logotipo que aparece em seus formulários conversacionais? Dê uma olhada em nossa documentação sobre Como Vincular o Logotipo do Seu Formulário Conversacional.

Ação de Referência

wpforms_conversational_forms_enqueue_styles

Perguntas Frequentes

Q: Posso usar isto também para o addon Páginas de Formulário?

R: Para ter um enqueue único para o addon Páginas de Formulário, use este trecho de código em vez disso. Você pode ler mais sobre esta ação revisando 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 );