[Answered ]-How to customize the rendering of a form in Django?

1👍

I’m in the same boat as you Jim, and I’m currently looking at https://docs.djangoproject.com/en/dev/ref/forms/widgets/. It seems a good starting point for customisation of fields.

As for conditionally showing/hiding elements, if you want this to be done on the form load (ie, a predetermined form layout, you could follow this SO answer which explains changes to the form’s init: Conditionally show and hide a form field and set the field value

Or, if you mean how you could do this contextually depending on other selections as the form is being completed, the only way I’ve found up to now is to have some custom jQuery loaded in with the template that the form renders on. If there’s a way to do this in-form, I want to know too 🙂

1👍

First of all, absolutely don’t avoid forms. In fact, always use forms in django. They’re simple to use and there’s no reason not to.

Forms have enough flexibility to give you as much control as you need.

Typically you’ll want to do something like this:

<form action="/myurl/" method="post">
    {% csrf_token %}
    {% for fld in form %}
        {{ fld.label }} {{ fld }} {{ fld.help_text }} {{ fld.error }}
    {% endfor %}
    <input type="submit" value="Submit" />
</form>

You also might want to wrap fields in divs or a table. You might also test for fld.name to do something custom based on a field name.

👤Rainy

0👍

Basing my answer on what Rainy has and referring to this and this, my answer would be

sudo pip install django-widget-tweaks

To enable widget_tweaks in your project you need to add it to INSTALLED_APPS in your projects settings.py file:

INSTALLED_APPS = [
    ...
    'widget_tweaks',
    ...
]

I’d include this at the beginning of all the template files that I have forms to render.

{% load widget_tweaks %}

And render my forms as follows:

<form method="post" action="">
  {% csrf_token %}
  {% for fld in form %}
    <div class="form-group">
      {% for error in fld.errors %}<p class="help-block text-danger">{{ error }}</p>{% endfor %}
      <label>{{ fld.label }}</label>
      {% render_field fld class+="form-control" %}
      <p class="help-block">{{ fld.help_text|safe }}</p>
    </div>
  {% endfor %}
  <button type="submit" class="btn btn-success">{% trans 'Submit' %}</button>
</form>
👤Sand

Leave a comment