Home / Widgets / Add a color picker field in Formidable Forms
Duplicate Snippet

Embed Snippet on Your Site

Add a color picker field in Formidable Forms

Install this snippet and add 'frm-color-picker' in the 'CSS Layout Classes' setting for a field.

Code Preview
php
<?php
function frm_default_custom_scripts( $scripts ){
	$scripts->add( 'iris', '/wp-admin/js/iris.min.js', array( 'jquery-ui-draggable', 'jquery-ui-slider', 'jquery-touch-punch' ), '1.1.1', 1 );
	$scripts->add( 'wp-color-picker', "/wp-admin/js/color-picker.js", array( 'iris' ), false, 1 );
	$scripts->set_translations( 'wp-color-picker' );
	$custom_css = '.frm-color-picker .button.wp-color-result{border-radius: var(--border-radius) !important}' .
		'.frm-color-picker .wp-picker-container{position:relative}' .
		'.frm-color-picker .wp-picker-clear, .frm-color-picker .screen-reader-text{display:none !important}' .
		'.with_frm_style .frm-color-picker input{position:absolute;width:90px !important;left:32px;border:none;top:1px}';
	wp_add_inline_style( 'wp-color-picker', $custom_css );
}
add_action( 'wp_default_scripts', 'frm_default_custom_scripts' );
function frm_add_colorpicker() {
	wp_enqueue_style( 'wp-color-picker' );
	wp_enqueue_script( 'wp-color-picker' );
?>
jQuery(document).ready(function($){
$('.frm-color-picker input').wpColorPicker();
});
<?php
}
add_action( 'frm_entries_footer_scripts', 'frm_add_colorpicker' );

Comments

Add a Comment