Django-Formify: A Django Form Rendering Package for Tailwind CSS Enthusiasts

Show & Tell
1

As a Django developer, I have relied on Tailwind CSS for its user-friendly approach and the rich third-party resources available.

When it comes to rendering Django forms with a Tailwind CSS aesthetic, the community mainly offers two main approaches:

  1. crispy-tailwind
  2. FORM_RENDERER and django-widget-tweaks

While these solutions exist, they may lack the desired flexibility and ease of customization. To address this, I took the initiative to develop a package that offers a more refined solution.

Introducing django-formify: A Django form rendering package that seamlessly integrates Tailwind CSS styles into Django forms.

I have used it in some of my Django and Wagtail CMS projects and the experience was amazing.

Here are some key highlights for those looking for a quick overview:

  1. The template tags in django-formify simply pass arguments to the form rendering layer. Developers can leverage Python OOP to override specific methods within the form rendering layer, a bit like writing Django class-based views.
  2. Field dispatch in django-formify allows developers to define Python methods within the form rendering layer to manage the rendering behavior of specific widget types. This feature proves invaluable for customizing widget styles. For instance, altering the rendering behavior of a TextInput widget involves overriding the text_input method.
  3. Leveraging django-viewcomponent, django-formify introduces a component-driven UI to form rendering. Components like FieldWrapper, FieldLabel, and FieldErrorHelpText facilitate seamless customization in a structured manner. For instance, utilizing FieldWrapper enables developers to swiftly create a horizontal form layout by applying specific CSS classes.
  4. django-formify also supports django-crispy-forms Layout and syntax are nearly the same, the difference is that django-formify Layout are built using django-viewcomponent
  5. All components and layout objects within django-formify are easily customizable through Python OOP. Developers are encouraged to create custom components and configure django-formify to utilize them in form rendering.
  6. Best practice: django-formify advocates for writing logic in Python files rather than overriding Django template files. This approach enhances long-term maintenance, steering clear of complexities such as those found in crispy_tailwind/templates/tailwind/field.html.

django-formify is designed to be extensible, potentially supporting other style solutions like Bootstrap and Bulma, akin to the versatility of django-crispy-forms.

The package is open-source and available on GitHub at the following link:

django-formify

Your feedback is greatly appreciated, and I hope this package proves valuable to the community.

1 Like
2

Hi @michael-yin — this looks interesting. I think @smithdc1 might find it so too.

From the README:

Django-Formify has components built using Django-ViewComponent, which makes the code more reusable and easy to maintain. Developers can also create their own components to fit their needs.

A post (either here or on your blog) about that might be cool. There’s no reason why Crispy Layout object have to be template backed per se. They could us htpy, say :thinking:

3

@carltongibson

Thanks for your feedback and I will write a post with more details about this in a bit.

As for the component solution, in Django-Formify, I need to develop and use some components in Django template and Python file.

Even there are many component solution in Django community:

  1. GitHub - EmilStenstrom/django-components: Create simple reusable template components in Django.
  2. GitHub - mixxorz/slippers: A UI component framework for Django. Built on top of Django Template Language.
  3. GitHub - wrabit/django-cotton: Modern UI Composition for Django
  4. https://htpy.dev/

The above component solution can only work in Django template or Python code.

What I need is a component solution which can let me create components which can used in Django template and Python code

Fortunately GitHub - rails-inspire-django/django-viewcomponent: Build reusable components in Django, inspired by Rails ViewComponent can let me do that in clean way.

For example:

I can use “field_wrapper_component” in Django template like this

{% component field_wrapper_component  %}

{% endcomponent %}

Or use Div component and Submit component in forms.py like this

Div(
    Div(Field("email"), css_class="col-span-12 md:col-span-6"),
    Div(Field("password"), css_class="col-span-12 md:col-span-6"),
    Div(Field("address"), css_class="col-span-12"),
    Div(Field("address2"), css_class="col-span-12"),
    Div(Field("city"), css_class="col-span-12 md:col-span-6"),
    Div(Field("state"), css_class="col-span-12 md:col-span-4"),
    Div(Field("zip_code"), css_class="col-span-12 md:col-span-2"),
    Div(Field("check_box"), css_class="col-span-12"),
    Div(Submit(text="Sign in"), css_class="col-span-12"),
    css_class="grid grid-cols-12 gap-3",
)

All of them are built by ONE component solution in Django project.