GithubHelp home page GithubHelp logo

mysociety / crispy-forms-gds Goto Github PK

View Code? Open in Web Editor NEW

This project forked from wildfish/crispy-forms-gds

0.0 2.0 0.0 612 KB

Django Crispy Forms template pack for the Gov.UK Design System

License: BSD 3-Clause "New" or "Revised" License

Makefile 2.18% Python 57.74% HTML 40.09%

crispy-forms-gds's Introduction

Crispy Forms GDS

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.

image

image

image

image

Requires Django 2.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 TextInputForm(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 %}

Open the page in your browser:

image

Features

The template pack supports all the basic components listed in the GOV.UK Design System:

image

Demo

If you checkout the code from the repository, there is a Django site you can run to see the forms in action. You will need to install nvm first (to manage node versions), then build and run the demo with:

make serve

Further reading

crispy-forms-gds's People

Contributors

stuartmackay avatar radiac avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.