So - for most the “greyed out” default style of buttons by default work to indicate that the form is not finished being filled out… but i was surprised how many of my users assumed something was broken when a required field is miss in a form that creates a new record.
So, to make it idiot proof, i did a little CSS hacking as I usually do to customize the messaging of buttons on ‘create new’ form pages.
You will likely need to do a bit of customizing as my buttons are also moved slightly for my other CSS nonsense, but should work just fine!
(Tip: Use “stylebot” chrome extension to visually play with CSS on the front end without actually adding it to your project)
Normal State - Record can be saved
Disabled State - Form is missing specific information
The Code With Explanation
/*** CUSTOM SAVE RECORD BUTTON ***/
/* Style the "Create New" button specifically within the new record form */
/* Moves the button slightly to the right and enhances readability */
[data-testid="new-record-form"] button[mutationtype="CREATE"] {
margin-left: 60px; /* Push button to the right */
font-size: 1em; /* Standard font size */
font-weight: 900; /* Bold text to make it more prominent */
}
/* --- DISABLED STATE STYLES --- */
/* When the button is disabled (aria-disabled="true"), hide the inner text span */
/* This prevents users from seeing the default button text while in a disabled state */
[data-testid="new-record-form"] [aria-disabled="true"] span {
opacity: 0; /* Completely hide button text */
}
/* Style the disabled button itself */
/* Changes opacity and background color to indicate it is inactive */
[data-testid="new-record-form"] [aria-disabled="true"] {
opacity: 0.8; /* Slightly faded to indicate it's inactive */
background-color: #333; /* Dark gray to reinforce disabled status */
}
/* --- CUSTOM MESSAGE FOR DISABLED BUTTON --- */
/* Adds a pseudo-element (:before) to display a warning message when button is disabled */
/* This makes it clearer to users why they can't proceed */
[data-testid="new-record-form"] [aria-disabled="true"]:before {
content: "🚨 Information Missing | Please Fill Out Completely to Continue"; /* Custom message */
position: static; /* Keeps the text within normal document flow */
float: left; /* Aligns text to the left of the button */
color: white; /* Ensures visibility against dark background */
padding: 5px 10px; /* Adds some space around the text */
font-size: 0.9em; /* Slightly smaller font size for readability */
font-weight: 300; /* Light font to avoid overwhelming the user */
border-radius: 5px; /* Rounded edges for a softer UI feel */
white-space: nowrap; /* Prevents text from wrapping to multiple lines */
}
The Raw Code:
/*** CUSTOM SAVE RECORD BUTTON ***/
/*create new thing, save btn*/
[data-testid="new-record-form"] button[mutationtype="CREATE"]{
margin-left:60px;
font-size:1em;
font-weight: 900;
}
/*disabled*/
[data-testid="new-record-form"] [aria-disabled="true"] span{
opacity: 0;
}
[data-testid="new-record-form"] [aria-disabled="true"]{
opacity: .8;
background-color: #333;
}
/* Pseudo-element for disabled button */
[data-testid="new-record-form"] [aria-disabled="true"]:before {
content: "🚨 Information Missing | Please Fill Out Completely to Continue";
position: static;
float: left;
color: white;
padding: 5px 10px;
font-size: 0.9em;
font-weight: 300;
border-radius: 5px;
white-space: nowrap;
}