Skip to content
Examples repository for newforms / React
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


Examples repository for newforms.

All Default Fields (source)

A basic form with as many of the default newforms fields and widgets as possible, showing a range of the options supported by the fields.

This example also demonstrates:

  • overriding the default render() method
  • implementing custom rendering using BoundFields and JSX.

Custom Form Layout (source)

This example shows how you could write a custom, reusable layout for laying out form fields in grids based on a specification like this:

  layout: [
    [ 'name'      ]
  , [ 'theme'     ]
  , [ 'startDate' , 'releaseDate' ]
  , [ 'state'     , 'resources'   ]
  , [ 'project'   ]
  , [ 'estimate'  ]
  , [ 'notes'     ]
, fillerCssClass: 'empty'
, topErrorCssClass: 'top-errors'

This is backed up with a base FormLayout object and a new base LayoutForm which uses it - these could serve as the basis for any kind of reusable custom layout you like with BoundFields and JSX.

It also has examples of:

  • using a form's constructor to implement dynamic choices.
  • full-form cleaning by implementing a clean() method.
  • a standard pattern for using a newforms Forn within a React component, holding the form as state.

Bootstrap Dynamic Contact Form (source)

An example of implementing a custom layout using Bootstrap and using some React state to dynamically control which fields are displayed.

It also has examples of:

  • extending a RadioFieldRenderer to customise its output.
  • implementing a clean<FieldName>() function for per-field validation logic.

"Add Another" with FormSets (source)

An example of implementing (multiple) forms with "Add Another" functionality simply by incrementing a FormSet's extra property.

This example also shows:

  • using prefix to have multiple instances of the same FormSet on a page without id/name conflicts.
  • validating and getting cleanedData out of multiple FormSets.
  • reusing a component for common contact fields.
  • implementing a Bootstrap 3 form layout using a form.boundFieldsObj() and a custom field rendering function.

Examples elsewhere

Isomorphic Lab (source)

Uses the same Form on the client and server for pre-rendering and progressive enhancement.

Also reuses the same Form for API validation.

Dinner Time! (source)

Uses a FormSet to implement a list of forms which can be added to and deleted from.

Uses BoundField and Form methods to highlight when fields become required or their valid/invalid status changes.

You can’t perform that action at this time.