CSS styling in Django forms

Question

I would like to style the following   forms py   from django import forms  class ContactForm forms Form       subject   forms CharField max length 100      email   forms EmailField required False      message   forms CharField widget forms Textarea    contact form html    lt form action    method  post  gt     lt table gt         form as table       lt  table gt     lt input type  submit  value  Submit  gt   lt  form gt    For example  how do I set a class or ID for the subject  email  message to provide an external style sheet to

User · Answer

This can be done using a custom template filter. Consider rendering your form this way:

<form action="/contact/" method="post">
  {{ form.non_field_errors }}
  <div class="fieldWrapper">
    {{ form.subject.errors }}
    {{ form.subject.label_tag }}
    {{ form.subject }}
    <span class="helptext">{{ form.subject.help_text }}</span>
  </div>
</form>

form.subject is an instance of BoundField which has the as_widget() method.

You can create a custom filter addclass in my_app/templatetags/myfilters.py:

from django import template

register = template.Library()

@register.filter(name='addclass')
def addclass(value, arg):
    return value.as_widget(attrs={'class': arg})

And then apply your filter:

{% load myfilters %}

<form action="/contact/" method="post">
  {{ form.non_field_errors }}
  <div class="fieldWrapper">
    {{ form.subject.errors }}
    {{ form.subject.label_tag }}
    {{ form.subject|addclass:'MyClass' }}
    <span class="helptext">{{ form.subject.help_text }}</span>
  </div>
</form>

form.subjects will then be rendered with the MyClass CSS class.

User · Answer

You could use this library  https   pypi python org pypi django-widget-tweaks  It allows you to do the following      load widget tweaks     lt  -- add 2 extra css classes to field element -- gt     form title add class  css class 1 css class 2

User · Answer

Taken from my answer to  How to markup form fields with  lt div class   39 field type  39  gt  in Django  class MyForm forms Form       myfield   forms CharField widget forms TextInput attrs   class     myfieldclass       or  class MyForm forms ModelForm       class Meta          model   MyModel      def   init   self   args    kwargs           super MyForm  self    init    args    kwargs          self fields  myfield   widget attrs update   class     myfieldclass      or  class MyForm forms ModelForm       class Meta          model   MyModel         widgets                  myfield   forms TextInput attrs   class    myfieldclass                 --- EDIT --- The above is the easiest change to make to original question s code that accomplishes what was asked  It also keeps you from repeating yourself if you reuse the form in other places  your classes or other attributes just work if you use the Django s as table as ul as p form methods   If you need full control for a completely custom rendering  this is clearly documented  -- EDIT 2 --- Added a newer way to specify widget and attrs for a ModelForm

User · Answer

I was playing around with this solution to maintain consistency throughout the app  def bootstrap django fields field klass  css class       class Wrapper field klass           def   init   self    kwargs               super     init     kwargs           def widget attrs self  widget               attrs   super   widget attrs widget              if not widget is hidden                  attrs  quot class quot     css class             return attrs      return Wrapper   MyAppCharField   bootstrap django fields forms CharField   quot form-control quot    Then you don t have to define your css classes on a form by form basis  just use your custom form field   It s also technically possible to redefine Django s forms classes on startup like so  forms CharField   bootstrap django fields forms CharField   quot form-control quot    Then you could set the styling globally even for apps not in your direct control  This seems pretty sketchy  so I am not sure if I can recommend this

User · Answer

Edit  Another  slightly better  way of doing what I m suggesting is answered here  Django form input field styling  All the above options are awesome  just thought I d throw in this one because it s different   If you want custom styling  classes  etc  on your forms  you can make an html input in your template that matches your form field  For a CharField  for example   default widget is TextInput   let s say you want a bootstrap-looking text input  You would do something like this     lt input type  text  class  form-control  name  form field name here  gt    And as long as you put the form field name matches the html name attribue   and the widget probably needs to match the input type as well  Django will run all the same validators on that field when you run validate or form is valid   and   Styling other things like labels  error messages  and help text don t require much workaround because you can do something like form field error as text and style them however you want  The actual fields are the ones that require some fiddling   I don t know if this is the best way  or the way I would recommend  but it is a way  and it might be right for someone   Here s a useful walkthrough of styling forms and it includes most of the answers listed on SO  like using the attr on the widgets and widget tweaks   https   simpleisbetterthancomplex com article 2017 08 19 how-to-render-django-form-manually html

