How do I add custom CSS to crispy forms?

Question

I'm trying to create a responsive form for my website with the help of crispy forms.I'm not using bootstrap and I want to add custom CSS to the crispy form to match my whole website.

HTML:

<form method='POST' action=''>{% csrf_token %}

            {{ form|crispy }}

                    <input type='submit' value='Sign Up' />



            </form>

using inspect element it shows:

            <form method='POST' action=''><input type='hidden' name='csrfmiddlewaretoken' value='GLJMxnnDz1MGNFC46pjoofSlo6JMCD1IXu7X3n7LsRbQfdS38SYHJMs9IAXddcck' />



<div id="div_id_full_name" class="form-group"> <label for="id_full_name" class="control-label ">
                Full name
            </label> <div class="controls "> <input class="textinput textInput form-control" id="id_full_name" maxlength="120" name="full_name" type="text" /> </div> </div> <div id="div_id_email" class="form-group"> <label for="id_email" class="control-label  requiredField">
                Email<span class="asteriskField">*</span> </label> <div class="controls "> <input class="emailinput form-control" id="id_email" maxlength="254" name="email" type="email" required /> </div> </div>


        <!--    <input class='btn btn-primary' type='submit' value='Sign Up' />-->
                        <input type='submit' value='Sign Up' />



            </form>

forms.py:

from django import forms

from .models import SignUp

class ContactForm(forms.Form):
    full_name = forms.CharField(required=False)
    email = forms.EmailField()
    message = forms.CharField()


class SignUpForm(forms.ModelForm):
    class Meta:
        model = SignUp
        fields = ['full_name', 'email']

models.py:

from __future__ import unicode_literals

# Create your models here.
from django.db import models

# Create your models here.
class SignUp(models.Model):
    email = models.EmailField()
    full_name = models.CharField(max_length=120, blank=True, null=True)
    timestamp = models.DateTimeField(auto_now_add=True, auto_now=False)
    updated = models.DateTimeField(auto_now_add=False, auto_now=True)

    def __unicode__(self): #Python 3.3 is __str__
        return self.email

binpy · Accepted Answer · 2017-02-27 17:59:00Z

7

As docs says, by default crispy forms using bootstrap, and also provides some template packs for bootstrap, bootstrap3, bootstrap4 and uni-form. see also about Overriding project templates

If you need to custom this crispy forms, you need to create a new custom template for your project, an example crispy_forms/templates/<foobar>/. you can checkout at this path of repository: https://github.com/django-crispy-forms/django-crispy-forms/tree/dev/crispy_forms/templates

But, previously crispy forms has templatetags to handle specific field. one of it is {{ form.field_name|as_crispy_field }}, this example below is output of it.

<div id="div_id_email" class="control-group">
  <label for="id_email" class="control-label">Email address</label>
  <div class="controls">
    <input class="form-control" id="id_email" maxlength="254" name="email" required="required" type="email" />
  </div>
</div>

Other options, you can handle it using specific html selectors/attributes inside your forms widget, such as html class, id, style, or else.

For example in your case;

class SignUpForm(forms.ModelForm):

    class Meta:
        model = SignUp
        fields = ['full_name', 'email']
        widgets = {
          'email': forms.EmailInput(attrs={'class': 'form-control custom-class'}),
        }

And then, if you render as {{ form.email|as_crispy_field }}, this should render the html;

<div id="div_id_email" class="control-group">
  <label for="id_email" class="control-label">Email address</label>
  <div class="controls">
    <input class="form-control custom-class" id="id_email" maxlength="254" name="email" required="required" type="email" />
  </div>
</div>

Crispy forms also provides simply configuration inside settings.py, Django fields generate default classes, crispy-forms handles these and adds other classes for compatibility with CSS frameworks. For example a CharField generates an <input class="textinput", for more...

CRISPY_CLASS_CONVERTERS = {
    'textinput': "form-control cst__radius",
    'urlinput': "form-control cst__radius",
    'numberinput': "form-control cst__radius",
    'emailinput': "form-control cst__radius",
    'dateinput': "form-control cst__radius",
    'textarea': "form-control cst__radius",
    'passwordinput': "form-control cst__radius",
    'select': "form-control cst__radius",
}

edited Feb 27, 2017 at 17:59

answered Feb 27, 2017 at 17:44

binpy

4,2343 gold badges20 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

uitwaa Over a year ago

the 'custom-class' ahould be in my main "style.css" file?

binpy Over a year ago

