Atenção!

Este artigo contém código CSS e destina-se a desenvolvedores. Oferecemos este código como uma cortesia, mas não fornecemos suporte para personalizações de código ou desenvolvimento de terceiros.

Para orientação adicional, consulte o tutorial da WPBeginner sobre como adicionar CSS personalizado.

Dispensar

Alterando o Texto Chave em Formulários Conversacionais

Atualizado:
Ver Markdown

Você está usando o addon Conversational Forms e quer alterar o texto principal que aparece nos campos de seleção? Por padrão, o addon adicionará Chave A, Chave B, Chave C, etc., para campos de múltipla escolha ao visualizar o formulário no modo conversacional. No entanto, você pode alterar este texto com CSS personalizado.

Por padrão, os campos de caixa de seleção e múltipla escolha mostrarão Chave e, em seguida, uma letra para cada opção em seu formulário conversacional

Neste tutorial, compartilharemos o trecho de CSS que alterará o texto "Chave" para algo diferente.

Criando seu Formulário

Para começar, vamos criar um novo formulário Conversacional e adicionar nossos campos a ele. Isso incluirá pelo menos um campo do tipo Checkbox e um campo do tipo Múltipla Escolha (radio).

crie o formulário e adicione seus campos, incluindo pelo menos um campo de caixa de seleção e um campo de múltipla escolha

Você está se perguntando qual a diferença entre os campos Checkboxes e Múltipla Escolha?

Checkboxes permitem que o usuário escolha itens de um número fixo de alternativas. Em contraste, os botões de rádio (campo Múltipla Escolha) permitem que o usuário escolha apenas um item de uma lista de várias alternativas predefinidas. Se desejar, você pode limitar o número de opções que os usuários escolhem no campo Checkboxes.

Adicionando o CSS para Alterar o Texto da Chave

Para este tutorial, não queremos mostrar a palavra 'Chave' em nosso formulário. Queremos alterar este texto para 'Item'.

Vamos colocar nosso CSS dentro do que é chamado de media query. Isso é apenas uma maneira de informar ao CSS que ele não deve ser aplicado, a menos que a min-width do dispositivo seja a que especificamos em nosso CSS. Para saber mais sobre media queries, confira o guia do Desenvolvedor Mozilla sobre o que é uma media query e como usá-la.

Agora, é hora de adicionar o CSS ao seu site para que possamos alterar este texto. Simplesmente copie e cole o CSS abaixo em seu site. Se precisar de ajuda para adicionar CSS ao seu site, por favor revise este tutorial.

#wpforms-conversational-form-page .wpforms-field-radio li:not(.wpforms-image-choices-item) label:before,
#wpforms-conversational-form-page .wpforms-field-payment-multiple li:not(.wpforms-image-choices-item) label:before,
#wpforms-conversational-form-page .wpforms-field-payment-checkbox li:not(.wpforms-image-choices-item) label:before,
#wpforms-conversational-form-page .wpforms-field-gdpr-checkbox li:not(.wpforms-image-choices-item) label:before,
#wpforms-conversational-form-page .wpforms-field-checkbox li:not(.wpforms-image-choices-item) label:before {
    counter-increment: wpforms-radio;
    content: counter(wpforms-radio, upper-alpha);
    left: 10px;
}
 
