How to Change the Key Text on Conversational Forms

Updated:

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

In this tutorial, we’re going to add CSS that will change the Key text to something different.

Creating your form

To begin, we’ll create a new conversational form and add our fields to it. This will include at least one Checkbox field and one Multiple Choice (radio) field.

If you need any assistance in how to create a conversational form, please review this article.

create the form and add your fields including at least one checkbox field and one multiple choice field

Are you wondering what is the difference between the two form fields mentioned above? Checkboxes allow the user to choose items from a fixed number of alternatives, while radio buttons allow the user to choose exactly one item from a list of several predefined alternatives. For more information on how to set a limit for the Checkbox field, please check out this documentation.

Adding the CSS to change the key text

For the purpose of this documentation, we don’t want to show the word Key on our form. We want to change this text to be Item.

We’re going to place our CSS inside what is called a media query. This is just a way of letting the CSS know that it shouldn’t be applied unless the device’s min-width is what we’ve specified in our CSS. To learn more about media queries, check out the Mozilla Developer guide on what a media query is and how to use it.

Now it’s time to add the CSS to your site so that we can change this text. Simply copy and paste the CSS below to your site.

If you need help in adding CSS to your site, please review this 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);
  }

The CSS will change the word Key to Item on all Checkbox and Multiple Choice form fields, including any payment Checkbox and Multiple Choice. Just replace the word Item with what you would like to display on your forms.

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 can see the change to 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;
}
Tagged:
Still stuck? How can we help?
Last Updated on May 23, 2023