Hide or Gray Out Submit Buttons for Required Fields

Overview

The Disable Button on Required Fields extension lets you control what happens to a submit button or an opt-in checkbox when required form fields are not yet filled in. You can gray the button out, apply custom colors, or hide it entirely. Once all required fields are complete, the button automatically restores to its original configured colors and becomes fully active.

The extension checks required fields in real time as the visitor types, so the button state always reflects the current form input with no delay.

Installation

Log in to your Digioh account and hover over your profile menu in the top right corner. Select Extensions.
Locate Disable Button on Required Fields under the Button Customization section and install it.
Click Publish to Your Site to activate the extension.

Configuration

Once installed, add metadata to any submit button or opt-in checkbox in your Campaign to activate the extension for that element. You can do this for any number of buttons or checkboxes in the same Campaign.

Open your Campaign in the editor.
Select the submit button or opt-in checkbox you want to configure.
Scroll down to the Button Metadata or Opt-in Field Metadata section (depending on the element you are configuring).
Add required_disable as the key and choose a value from the table below.
Save and publish your Campaign.

Campaign Editor showing a submit button selected, with the Button Metadata section open and required_disable set to "default" as the key-value pair, with an arrow pointing to the metadata fields

For more on adding metadata, see How do I add metadata?

Metadata Reference

Add the key required_disable to your button or checkbox at the element level. The table below shows the possible values and what each one does. You only need to set one.

Value	What It Does
`default`	Grays out the button while required fields are incomplete, using built-in disabled colors (dark gray background, light gray text). When all required fields are filled, the button returns to its original colors automatically. Valid on submit buttons only.
`#RRGGBB,#RRGGBB`	Same as `default`, but uses colors you specify. Enter two hex color codes separated by a comma: the first sets the button background, the second sets the button text. Both standard 6-digit hex (`#1AA33B`) and 3-digit shorthand hex (`#1A3`) are accepted. Example: `#1AA33B,#32BBFF`. Valid on submit buttons only.
`colorName,colorName`	Same as the hex option above, but using standard CSS color names instead of hex codes. Enter two color names separated by a comma: the first sets the button background, the second sets the button text. Example: `gray,white` or `darkgray,silver`. Valid on submit buttons only.
`hide`	Hides the button completely while required fields are incomplete. The button reappears automatically once all required fields are filled. Valid on submit buttons and the native opt-in checkbox. This is the only supported value for the opt-in checkbox (see Checkbox Support below).

How It Works

The extension monitors required form fields in real time. The button updates as the visitor fills in the form so there is no delay waiting for the user to move to the next field. When all required fields on the current page are filled in, the button automatically restores to its original configured colors and reappears if it was hidden.

Example:

Before the required field is filled in:
After the required field is filled in:

Monitored Field Types

The extension watches the following fields when they are marked as required in your campaign settings:

Full name, First name, Last name
Email
Phone
Opt-in checkbox
Custom fields 1 through 50

Checkbox Support

This extension supports hiding the native opt-in checkbox using the hide value. When the required fields on the form are filled in, the checkbox reappears automatically.

Note that hide is the only supported value for the opt-in checkbox, and it is not supported on custom checkbox fields. Applying default or a color pair to the opt-in checkbox will throw a validation error, and the extension will not run on that campaign.

Troubleshooting

Issue	Cause	Solution
The button does not change state	Extension not published, or metadata key/value is incorrect	Confirm the extension is installed and published. Check that the metadata key is `required_disable` and the value matches one of the supported options.
Checkbox label stays visible after hiding	The checkbox is not the native opt-in checkbox	Label hiding is only supported for the native opt-in checkbox. Custom checkbox fields will hide the checkbox itself, but the label will remain visible.
Validation error on page load	A color value or `default` was applied to the opt-in checkbox	The opt-in checkbox only supports `hide`. Update the metadata value accordingly.