How to Change the Key Text on Conversational Forms

Introduction

Are you using Conversational Forms addon and want to change the key text that you see on select input fields? With a little CSS you can change this text.

By default, the addon will add Key A, Key B, Key C etc for select input fields when viewing the form in conversational mode.

By default, the checkbox and multiple choice fields will show Key and then a letter for each option on your conversational form

Creating your form

For the purpose of this tutorial, our Conversational Form is already created, however if you need assistance in creating your own Conversational Form, please review this article.

Adding the Multiple Choice and Checkbox Fields

Next we’re going to add in two form fields to our form, a Multiple Choice and a Checkbox field.

Next, add your multiple choice and/or checkbox fields to your form

Adding the CSS to change the key text

Now it’s time to add the CSS to alter the key text for your form.

If you need help in adding CSS to your site, please review this tutorial.

@media (min-width: 769px) {
  #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: "Item " counter(wpforms-radio, upper-alpha);
  }
}
‚Äč
@media (min-width: 769px) {
  #wpforms-conversational-form-page .wpforms-image-choices-item:not(.wpforms-selected):hover .wpforms-image-choices-label:before,
  #wpforms-conversational-form-page .wpforms-image-choices-item:not(.wpforms-selected).wpforms-field-item-hover .wpforms-image-choices-label:before {
    content: "Item " counter(wpforms-radio, upper-alpha);
  }

It is important to note that when using this CSS, this text will not be translatable since it’s added through CSS. If you have a multi-lingual site, this tutorial is not recommended.

After adding the CSS, you'll see the change the key text

And that’s it! You’ve successfully changed the key text on Conversational Forms. Would you like to include your own dedicated stylesheet for Conversational Forms? Take a look at our tutorial on How to Enqueue a Stylesheet for Conversational Forms.

FAQ

Q: How can I remove the text completely?

A: To remove the text completely, add this CSS to your site. For assistance in adding CSS to your site, please see this 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;
}