Css code for restricting submit button when fields are blank

Question

I need CSS code to restrict submit button if fields are empty.Daily we are receiving 3-5 blank inquiries through our WordPress landing page submit button.

Where to put these CSS codes if any.

Thanks

Answer 1

You really should do this with a script, because doing something like this by CSS is very sensitive to any future changes to your form structure. It can be done with only CSS, using the :placeholder-shown selector. For this you'll need to add a placeholder to all text inputs.

/* As long as one of the selectors is matched, the button won't show. */
form input:placeholder-shown ~ button,
form textarea:placeholder-shown ~ button {
  display: none;
}

<form>
first name: <input type="text" name="firstname" placeholder="Enter first name"><br>
Last name: <input type="text" name="lastname" placeholder="Enter last name"><br>
Text area<br>
<textarea name="textarea" placeholder="Enter some text..."></textarea>
<br>
<button type="submit">Submit</button>
</form>

This will work, but for any change in the form you'll need to make sure it doesn't break. I personally won't use this :)