Atenção!

Este artigo contém código CSS e destina-se a programadores. 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.

Ignorar

Alterar o Texto da Chave em Formulários de Conversa

Atualizado:
Ver Markdown

Está a usar o addon Conversational Forms e quer alterar o texto principal que vê em campos de entrada de seleção? Por defeito, o addon adicionará Chave A, Chave B, Chave C, etc., para campos de entrada de múltipla escolha ao ver o formulário em modo conversacional. No entanto, pode alterar este texto com CSS personalizado.

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

Neste tutorial, partilharemos o trecho de CSS que alterará o texto principal para algo diferente.

Criação do seu Formulário

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

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

Está a perguntar-se qual a diferença entre os campos Checkboxes e Múltipla Escolha?

As Checkboxes permitem ao utilizador escolher itens de um número fixo de alternativas. Em contraste, os botões de rádio (campo Múltipla Escolha) permitem ao utilizador escolher apenas um item de uma lista de várias alternativas pré-definidas. Se desejar, pode limitar o número de opções que os utilizadores escolhem no campo Checkboxes.

Adicionar CSS para Alterar o Texto Principal

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

Vamos colocar o nosso CSS dentro do que é chamado de media query. Esta é apenas uma forma de informar o CSS que ele não deve ser aplicado, a menos que a min-width do dispositivo seja a que especificámos no nosso CSS. Para saber mais sobre media queries, consulte o guia do Mozilla Developer 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 no seu site. Se precisar de ajuda para adicionar CSS ao seu site, por favor reveja 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 Itens Múltiplos. Basta substituir a palavra Item pelo que deseja exibir nos seus formulários.

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

Após adicionar o CSS, pode ver a alteração no texto principal

Perguntas Frequentes

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

Como posso remover o texto completamente?

Para remover o texto completamente, adicione este CSS ao seu site. Para 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;
}

É isso! Alterou com sucesso o texto principal nos Formulários Conversacionais.

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

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