how to apply css on form in django

Question

I'm using form of django in my sign up page and i want to apply css on it. This is the sign up html :

<div class="login-space">
  <div class="sign-up-form">
    <form method="POST" class="register-form" action="" id="register-form">
      {% csrf_token %}
      <div class="group">{{form.username}}</div>
      <div class="group">{{form.email}}</div>
      <div class="group">{{form.password1}}</div>
      <div class="group">{{form.password2}}</div>
      <div class="group">{{form.country}}</div>
      <div class="group">{{form.age}}</div>
      <div class="group">{{form.preferences}}</div>
      <div class="group">
        <input
          type="submit"
          name="signup"
          class="button"
          id="signup"
          class="form-submit"
          value="Register"
        />
      </div>
      <div class="foot">
        <a href="{% url 'login' %}" class="signup-image-link"
          >I am already member</a
        >
      </div>
    </form>
  </div>
</div>

So how can I apply css on the fields( username, email ....). Can someone help please? Thank you so much.

Does this answer your question? [CSS styling in Django forms](https://stackoverflow.com/questions/5827590/css-styling-in-django-forms) — Lomtrur, Aug 12 '20 at 13:11

score 0 · Answer 1 · answered Aug 12 '20 at 15:18

0

I faced the same problem myself.I recommend you inspect the form in your browser and find the input types and use those input types to style them in css.

answered Aug 12 '20 at 15:18

Saurav Thakur

1

score 0 · Answer 2 · answered Jan 08 '21 at 15:33

It can do very easy with Django Forms. The only thing you need to Apply Correct CSS Class as an Attribute in your Forms.py. I have given below some examples.Edit as per your Form requirements.

**#File :forms.py**
    from django import forms
    from django.contrib.auth.forms import UserCreationForm, 
    from proApp.models import CustomUser
    from django.contrib.auth import get_user_model
    
    class CustomUserCreationForm(UserCreationForm):
        class Meta(UserCreationForm):
            model = get_user_model()
            fields = ['first_name', 'username', 'email', 'mobile', 'sponsorId', 'address', 'zipCode', 'country',
                      ' 'user_doc', 'last_name', 'password1', 'password2']
            widgets = {
                'first_name': forms.TextInput(
                    attrs={'class': 'form-control', 'placeholder': 'First Name', 'required': 'required'}),
                'last_name': forms.TextInput(
                    attrs={'class': 'form-control', 'placeholder': 'Last Name', 'required': 'required'}),
                'username': forms.TextInput(
                    attrs={'class': 'form-control', 'placeholder': 'Trading Acc No: (For Login)', 'required': 'required'}),
                'password1': forms.TextInput(
                    attrs={'class': 'form-control', 'placeholder': 'Password', 'required': 'required'}),
                'password2': forms.TextInput(
                    attrs={'class': 'form-control', 'placeholder': 'Confirm Password', 'required': 'required'}),
                'mobile': forms.TextInput(attrs={'class': 'form-control', 'placeholder': 'Mobile', 'required': 'required'}),
                'email': forms.TextInput(attrs={'class': 'form-control', 'placeholder': 'Email', 'required': 'required'}),
                'address': forms.TextInput(attrs={'class': 'form-control', 'placeholder': 'Address'}),
 'user_doc': forms.FileInput(attrs={'class': 'form-control-file',}),
            }

and in the HTML file you can call each fields like the ample.

# File : signup.html

       <div class="form-group">
                <label style="float: left; margin-bottom: 10px;color: black;">{{form.first_name.label}}</label> {{form.first_name}} {{form.last_name}}
            </div>
            <div class="form-group">
                <label style="float: left;
         margin-bottom: 10px;color: black;"> User ID:</label> {{form.username}}
            </div>
            <div class="form-group">
                <label style="float: left;
         margin-bottom: 10px;color: black;"> Password:</label> {{form.password1}}
            </div>

And also You can check for Validation Error Messages in HTML page like this

 {% if form.errors %} 
{% for field in form %} {% for error in field.errors %}
                <div class="alert alert-danger">
                    <strong>{{field.label}} : {{ error|escape }}</strong>
                </div>
        {% endfor %}

how to apply css on form in django

2 Answers2