How to Integrate Semantic UI with Django and Crispy Forms

Posted by Josh on October 10, 2016

This post explains how to integrate Semantic UI with Django’s Crispy Forms. After a lot of troubleshooting, it started working. It should be possible to improve parts of this process in the future, but it works for now.

Step 1

Install Crispy Forms. See the docs for instructions.

Step 2

I downloaded this code from Github. Save it in templates/semantic-ui/.

Step 3

Put this code in settings.py:

CRISPY_TEMPLATE_PACK = 'semantic-ui'
CRISPY_ALLOWED_TEMPLATE_PACKS = ('semantic-ui')

Step 4

Create a form in one of your Django apps. The example below is modified from the Crispy Forms docs.

from django import forms
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Submit


class ExampleForm(forms.Form):

    def __init__(self, *args, **kwargs):
        super(ExampleForm, self).__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.form_id = 'someId'
        self.helper.form_class = 'some-class'
        self.helper.form_method = 'post'
        self.helper.form_action = 'sample_form_name'

        # Note that the submit button is added separately, with a Semantic UI class.
        self.helper.add_input(Submit('submit', 'Submit',
                              css_class='ui button'))

    like_website = forms.TypedChoiceField(
        label='Do you like this website?',
        choices=((1, 'Yes'), (0, 'No')),
        coerce=lambda x: bool(int(x)),
        widget=forms.RadioSelect,
        initial='1',
        required=True,
    )

    favorite_food = forms.CharField(
        label='What is your favorite food?',
        max_length=80,
        required=True,
    )

    favorite_color = forms.CharField(
        label='What is your favorite color?',
        max_length=80,
        required=True,
    )

    favorite_number = forms.IntegerField(
        label='Favorite number',
        required=False,
    )

    notes = forms.CharField(
        label='Additional notes or feedback',
        required=False,
    )

Step 5

Update your view:

def sample_form(request):
    context = {'form': ExampleForm}

    return render(request, 'someform/someform_create.html', context)

Step 6

Put the form in a template:

{% extends 'coreapp/layouts/main.html' %}
{% load crispy_forms_tags %}

{% block content %}
<div class="ui form">
    {% crispy form %}
</div>
{% endblock %}

All Done

If it doesn’t work, or if you have suggestions for improvement, please comment below!

Update: a commenter in the old blog mentioned this tip on 2017-11-07:

This can now be done even more easily with Django Semantic UI Forms. It even includes layout capability.