Apply CSS to Django Form Wizard

Question

I´m working with the Form Wizard which is alright but right now its not really pretty.

My Views.py is based on the docs:

class ContactWizard(SessionWizardView):
form_list = [DurationForm, ContactForm2]
def done(self, form_list, **kwargs):
    return render(self.request, 'done.html', {
        'form_data': [form.cleaned_data for form in form_list],
    })

My done.html contains:

{% extends "base.html" %}
{% block content %}
<h1> Done! </h1>
{% endblock %}

My forms are defined in forms.py:

from django import forms

class DurationForm(forms.Form):
     Duration_in_secounds = forms.IntegerField()

class FrequencyForm(forms.Form):
     Frequency_in_time_interval = forms.IntegerField()

Now i wonder how the forms even render because i never load them the way i used (for example with

{{form.as_p}}

Because whatever i change in my done.html doesnt affect the forms created with the wizard i have no idea how to add css to them.

Could any of you help me get whats going on here? (sorry if the question is stupid/ already asked - its quite late here and i couldn´t find anything for the last two hours)

dan-klasson · Accepted Answer · 2018-05-23 22:33:12Z

3

I think it doesn't matter it's a Form Wizard. You can just create a base class that you have DurationForm and ContactForm2 extend from. For example:

def __init__(self, *args, **kwargs):
    super(BaseFormClass, self).__init__(*args, **kwargs)

    # specific field
    self.fields['name'].widget.attrs['class'] = 'my_class'

    # all fields on form
    for field in self.fields:
         self.fields[field].widget.attrs['class'] = 'my_class'

Not tested.

answered May 23, 2018 at 22:33

dan-klasson

14.3k14 gold badges67 silver badges106 bronze badges

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

7 Comments

ItsMeTheBee Over a year ago

Thanks! Even though i abandoned the wizard i am using something similar to your solution for my form . Theres only one thing still missing: Adding the class in attrs worked for every form except the checkbox form. This might be because i need to specifiy a type in the html but adding this to the attrs didnt work out for me :/

forms.MultipleChoiceField(widget = forms.CheckboxSelectMultiple(attrs={'class':'form-group', 'type':'checkbox',}), choices = CHOICES_AGE)

Any idea what i´m missing? If not i will greate another question for this (googling didnt help until now :b)

dan-klasson Over a year ago

Maybe try adding in the attr in the MultipleChoiceField instead

ItsMeTheBee Over a year ago

then i get an unexpected argument error - i´ll comment the soution here too once i found it =)

dan-klasson Over a year ago

How are you calling it?

ItsMeTheBee Over a year ago

the form itself? with {{ form.as_p}} The error occurs when i try ` Target_Age = forms.MultipleChoiceField(widget = forms.CheckboxSelectMultiple(), choices = CHOICES_AGE, attrs={'class':'form-check', 'input_type':'checkbox',} ) `

|

user63053 · Accepted Answer · 2018-05-24 00:43:24Z

0

You should add load static to your template (html):

{% load staticfiles %}
<link href="{% static 'myapp/css/my.css' %}" rel="stylesheet">

This is where the css, scripts, etc. are loaded.

answered May 24, 2018 at 0:43

user63053

1

Collectives™ on Stack Overflow

Apply CSS to Django Form Wizard

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related