#wpforms-conversational-form-page .wpforms-field-radio li:not(.wpforms-image-choices-item):not(.wpforms-selected) label.wpforms-field-item-hover:before,
#wpforms-conversational-form-page .wpforms-field-radio li:not(.wpforms-image-choices-item):not(.wpforms-selected) label:hover:before,
#wpforms-conversational-form-page .wpforms-field-radio li:not(.wpforms-image-choices-item):not(.wpforms-selected) label.wpforms-field-item-hover:before,
#wpforms-conversational-form-page .wpforms-field-payment-multiple li:not(.wpforms-image-choices-item):not(.wpforms-selected) label:hover:before,
#wpforms-conversational-form-page .wpforms-field-payment-multiple li:not(.wpforms-image-choices-item):not(.wpforms-selected) label.wpforms-field-item-hover:before,
#wpforms-conversational-form-page .wpforms-field-payment-checkbox li:not(.wpforms-image-choices-item):not(.wpforms-selected) label:hover:before,
#wpforms-conversational-form-page .wpforms-field-payment-checkbox li:not(.wpforms-image-choices-item):not(.wpforms-selected) label.wpforms-field-item-hover:before,
#wpforms-conversational-form-page .wpforms-field-gdpr-checkbox li:not(.wpforms-image-choices-item):not(.wpforms-selected) label:hover:before,
#wpforms-conversational-form-page .wpforms-field-gdpr-checkbox li:not(.wpforms-image-choices-item):not(.wpforms-selected) label.wpforms-field-item-hover:before, 
#wpforms-conversational-form-page .wpforms-field-checkbox li:not(.wpforms-image-choices-item):not(.wpforms-selected) label:hover:before,
#wpforms-conversational-form-page .wpforms-field-checkbox li:not(.wpforms-image-choices-item):not(.wpforms-selected) label.wpforms-field-item-hover:before {
      content: counter(wpforms-radio, upper-alpha);
    content: "Item " counter(wpforms-radio, upper-alpha);
  }

O CSS alterará a palavra Chave para Item em todos os campos de formulário Checkbox e Múltipla Escolha, incluindo quaisquer campos de pagamento como os campos Itens de Checkbox e Múltiplos Itens. Basta substituir a palavra Item pelo que você deseja exibir em seus formulários.

Observação: Ao usar este CSS, este texto não será traduzível, pois é adicionado através de CSS. Se você tem um site multilíngue, este tutorial não é recomendado.

Após adicionar o CSS, você pode ver a alteração no texto da chave

Perguntas Frequentes

Estas são respostas para algumas das principais perguntas que vemos sobre a personalização da visualização do addon Conversational Forms.

Como posso remover o texto completamente?

Para remover o texto completamente, adicione este CSS ao seu site. Para obter assistência na adição de CSS ao seu site, por favor, veja este tutorial.

#wpforms-conversational-form-page div[class^='wpforms-field-'] li:not(.wpforms-image-choices-item) label:before,
#wpforms-conversational-form-page div[class*=' wpforms-field-'] li:not(.wpforms-image-choices-item) label:before,
#wpforms-conversational-form-page div[class^='wpforms-field-'] li:not(.wpforms-image-choices-item):not(.wpforms-selected) label:hover:before,
#wpforms-conversational-form-page div[class*=' wpforms-field-'] li:not(.wpforms-image-choices-item):not(.wpforms-selected) label:hover:before,
#wpforms-conversational-form-page div[class^='wpforms-field-'] li:not(.wpforms-image-choices-item):not(.wpforms-selected) label.wpforms-field-item-hover:before,
#wpforms-conversational-form-page div[class*=' wpforms-field-'] li:not(.wpforms-image-choices-item):not(.wpforms-selected) label.wpforms-field-item-hover:before,
#wpforms-conversational-form-page div[class^='wpforms-field-'] li:not(.wpforms-image-choices-item).wpforms-selected label:before,
#wpforms-conversational-form-page div[class*=' wpforms-field-'] li:not(.wpforms-image-choices-item).wpforms-selected label:before {
  content:none;
}
 
#wpforms-conversational-form-page div[class^='wpforms-field-'] li:not(.wpforms-image-choices-item) label,
#wpforms-conversational-form-page div[class*=' wpforms-field-'] li:not(.wpforms-image-choices-item) label {
  padding: 9px 9px 9px 9px;
}

Pronto! Você alterou com sucesso o texto da chave nos Formulários Conversacionais.

Em seguida, você gostaria de incluir sua própria folha de estilos dedicada para Formulários Conversacionais? Dê uma olhada em nosso tutorial sobre como enfileirar uma folha de estilos para Formulários Conversacionais.

Marcado:
Ainda com dificuldades? Como podemos ajudar?
Última Atualização em 09 de Dezembro de 2024