Formidable Forms

Formidable Forms

  • Features
  • Pricing
  • Resources
    • Docs & Support
    • Blog
    • Community
  • Solutions
    • Web Applications
    • Calculators
    • Surveys
    • Directories
    • Payments
    • Contact forms
  • Login
  • Get Formidable Forms

Formidable Team / Last Updated December 26, 2022

How to Add an RGB Color Picker in WordPress Forms

A WordPress color picker can be a simple yet professional part of your website design. We'll show you how to add one in just a few minutes!

How to Add an RGB Color Picker in WordPress Forms

Designing a great form isn't always easy. You have to choose the fonts, format, and even the color. If you've ever done all of this manually, you probably understand that it can be a long and frustrating process. Your visitors might share the same feelings.

Fortunately, a manual form isn't your only option. A simple color picker can make it easier to view results and find exactly the shade you want. By adding a WordPress color picker to your form, you can also streamline your visitor's experiences on your website.

Formidable Forms is the best WordPress Form Builder plugin. Get it for free!

In this article, we'll cover a few reasons why form design elements are so important. Then, we'll show you how to add a color picker to your forms. Let's dive right in!

Why a WordPress color picker can be important for design

If you've found yourself searching for "how to add a WP color picker", chances are you already know how helpful this tool can be. There's no need to understand complex hex codes. You can simply point and click on the shade that you like, instead.

Additionally, this kind of freedom means you have a huge selection of colors at your fingertips. A pre-set palette doesn't limit you or your users. This means you can customize your site design quickly.

However, it's not just about the specific benefits. A color picker can also make your site look more professional. This tool is widely known. As such, offering one can show that you're committed to providing the best user experience possible.

Finally, adding a color picker can also be easy. You don't even need a WordPress color picker plugin. If you're using Formidable Forms, we've included an easy way to add this element to any of your forms.

How to add a WordPress color picker to your forms

Here's how to add a color picker option to your WordPress forms!

Step 1: Load the WordPress color picker code

First, you'll need to edit your theme files. These files tell your website how to display your content. As such, you'll need to change your site's code to create a WordPress color picker.

You can start by navigating to your WordPress dashboard. Then, go to Appearance → Theme Editor:

An example of the WordPress theme editor.

You'll get an alert from WordPress warning you to be careful while editing. We'll only be making one simple change. However, if you'd like to be extra cautious, you can also use a File Transfer Protocol (FTP) client instead.

Select the functions.php file from the right-hand Theme Files menu. Scroll to the bottom of the page. Then, copy and paste the following code:

add_action( 'wp_enqueue_scripts', 'custom_enqueue_color_picker' );
add_action( 'wp_default_scripts', 'wp_default_custom_scripts' );
function custom_enqueue_color_picker() {
wp_enqueue_style( 'wp-color-picker' );
wp_enqueue_script( 'wp-color-picker' );
}
function wp_default_custom_scripts( $scripts ){
$suffix = SCRIPT_DEBUG ? '' : '.min';
$scripts->add( 'iris', '/wp-admin/js/iris.min.js', array( 'jquery-ui-draggable', 'jquery-ui-slider', 'jquery-touch-punch' ), '1.0.7', 1 );
$scripts->add( 'wp-color-picker', "/wp-admin/js/color-picker$suffix.js", array( 'iris' ), false, 1 );
$scripts->set_translations( 'wp-color-picker' );
}

Click on Update File to save your work. This should be all you need to do. Still, keep in mind that these changes will only apply to your current theme.

If you change your theme, you'll need to repeat this step. You can also use a child theme for this process instead.

Step 2: Create your form

Next up, you'll create your form. You can also edit an existing one, but we'll start from scratch for this walkthrough.

Go to Formidable → Forms → Add New:

The blank slate of creating a new form with our plugin.

From here, you can add fields to build your form. You can get as creative as you like, making anything from a simple contact form to a fun WordPress quiz. Insert as many or as few fields as you need. We've chosen to work with a single text field for this walkthrough.

Click on Update to save your work. You should now have a form field that displays your text on the front end. Users who click on it can use it like any other text field.

For reference, here's what ours looks like at this point:

