WPForms Light – required field asterisks and arrow for drop downs showing up acr

Hey @tribe01,

It looks like there could be a styling conflict between the site theme and the forms. To fix this, please try the following custom CSS snippet:

#boldgrid-sticky-wrap .bgtfw-form .bgtfw-is-required:before {display: none !important;}

And in case it helps, here’s a tutorial on how to add custom CSS like this to your site.

Hope this helps!

I tried the code you provided and all it does is make the asterisks disappear completely. The drop down arrow is still misaligned to the right of the form.

Does WPforms create its own css file? I can’t locate anything.

Hey @tribe01,

Thanks for following on this ticket!

I looked at the form and the dropdown icon and asterisk that seems to be misaligned are coming because of theme conflict. Further, WPForms has its own CSS style which you can find under /wp-content/plugins/wpforms folder.

You can also add following CSS and see if that fixes the issue:

#boldgrid-sticky-wrap .bgtfw-form .bgtfw-wrap-select:after{display: none !important;}

Kindly,

• This reply was modified 2 years, 7 months ago by Prashant Rai.

I found the CSS folder, WHat file would have the “required” attribute that would control the asterisk?

• This reply was modified 2 years, 7 months ago by tribe01.

Also I tried the second set of CSS which was very similar to the first and it does not appear to make any difference either.

• This reply was modified 2 years, 7 months ago by tribe01.

Hey @tribe01,

Thanks for getting in touch!

When you have some time, can you please share the screenshot of where you’re adding the CSS since I don’t see the CSS that I’ve shared in the browser console?

Kindly,

I am adding it in the theme CSS area based on the link you told me to use with instructions to add it.

https://www.ballinger-collision.com/error2.PNG

Also could you please acknowledge my other reply with a question posted three days ago:
Thanks.

I found the CSS folder, WHat file would have the “required” attribute that would control the asterisk?

• This reply was modified 2 years, 7 months ago by tribe01.

Hey @tribe01,

Thanks for following up on this ticket!

Primarly the CSS styling for the Asteric is controled by _reset.scss under /plugins/wpforms-lite/assets/css/assets/scss/partials/. Further, you can view the PHP code under /wp-content/plugins/wpforms/includes/functions.php file wherein you can search for wpforms-required-label class.

Further, I looked at the form, and I see that the asteric issue is no longer there. When you have some time, can you please clear the cache and see if the issue is still there

Kindly,

Thanks for the info on where the css is located. On a whim I went back and added both sets of code that you had told me to try separately and it removed the asterisks completely. The issue is not resolved just hidden temporarily. Any other suggestions on how to get the fields marked as required, but not have the asterisks appear in the wrong area?

Hey @tribe01,

Since the issue seems to be coming because of theme conflict, I would suggest you check with the developers to see if they can assist you with this.

In the meantime, if you have any other questions, please feel free to reachout.

Kindly,

Hey @tribe01,

We haven’t heard back from you in about a week, so I’m going to go ahead and close this thread for now. But if you’d like us to assist further, please feel welcome to continue the conversation.

Thanks!