How to highlight the unanswered questions in a form?

[member]

Hi all!

I'm looking for ways to make the form areas that were not filled out to be highlighted so that a contact can fill them in before a submission can be made. 

Currently there is no indication which of the mandatory questions are unaswered. For that reason it seems that the page is broken as the missed questions are not marked or highlighted. Therefore people give up and it results that the survey doesn't get submitted.

Does anybody know how to highlight the unanswered questions?

Thanks in advance!

[AJLaPorte_diagr]

You can also try using the :required css selector as well to apply styling to elements that have the required data attribute in them such as:

<input id="firstname-04898ea1-7372-4e40-ba81-6364cd7f6959_1192" class="hs-input" type="text" name="firstname" required value="" placeholder="" >

so your CSS would be something like:

:required {
    background: red;
}

Here is where it can be used:

https://caniuse.com/#feat=form-validation

Best option though is to do as @stefen mentioned as that CSS would be applied when:

• someone submits the form and not all the required fields are filled out
• when someone clicks out of a required field before filling it out
• when someone enters invalid information into a field (like text in an email field but not having an @ symbol in there. 

[member]

Thank you so much everybody for your help and suggestions! 

[stefen]

@member the class "invalid" gets added to each input element if the field is required on submission. Knowing this, you can use some simple CSS to make the fields stand out as desired. A red border for example:

input.invalid {
  border-color: red;
}

[MFrankJohnson]

Including some basic support info will help the community respond with greater feedback.
- HubSpot version -- e.g., Enterprise, Pro, Starter, or free?
- Embedded form or HubSpot page?
- Screenshot
- Link to problem area (if able)