Making a colorpicker test when designing a WordPress color picker plugin.

Make any necessary changes to your fields. When you're ready, you can move on to the final step.

Step 3: Add the Javascript code and publish

Finally, you can add the required Javascript code.

Start by adding an HTML field to your form. Then, copy and paste the following code, where 30 is the ID of the single text field that you want to be the color picker.

<script>
jQuery(document).ready(function() {
jQuery( '[name="item_meta[30]"]' ).wpColorPicker();
});
</script>

Afterward, save your work. Your field should now look something like this:

An example of the final WP color picker.

Your form can now display a large selection of possible colors. Keep in mind that you will need to repeat this process for every field where you want to add a WordPress color picker.

When you're done adding a color picker, you may also want to think about other ways to improve your forms. For example, you might choose to make a longer form more enjoyable by breaking it into multiple steps.

Finally, publish your form on the page you'd like. Your users will now be able to access it and submit their information.

Conclusion

A color picker can be a handy tool. However, adding one isn't always simple. Fortunately, that's not the case with Formidable Forms. By adding a few lines of code, you can start offering an easy design option to your visitors.

In this article, we showed you how to add a WordPress color picker in three steps:

  1. Add the color picker code to your theme files.
  2. Create your form or edit an existing one.
  3. Add the custom CSS to your field of choice.

Color pickers aren't the way to make a better user experience. Check out other ways that our Formidable Forms plugin can help improve your site today!

Find more ways to create a better user experience

  • WordPress Popup Plugin 5 Best WordPress Popup Plugins You Can Install Now
    Read More
    How to create a number range slider in WordPress How to Create a Number Range Slider in WordPress Forms
    Read More
    Replace Radio Buttons with Images in WordPress How to Replace Radio Buttons with Images in WordPress Forms
    Read More

Using WordPress and want to get Formidable Forms for free?

Get Formidable Forms Lite Now

This article may contain affiliate links. Once in a while, we earn commissions from those links. But we only recommend products we like, with or without commissions.

Comments

  1. sbboyd says

    November 17, 2011 at 11:23 pm

    Great explanation as your the only one I could actually follow and get it working.

    Do you know how to hover over an image and get the color change?

    Thanks.

  2. Steve says

    November 18, 2011 at 9:49 am

    You want the color to change in the color picker field when hovering over an image? This would be a fairly intense modification and wouldn't be within the scope of this demo...It may be possible to find something on this demo page for the javascript, but anything there would need to be tied in with some sort of plugin or javascript that can detect and save the hex color of the hovered location. I think anything on the web is possible, but this would most likely take some time, research, and a decent amount of javascript/ajax knowledge.

Get Email Updates

Popular Resources

    • How to Create a Searchable Database on a WordPress Site
    • Create a WordPress Custom Calculator: Easy, Powerful Results
    • How to Create a Fitness Tracker in WordPress
    • Formidable Views: The Best WordPress Custom Application Plugin
    • How To Require Email To Download Files in WordPress
    • How to Create Conditional Drop Down Lists in WordPress Forms
    • Best Gravity Forms Alternative for WordPress: Formidable Forms vs. Gravity Forms
    • How to Make a Quiz in WordPress
    • WPForms Alternative: Formidable Forms vs. WPForms Compared

Take on bigger projects Right Now

Get the tools you need to revolutionize your workflow and architect a masterpiece. Build the most advanced WordPress forms and actually use the data you collect in meaningful ways.

Get the most advanced WordPress form plugin and the only form builder with integrated Views.

Get Formidable Forms Now

Resources

  • Community
  • Affiliates
  • Contact
  • Free Online Form Builder

Top Features

  • Application Builder
  • Calculator Forms
  • Surveys & Polls
  • Quiz Maker
  • Form Templates
  • Application Templates
  • Directories
  • Donation Plugin

Company

  • About Us
  • Giving Back
  • Careers
  • Newsletter
  • WP Tasty
  • Nutrifox

Copyright © 2023 Strategy11, LLC. Formidable Forms® is a registered trademark Strategy11, LLC.
Privacy Policy | Terms of Service | Sitemap

Join 300,000+ using Formidable Forms to create form-focused solutions fast. Get Started See User Reviews