User · Answer

Styling widget instances  If you want to make one widget instance look different from another  you will need to specify additional attributes at the time when the widget object is instantiated and assigned to a form field  and perhaps add some rules to your CSS files    https   docs djangoproject com en 2 2 ref forms widgets   To do this  you use the Widget attrs argument when creating the widget   class CommentForm forms Form       name   forms CharField widget forms TextInput attrs   class    special         url   forms URLField       comment   forms CharField widget forms TextInput attrs   size    40       You can also modify a widget in the form definition   class CommentForm forms Form       name   forms CharField       url   forms URLField       comment   forms CharField        name widget attrs update   class    special        comment widget attrs update size  40     Or if the field isn   t declared directly on the form  such as model form fields   you can use the Form fields attribute   class CommentForm forms ModelForm       def   init   self   args    kwargs           super     init    args    kwargs          self fields  name   widget attrs update   class    special            self fields  comment   widget attrs update size  40     Django will then include the extra attributes in the rendered output    gt  gt  gt  f   CommentForm auto id False   gt  gt  gt  f as table    lt tr gt  lt th gt Name  lt  th gt  lt td gt  lt input type  text  name  name  class  special  required gt  lt  td gt  lt  tr gt   lt tr gt  lt th gt Url  lt  th gt  lt td gt  lt input type  url  name  url  required gt  lt  td gt  lt  tr gt   lt tr gt  lt th gt Comment  lt  th gt  lt td gt  lt input type  text  name  comment  size  40  required gt  lt  td gt  lt  tr gt

User · Answer

For larger form instead of writing css classed for every field you could to this class UserRegistration forms ModelForm        list charfields     class Meta        model   User       fields     username    first name    last name    email    password    password2       def   init   self   args    kwargs         super UserRegistration  self    init    args    kwargs        for field in self fields           self fields field  widget attrs  class      form-control

User · Answer

You can do like this   class ContactForm forms Form       subject   forms CharField max length 100      subject widget attrs update   id     your id      Hope that works   Ignas

User · Answer

Per this blog post  you can add css classes to your fields using a custom template filter   from django import template register   template Library     register filter name  addcss   def addcss field  css       return field as widget attrs   class  css        Put this in your app s templatetags  folder and you can now do     field addcss  form-control

User · Answer

If you don t want to add any code to the form  as mentioned in the comments to  shadfc s Answer   it is certainly possible  here are two options   First  you just reference the fields individually in the HTML  rather than the entire form at once    lt form action    method  post  gt       lt ul class  contactList  gt           lt li id  subject  class  contact  gt    form subject    lt  li gt           lt li id  email  class  contact  gt    form email    lt  li gt           lt li id  message  class  contact  gt    form message    lt  li gt       lt  ul gt       lt input type  submit  value  Submit  gt   lt  form gt     Note that I also changed it to a unsorted list     Second  note in the docs on outputting forms as HTML  Django      The Field id  is generated by   prepending  id   to the Field name    The id attributes and  tags are   included in the output by default    All of your form fields already have a unique id  So you would reference id subject in your CSS file to style the subject field  I should note  this is how the form behaves when you take the default HTML  which requires just printing the form  not the individual fields    lt ul class  contactList  gt         form       Will auto-generate HTML with id subject  id email  email message         form as ul      might also work  haven t tested  lt  ul gt    See the previous link for other options when outputting forms  you can do tables  etc    Note - I realize this isn t the same as adding a class to each element  if you added a field to the Form  you d need to update the CSS also  - but it s easy enough to reference all of the fields by id in your CSS like this    id subject   id email   email message   color  red

User · Answer

There is a very easy to install and great tool made for Django that I use for styling and it can be used for every frontend framework like Bootstrap  Materialize  Foundation  etc  It is called widget-tweaks Documentation  Widget Tweaks   You can use it with Django s generic views Or with your own forms    from django import forms  class ContactForm forms Form       subject   forms CharField max length 100      email   forms EmailField required False      message   forms CharField widget forms Textarea    Instead of using default      form as p    or    form as ul      You can edit it your own way using the render field attribute that gives you a more html-like way of styling it like this example   template html     load widget tweaks      lt div class  container  gt      lt div class  col-md-4  gt           render field form subject class   form-control myCSSclass  placeholder  Enter your subject here         lt  div gt      lt div class  col-md-4  gt           render field form email type  email  class   myCSSclassX myCSSclass2         lt  div gt      lt div class  col-md-4  gt           render field form message class   myCSSclass  rows  4  cols  6  placeholder form message label        lt  div gt   lt  div gt    This library gives you the opportunity to have well separated yout front end from your backend