yes, you can custom your css style inside your style.css or wherever you need. example .custom-class {font-size: 12px}, but makesure the source of bootstrap is put before source of style.css

uitwaa Over a year ago

As I said, I'm not using bootstrap :/

binpy Over a year ago

But, if you need more complex stuff and confused, I suggest you to don't use it... I'll give you an example from my currently project pastebin.com/c0nc9GAc

binpy Over a year ago

yeah, without using crispy form. just custom the form as I need. you can read this docs docs.djangoproject.com/en/dev/topics/forms/…

|

user4759415 · Accepted Answer · 2017-02-27 17:27:31Z

2

You'd have to write your own CSS that would target each element of the Crispy form that you wanted to style.

Use the inspect element and find the ID/class of the element you want to work with. Write your styles in the inspect element window and once you're happy with it copy the code to a CSS file that will eventually be your "form override" file that will bring it's look more in line with the rest of your site.

answered Feb 27, 2017 at 17:27

user4759415

Comments

Adonis Gaitatzis · Accepted Answer · 2021-09-28 10:11:32Z

Crispy forms provides a framework for this.

First of all, you can tell crispy_forms to use 'bootstrap4' templates:

project/settings.py

# settings
CRISPY_TEMPLATE_PACK = 'bootstrap4'
# other settings

That will render your buttons and inputs according to the Bootstrap 4 form templates

If you still want to apply styles to a specific input or button, you can use the Crispy FormHelper class and Layouts, which are, by the way, amazing.

In particular, note the .css_class='...' parameter, which renders into HTML as class="..."

forms.py

from crispy_forms.helper import FormHelper
from crispy_forms.layout import (
    Layout,
    Field,
    Submit,
)


class SignUpForm(forms.ModelForm):

    class Meta:
        model = SignUp
        fields = ['full_name', 'email']
        widgets = {
          'email': forms.EmailInput(attrs={'class': 'form-control custom-class'}),
        }

    def __init__(self, *args, **kwargs):
        self.helper = FormHelper(self)
        self.helper.layout = Layout(
            'full_name',
            Field('email', css_class='custom-class')  # form-control will be provided by bootstrap templates
            Submit('submit', 'Sign Up', css_class='btn-primary')  # define your signup button here
        )

Next you can render your entire form using {% crispy form %}. The form tag and csrf_token will be created by default:

signup.html

{% load crispy_forms %}
{% crispy form %}

Result

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<form action="" method="POST">
    <input type='hidden' name='csrfmiddlewaretoken' value='GLJMxnnDz1MGNFC46pjoofSlo6JMCD1IXu7X3n7LsRbQfdS38SYHJMs9IAXddcck' />
    
  <div class="form-group">
    <label for="id_full_name">Full Name</label>
    <input type="text" class="form-control" id="id_full_name">
  </div>

  <div class="form-group">
    <label for="id_email">Email <span class="required">*</span></label>
    <input type="email" class="form-control custom-class" id="id_email" required>
  </div>

  <button type="submit" class="btn btn-primary">Sign Up</button>

</form>

k33da_the_bug · Accepted Answer · 2019-08-25 06:15:09Z

0

If you are targeting specifically the exact fields css (ex: input field class i.e <input class="your_custom_class" />) then try following snippets ( Without modifying Crispy helper):

Using Model Form:

class YourForm(ModelForm):
     def __init__(self, *args, **kwargs):
         self.fields['your_field'].widget.attrs['class']='your_custom_class'

Using Form:

class YourForm(forms.ModelForm):
     class Meta:
         model = YourModel
         fields = ['field1', 'field2']
         widgets = {
         'field1': forms.TextInput(attrs={'class': 'your_custom_class'}),
         }

answered Aug 25, 2019 at 6:15

k33da_the_bug

8208 silver badges17 bronze badges

Comments

Haider Ali J Al-Rustem · Accepted Answer · 2021-01-25 00:33:42Z

0

Write CSS to target the rendered form elements (inspect these elements in chrome). Give the element a custom class like "crispy-form". For example, I managed to hide the label for an input text by:

HTML:

<form class="crispy-form" method="POST" enctype="multipart/form-data">
                                 {% csrf_token %}
</form>

CSS:

.crispy-form label {
    display: none;
}

answered Jan 25, 2021 at 0:33

Haider Ali J Al-Rustem

5516 silver badges3 bronze badges

Collectives™ on Stack Overflow

How do I add custom CSS to crispy forms?

5 Answers 5

8 Comments

Comments

Result

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

8 Comments

Comments

Result

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related