Add option to form submit button

Get Help
, ,
1

I’m trying to add a checkbox to the submit button appearance options. The button shows up but doesn’t live through a save. I leave the form and come back and the checkbox is not checked.

php
<?php

/**
 * Adds an "Apply Action Button Color" checkbox to Form Settings → Form Button.
 * GF's Settings API natively handles saving and restoring the value on the form object.
 */
function proud_action_button_form_setting($placement, $form_id)
{
    if ($placement == 50) { ?>
        <li class="action_setting field_setting">
            <input type="checkbox" id="proudActionButton" onclick="SetFieldProperty('proudActionButton', this.checked);" />
            <label for="proudActionButton" style="display:inline;">
                <?php _e("Action Button", "your_text_domain"); ?>
                <?php gform_tooltip("form_field_action_color") ?>
            </label>
        </li>
    <?php
    }
}
add_filter('gform_field_appearance_settings', 'proud_action_button_form_setting', 10, 2);

function proud_editor_script()
{
    ?>
    <script type='text/javascript'>
        //adding setting to fields of type "text"
        fieldSettings.submit += ", .action_setting";
        //binding to the load field settings event to initialize the checkbox
        jQuery(document).on("gform_load_field_settings", function(event, field, form) {
            jQuery('#proudActionButton').prop('checked', Boolean(rgar(field, 'proudActionButton')));
        });
    </script>
<?php
}
add_action('gform_editor_js', 'proud_editor_script');

function proud_add_action_button_tooltips($tooltips)
{
    $tooltips['form_field_action_color'] = "Checking this will apply the action button color from the Customizer to the form submit button.";
    return $tooltips;
}
add_filter('gform_tooltips', 'proud_add_action_button_tooltips');

I’m using the appearance settings filter because that seems to be the right one, though I grabbed the code from the advanced settings example because there were no examples provided in the appearance settings and this forum post led me to advanced settings filters.

2

The submit button isn’t a field per se so the SetFieldProperty() function won’t work here. This appears to be the easiest method to set a form button property:

<input type="checkbox" id="proudActionButton" onclick="window.form.button.proudActionButton = this.checked;" />
3

Thanks we have it working now.

1 Like