Can I add a Color Picker to Django Forms

Question

I tried using the django-colorfield module which works great for the admin page but I cannot get it to render the widget in the actual forms. Below is what I have tried so far and all I get on the form is a CharField with the default value as text. I am open to every and any suggestions but I do not want to use the RGB color picker that html5 has if possible.

This is in my forms.py

from django import forms
from .models import Automation
from colorfield.fields import ColorWidget


def get_automation_form(content, data=None, files=None):
    songs = content[2].split(', ')
    music_choices = []
    for song in songs:
        song = song.replace(' ', '-')
        song_filename = f'Music/{song}.wav'
        music_choices.append((song_filename, song))

    class AutomationForm(forms.ModelForm):
        music_selection = forms.CharField(widget=forms.Select(choices=music_choices))
        class Meta:
            model = Automation
            fields = content[0]
            labels = content[1]
            widgets = {
                'color1': forms.CharField(widget=ColorWidget()),
                'color2': forms.CharField(widget=ColorWidget()),
                'color3': forms.CharField(widget=ColorWidget()),
                'color4': forms.CharField(widget=ColorWidget()),
                'color5': forms.CharField(widget=ColorWidget()),
            }

        def __init__(self, *args, **kwargs):
            super(AutomationForm, self).__init__(data=data, files=files,*args, **kwargs)

    return AutomationForm()

This is in my models.py

from django.db import models
from django.contrib.auth.models import User
from colorfield.fields import ColorField

class Automation(models.Model):
    timestamp = models.DateTimeField(auto_now=True)

    user = models.ForeignKey(User, on_delete=models.CASCADE, default="", blank=True)

    text_field01 = models.CharField(max_length=50, default="")
    text_field02 = models.CharField(max_length=50, default="")
    text_field03 = models.CharField(max_length=50, default="")
    text_field04 = models.CharField(max_length=50, default="")
    text_field05 = models.CharField(max_length=50, default="")
    text_field06 = models.CharField(max_length=50, default="")
    text_field07 = models.CharField(max_length=50, default="")
    text_field08 = models.CharField(max_length=50, default="")
    text_field09 = models.CharField(max_length=50, default="")
    text_field10 = models.CharField(max_length=50, default="")

    image_field01 = models.ImageField(upload_to='client_image_inputs', default="")
    image_field02 = models.ImageField(upload_to='client_image_inputs', default="")
    image_field03 = models.ImageField(upload_to='client_image_inputs', default="")
    image_field04 = models.ImageField(upload_to='client_image_inputs', default="")
    image_field05 = models.ImageField(upload_to='client_image_inputs', default="")
    image_field06 = models.ImageField(upload_to='client_image_inputs', default="")
    image_field07 = models.ImageField(upload_to='client_image_inputs', default="")
    image_field08 = models.ImageField(upload_to='client_image_inputs', default="")
    image_field09 = models.ImageField(upload_to='client_image_inputs', default="")
    image_field10 = models.ImageField(upload_to='client_image_inputs', default="")
    image_field11 = models.ImageField(upload_to='client_image_inputs', default="")
    image_field12 = models.ImageField(upload_to='client_image_inputs', default="")
    image_field13 = models.ImageField(upload_to='client_image_inputs', default="")
    image_field14 = models.ImageField(upload_to='client_image_inputs', default="")
    image_field15 = models.ImageField(upload_to='client_image_inputs', default="")
    image_field16 = models.ImageField(upload_to='client_image_inputs', default="")
    image_field17 = models.ImageField(upload_to='client_image_inputs', default="")
    image_field18 = models.ImageField(upload_to='client_image_inputs', default="")
    image_field19 = models.ImageField(upload_to='client_image_inputs', default="")
    image_field20 = models.ImageField(upload_to='client_image_inputs', default="")

    video_field01 = models.FileField(upload_to='client_video_inputs', default="")
    video_field02 = models.FileField(upload_to='client_video_inputs', default="")
    video_field03 = models.FileField(upload_to='client_video_inputs', default="")
    video_field04 = models.FileField(upload_to='client_video_inputs', default="")
    video_field05 = models.FileField(upload_to='client_video_inputs', default="")
    video_field06 = models.FileField(upload_to='client_video_inputs', default="")
    video_field07 = models.FileField(upload_to='client_video_inputs', default="")
    video_field08 = models.FileField(upload_to='client_video_inputs', default="")
    video_field09 = models.FileField(upload_to='client_video_inputs', default="")
    video_field10 = models.FileField(upload_to='client_video_inputs', default="")
    video_field11 = models.FileField(upload_to='client_video_inputs', default="")
    video_field12 = models.FileField(upload_to='client_video_inputs', default="")
    video_field13 = models.FileField(upload_to='client_video_inputs', default="")
    video_field14 = models.FileField(upload_to='client_video_inputs', default="")
    video_field15 = models.FileField(upload_to='client_video_inputs', default="")
    video_field16 = models.FileField(upload_to='client_video_inputs', default="")
    video_field17 = models.FileField(upload_to='client_video_inputs', default="")
    video_field18 = models.FileField(upload_to='client_video_inputs', default="")
    video_field19 = models.FileField(upload_to='client_video_inputs', default="")
    video_field20 = models.FileField(upload_to='client_video_inputs', default="")

    color1 = ColorField(default="FFFFFF")
    color2 = ColorField(default="FFFFFF")
    color3 = ColorField(default="FFFFFF")
    color4 = ColorField(default="FFFFFF")
    color5 = ColorField(default="FFFFFF")

    music_selection = models.CharField(max_length=120, default="")

This is my form.html

{% extends "main/base.html" %}
{% load crispy_forms_tags %}
{% block content %}
{% a_form.media %}
<form method="POST" enctype="multipart/form-data">
            {% csrf_token %}
            <input type="hidden" name="nickname" value="{{ builder.nickname }}" />
            <fieldset class="form-group">
                <legend class="border-bottom mb-4">{{ builder.title }}</legend>
                {{ a_form|crispy }}
            </fieldset>
            <div class="form-group">
                <button class="btn btn-outline-info" type="submit">Submit</button>
            </div>
        </form>
{% endblock %}

Answer 1

The widget for a ColorField is the ColorWidget [GitHub]. So in your form, you can use:

from colorfield.widgets import ColorWidget

class AutomationForm(forms.ModelForm):

    music_selection = forms.CharField(widget=forms.Select(choices=music_choices))
    class Meta:
        model = Automation
        fields = content[0]
        labels = content[1]
        widgets = {
            'color1': ColorWidget,
            'color2': ColorWidget,
            'color3': ColorWidget,
            'color4': ColorWidget,
            'color5': ColorWidget,
        }

    def __init__(self, *args, **kwargs):
        super(AutomationForm, self).__init__(data=data, files=files,*args, **kwargs)

Note that in your template, you need to render the media of your form, so:

{{ form.media }}
<form …>
    {% csrf_token %}
    {% form.as_p %}
</form>