Django application to add 'django-crispy-forms' layout objects for the GOV.UK Design System.
Project description
A GOV.UK Design System template pack for django-crispy-forms, for simple and powerful form generation which is compliant with GDS usability and accessibility guidelines.
Requires Django 3.2 or later and django-crispy-forms 1.9 or later.
This template pack supports govuk-frontend 3.5 or later.
Quickstart
This is a minimal howto without options or details - see the crispy-forms-gds documentation for full instructions for installation and usage.
Install using pip:
pip install crispy-forms-gds
Add to installed apps, with settings to tell django-crispy-forms to use this theme:
INSTALLED_APPS = [ ... 'crispy_forms', 'crispy_forms_gds', ] CRISPY_ALLOWED_TEMPLATE_PACKS = ["gds"] CRISPY_TEMPLATE_PACK = "gds"
Build a regular crispy form using layout objects from crispy_forms_gds:
from django import forms from crispy_forms_gds.helper import FormHelper from crispy_forms_gds.layout import Submit class SimpleForm(forms.Form): name = forms.CharField( label="Name", help_text="Your full name.", widget=forms.TextInput(), error_messages={ "required": "Enter your name as it appears on your passport" } ) def __init__(self, *args, **kwargs): super().__init__(*args, **kwargs) self.helper = FormHelper() self.helper.add_input(Submit("submit", "Submit"))
Render the form in your templates as normal:
{% load crispy_forms_tags %} {% crispy form %}
Examples
The template pack supports all the basic components listed in the GOV.UK Design System. Here are some examples taken from the demo site included in the project.
Accordion
Layout components, such as the Accordion let you generate complex forms with multiple sections:
from django import forms from crispy_forms_gds.helper import FormHelper from crispy_forms_gds.layout import HTML, Accordion, AccordionSection, Layout class AccordionForm(forms.Form): def __init__(self, *args, **kwargs): super().__init__(*args, **kwargs) self.helper = FormHelper() self.helper.layout = Layout( Accordion( AccordionSection( "Writing well for the web", HTML.p("This is the content for Writing well for the web."), summary="An introduction to clear and concise writing.", ), AccordionSection( "Writing well for specialists", HTML.p("This is the content for Writing well for specialists."), ), AccordionSection( "Know your audience", HTML.p("This is the content for Know your audience."), ), AccordionSection( "How people read", HTML.p("This is the content for How people read."), ), ) )
Validation Errors
Forms fully support the Error Message and Error Summary components with no extra effort on your part:
from django import forms from crispy_forms_gds.helper import FormHelper from crispy_forms_gds.layout import ( Button, Field, Fieldset, Fixed, Fluid, Layout, Size, ) class UserForm(forms.Form): name = forms.CharField( label="Your name", help_text="Enter your name as it appears on your passport.", ) email = forms.CharField( label="Email", help_text="Enter your email address.", widget=forms.EmailInput, ) phone = forms.CharField( label="Phone", help_text="Enter your home or mobile telephone number.", ) def __init__(self, *args, **kwargs): super().__init__(*args, **kwargs) self.helper = FormHelper() self.helper.label_size = Size.SMALL self.helper.layout = Layout( Fieldset( Field.text("name"), Field.text("email", field_width=Fluid.TWO_THIRDS), Field.text("phone", field_width=Fixed.TEN), ), Button("submit", "Submit"), )
Demo
If you checkout the code from the repository, there is a Django site you can run to see the forms in action:
git clone git@github.com:wildfish/crispy-forms-gds.git cd crispy-forms-gds
First, create a virtual environment:
python3 -m venv venv . venv/bin/activate pip3 install wheel pip3 install -r requirements/dev.txt
Next, install all the dependencies and build the javascript and css assets:
cd demo/frontend nvm use npm install npm run dev
Now, setup and run Django:
cd .. python3 manage.py migrate python3 manage.py runserver
Open http://localhost:8000/ in your browser to see forms built with Django Crispy Forms styled using the GOV.UK Design System.
Resources
Read the documentation on Read the docs
Download the PyPi package
Learn more about Django Crispy Forms
Project details
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Hashes for crispy_forms_gds-0.3.1-py2.py3-none-any.whl
Algorithm | Hash digest | |
---|---|---|
SHA256 | ffa2ffe80a41a112475260220a2247d941c7f1c3aff7798c3532cd9d8020e018 |
|
MD5 | 3f92ddbcc88a809bd595ecc012165a70 |
|
BLAKE2b-256 | 485418c2b51a3fc5ce7836c7c84d5ebf5630c1fb6b7826a967e05c075368fe83 |