An example of the Quform colorpicker

Step 1

Add a Text element to the form.

Step 2

Add the following code to the WordPress theme functions.php file (or create a plugin for it).

1
2
3
4
5
6
add_action('wp_enqueue_scripts', function () {
    if (class_exists('Quform')) {
        wp_enqueue_style('spectrum', Quform::adminUrl('css/spectrum.min.css'), array(), '1.8.0');
        wp_enqueue_script('spectrum', Quform::adminUrl('js/spectrum.min.js'), array(), '1.8.0', true);
    }
});
add_action('wp_enqueue_scripts', function () {
    if (class_exists('Quform')) {
        wp_enqueue_style('spectrum', Quform::adminUrl('css/spectrum.min.css'), array(), '1.8.0');
        wp_enqueue_script('spectrum', Quform::adminUrl('js/spectrum.min.js'), array(), '1.8.0', true);
    }
});
1
2
3
4
5
6
7
8
function my_enqueue_spectrum()
{
    if (class_exists('Quform')) {
        wp_enqueue_style('spectrum', Quform::adminUrl('css/spectrum.min.css'), array(), '1.8.0');
        wp_enqueue_script('spectrum', Quform::adminUrl('js/spectrum.min.js'), array(), '1.8.0', true);
    }
}
add_action('wp_enqueue_scripts', 'my_enqueue_spectrum');
function my_enqueue_spectrum()
{
    if (class_exists('Quform')) {
        wp_enqueue_style('spectrum', Quform::adminUrl('css/spectrum.min.css'), array(), '1.8.0');
        wp_enqueue_script('spectrum', Quform::adminUrl('js/spectrum.min.js'), array(), '1.8.0', true);
    }
}
add_action('wp_enqueue_scripts', 'my_enqueue_spectrum');

Step 3

Go to Forms → Settings → Custom CSS & JS and at the Custom JavaScript field add the following code.

1
2
34
5
6
7
8
9
10
11
12
13
14
15
jQuery(function ($) {
    if ($.fn.spectrum) {
        var $field = $('.quform-field-1_3'); 
        $field.spectrum({
            preferredFormat: 'hex',
            showInput: true,
            allowEmpty: true
        });
 
        $field.closest('.quform-form').on('quform:resetEnd', function () {
            $field.spectrum('set', $field.val());
        });
    }
});
jQuery(function ($) {
    if ($.fn.spectrum) {
        var $field = $('.quform-field-1_3');

        $field.spectrum({
            preferredFormat: 'hex',
            showInput: true,
            allowEmpty: true
        });

        $field.closest('.quform-form').on('quform:resetEnd', function () {
            $field.spectrum('set', $field.val());
        });
    }
});
  • On line 3, replace 1_3 with the unique ID of the Text element from Step 1
  • (Optional) On lines 6-8, you can configure the colorpicker script see the Spectrum options page
Be inspired. © 2024 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy