Form dropdowns are not working correctly - appearing empty after selection

[TuxCare_HS]

Here's a video of what is happening. Please ignore the requests to reach out as this was also sent to support who has not updated us on the issue in 2 days and we have seen an instant drop in leads since this issue occurred. 

Video explanation: https://www.loom.com/share/f95cdd69bb6e461f9510abdd89975bca

In short, when someone selects a field in our dropdown, it doesn't show the selected item and makes it look like there was no selection made. 

It is also missing the grey placeholder text, which I assume is also part of this issue. 

Any help is appreciated. This happens on both our staging website and live website and no changes to the forms had been made. Form appears correct when editing on HubSpot, but does not appear correct on our website. We are using the form ID only to show the form on our website (WordPress). 

[MrJustinGivens · Accepted solution]

Hey @TuxCare_HS , your select box has a CSS height of 38 pixels but you also have padding.

The math doesn't work. 🙂

In the site's CSS, you either fix the padding for selects or add a select height: auto;

See it fixed here:

Justin Givens HUG Leader & Community Champion Resident HubSpot Nerd | Image in a Box   (256) 886-8269 | (256) 434-5877 justin@imageianbox.com imageinabox.com Schedule a time to talk Let's connect on LinkedIn

[TuxCare_HS]

Wow. I still have no idea how the form stopped working all of a sudden without any css changes from our side, but I am SO happy that you helped us fix this issue! It was driving us crazy and you made our weekend so much easier. 

I can't say thank you enough MrJustinGivens. This small change saved us huge headaches. 

[MrJustinGivens]

@TuxCare_HS AWESOME! I was hoping you saw my reply today so you didn't keep on stressing! 

Have a blessed weekend!