User · Answer

One solution is to use JavaScript to add the required CSS classes after the page is ready  For example  styling django form output with bootstrap classes  jQuery used for brevity     lt script type  text javascript  gt        document  ready function                 some django form id   find  input type  text    select  textarea   each function index  element                  element  addClass  form-control                         lt  script gt    This avoids the ugliness of mixing styling specifics with your business logic

User · Answer

You can do    lt form action    method  post  gt       lt table gt             for field in form             lt tr gt  lt td gt   field   lt  td gt  lt  tr gt             endfor         lt  table gt       lt input type  submit  value  Submit  gt   lt  form gt    Then you can add classes id s to for example the  lt td gt  tag  You can of course use any others tags you want  Check Working with Django forms as an example what is available for each field in the form    field   for example is just outputting the input tag  not the label and so on

User · Answer

Didn t see this one really    https   docs djangoproject com en 1 8 ref forms api  more-granular-output More granular output The as p    as ul   and as table   methods are simply shortcuts for lazy developers     they   re not the only way a form object can be displayed  class BoundField Used to display HTML or access attributes for a single field of a Form instance  The str    unicode on Python 2  method of this object displays the HTML for this field  To retrieve a single BoundField  use dictionary lookup syntax on your form using the field   s name as the key   gt  gt  gt  form   ContactForm    gt  gt  gt  print form  subject     lt input id  quot id subject quot  type  quot text quot  name  quot subject quot  maxlength  quot 100 quot    gt   To retrieve all BoundField objects  iterate the form   gt  gt  gt  form   ContactForm    gt  gt  gt  for boundfield in form  print boundfield   lt input id  quot id subject quot  type  quot text quot  name  quot subject quot  maxlength  quot 100 quot    gt   lt input type  quot text quot  name  quot message quot  id  quot id message quot    gt   lt input type  quot email quot  name  quot sender quot  id  quot id sender quot    gt   lt input type  quot checkbox quot  name  quot cc myself quot  id  quot id cc myself quot    gt   The field-specific output honors the form object   s auto id setting   gt  gt  gt  f   ContactForm auto id False   gt  gt  gt  print f  message     lt input type  quot text quot  name  quot message quot    gt   gt  gt  gt  f   ContactForm auto id  id  s    gt  gt  gt  print f  message     lt input type  quot text quot  name  quot message quot  id  quot id message quot    gt

User · Answer

Write your form like       class MyForm forms Form            name   forms CharField widget forms TextInput attr   class   name    label  Your Name            message   forms CharField widget forms Textarea attr   class   message     label  Your Message     In your HTML field do something like      for field in form           lt div class  row  gt           lt label for     field name    gt    field label   lt  label gt    field          lt  div gt     endfor      Then in your CSS write something like    name           you already have this class so create it s style form here       message           you already have this class so create it s style form here      label for  message             style for label        Hope this answer is worth a try  Note you must have written your views to render the HTML file that contains the form

User · Answer

You may not need to override your form class    init    because Django sets name  amp  id attributes in the HTML inputs  You can have CSS like this   form input name  subject         font-size  xx-large

User · Answer

In Django 1 10  possibly earlier as well  you can do it as follows   Model   class Todo models Model       todo name   models CharField max length 200      todo description   models CharField max length 200  default         todo created   models DateTimeField  date created       todo completed   models BooleanField default False       def   str   self           return self todo name   Form   class TodoUpdateForm forms ModelForm       class Meta          model   Todo         exclude     todo created   todo completed     Template    lt form action    method  post  gt    csrf token           form non field errors     lt div class  fieldWrapper  gt         form todo name errors         lt label for     form name id for label     gt Name  lt  label gt         form todo name     lt  div gt   lt div class  fieldWrapper  gt         form todo description errors         lt label for     form todo description id for label     gt Description lt  label gt         form todo description     lt  div gt       lt input type  submit  value  Update    gt   lt  form gt

[css] CSS styling in Django forms

Examples related to css

Examples related to django

Examples related to django-forms