django-form-component

django-form is a Web Component wrapper for Django Forms

django-form uses js fetch to submit the forms to your api endpoint of choice instead of the traditional django forms functionality of submitting the entire page.

This allows you have the benefits of modern responsive web pages but keep the dependency and security of Django forms.

Install

npm install django-form-component

Usage

index.js

import "django-form-component";

index.html

<django-form
  action="api/send/"
  method="post"
  button="send"
  success-message="success"
>
  {{ send_form.as_p }}
</django-form>

Attributes

action

the url/api you are sending the form to

method

default - post

the request type you'd such as post get put

button

default - Add

the text that will be on the submit button

success-message

default - Saved

the text shown on successful form submission

Extending

Styling

The built in relevant style tags are as follow:

• .django-form__field-error
• django-form::part(django-form)
• django-form::part(django-form__submit-button)
• django-form::part(django-form__success-message)
• django-form::part(django-form__fallback-errors)

Note that elements that are in the slot use classes and ones in the shadowDom have ::part attributes.

If want to extend and add styling to the form, you can use lit-element to add a styles method.

import { css } from "lit-element";
import { DjangoForm } from "django-form-component";

export class ReviewForm extends DjangoForm {
  static get styles() {
    return css`
      slotted(p) {
        color: red;
      }
      form {
        display: flex;
      }
    `;
  }
}

customElements.define("review-form", ReviewForm);

This component also supports ::part, so you can do something like this in your .css file:

.django-form__field-error {
  color: red;
}

django-form::part(django-form__submit-button) {
  background-color: aquamarine;
}

Response handling

Say your backend sends back some data on success and you want to do something with that. You can override the sendForm method to get the response of which you can do with what you want

import { DjangoForm } from "django-form-component";

export class ReviewForm extends DjangoForm {
  sendForm() {
    let res = super.sendForm();
    alert(`Backend says: ${res.data}`);
  }
}

customElements.define("review-form", ReviewForm);