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_3with 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