SOLVED

Selecting Form Checkbox Shows Text Instead of Checkmark

Go to solution

Selecting Form Checkbox Shows Text Instead of Checkmark

Not sure why this is, but when you select a checkbox on our form, instead of a checkmark, a string of nonsense text appears instead of a checkmark. Sample page: https://go.taxjar.com/2020-WR-ServicePartner-SalesTaxSuccess_LP-01-Request.html

 

Screen Shot 2020-02-06 at 1.15.20 PM.png

 

Tags (3)
1 ACCEPTED SOLUTION

Accepted Solutions

Re: Selecting Form Checkbox Shows Text Instead of Checkmark

Someone added that content to your CSS stylesheet, it's not related to the Marketo form itself.

 

2020-02-06 13_56_57-https___go.taxjar.com_rs_806-QBE-674_images_taxjar-lp-flex-styles.css.png

View solution in original post

7 REPLIES 7

Re: Selecting Form Checkbox Shows Text Instead of Checkmark

Someone added that content to your CSS stylesheet, it's not related to the Marketo form itself.

 

2020-02-06 13_56_57-https___go.taxjar.com_rs_806-QBE-674_images_taxjar-lp-flex-styles.css.png

View solution in original post

Re: Selecting Form Checkbox Shows Text Instead of Checkmark

 Once again @SanfordWhiteman  you save the day! Thank you!

Re: Selecting Form Checkbox Shows Text Instead of Checkmark

@SanfordWhiteman Removing that jibberish text from the CSS I'm not able to get a checkbox to appear in the form at all now. Is there something I need to put in that content line of the CSS? https://go.taxjar.com/YYYY-WR-Web-Request_LP.html

Re: Selecting Form Checkbox Shows Text Instead of Checkmark

Hi,

 

In the https://go.taxjar.com/rs/806-QBE-674/images/taxjar-lp-flex-styles.css file you have the below code:

form.mktoForm input[type=checkbox] {
-webkit-appearance: none !important;
box-sizing: border-box !important;
}

 

Please remove the below line from this code:

-webkit-appearance: none !important;

 

This will resolve the issue.

 

Thanks

 

Harish Gupta

Re: Selecting Form Checkbox Shows Text Instead of Checkmark

Thank you @Harish_Gupta1. That did the trick!

Level 6

Re: Selecting Form Checkbox Shows Text Instead of Checkmark

You might try:

 content:"\2713";

willing to bet this'll do the trick 😉

 

It looks like this might be the intended CSS character  (check mark) that's getting replaced with all the gibberish. 

 

Removing the -webkit-appearance:none; will actually activate the browser defaults for the check mark which is a less predictable approach (b/c it's different for every browser) when you're using customized form styles for your inputs.  

Re: Selecting Form Checkbox Shows Text Instead of Checkmark

Agreed. Also note -webkit-appearance: none; doesn't  apply in iOS Safari nor IE.  Not really the right way to build custom form appearances (which can be mobile-inaccessible and offputting enough already).