Skip to content

Instantly share code, notes, and snippets.

@maraujop
Created February 15, 2012 19:04
Show Gist options
  • Save maraujop/1838193 to your computer and use it in GitHub Desktop.
Save maraujop/1838193 to your computer and use it in GitHub Desktop.
django-crispy-forms bootstrap form example
# -*- coding: utf-8 -*-
from django import forms
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Div, Submit, HTML, Button, Row, Field
from crispy_forms.bootstrap import AppendedText, PrependedText, FormActions
class MessageForm(forms.Form):
text_input = forms.CharField()
textarea = forms.CharField(
widget = forms.Textarea(),
)
radio_buttons = forms.ChoiceField(
choices = (
('option_one', "Option one is this and that be sure to include why it's great"),
('option_two', "Option two can is something else and selecting it will deselect option one")
),
widget = forms.RadioSelect,
initial = 'option_two',
)
checkboxes = forms.MultipleChoiceField(
choices = (
('option_one', "Option one is this and that be sure to include why it's great"),
('option_two', 'Option two can also be checked and included in form results'),
('option_three', 'Option three can yes, you guessed it also be checked and included in form results')
),
initial = 'option_one',
widget = forms.CheckboxSelectMultiple,
help_text = "<strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.",
)
appended_text = forms.CharField(
help_text = "Here's more help text"
)
prepended_text = forms.CharField()
prepended_text_two = forms.CharField()
multicolon_select = forms.MultipleChoiceField(
choices = (('1', '1'), ('2', '2'), ('3', '3'), ('4', '4'), ('5', '5')),
)
# Uni-form
helper = FormHelper()
helper.form_class = 'form-horizontal'
helper.layout = Layout(
Field('text_input', css_class='input-xlarge'),
Field('textarea', rows="3", css_class='input-xlarge'),
'radio_buttons',
Field('checkboxes', style="background: #FAFAFA; padding: 10px;"),
AppendedText('appended_text', '.00'),
PrependedText('prepended_text', '<input type="checkbox" checked="checked" value="" id="" name="">', active=True),
PrependedText('prepended_text_two', '@'),
'multicolon_select',
FormActions(
Submit('save_changes', 'Save changes', css_class="btn-primary"),
Submit('cancel', 'Cancel'),
)
)
{% extends 'base.html' %}
{% load crispy_forms_tags %}
{% block content %}
{% crispy form %}
{% endblock %}
# -*- coding: utf-8 -*-
from django.shortcuts import render
from forms import MessageForm
def index(request):
# This view is missing all form handling logic for simplicity of the example
return render(request, 'index.html', {'form': MessageForm()})
@adrienbrunet
Copy link

@flyingfoxlee Have you tried replace container by container-fluid?

Copy link

ghost commented Apr 30, 2014

This is cool, thanks so much!

@zinonas
Copy link

zinonas commented Aug 27, 2014

Which is that 'base.html'?

What is its path?

Thank you in advance!

@daniel-milinski
Copy link

Dosen't work

@daniel-milinski
Copy link

init() got an unexpected keyword argument 'instance' ERROR

@bedros
Copy link

bedros commented Jul 25, 2015

thanks for the example, it helped me solve some issues with my form, but I still got couple more.

is there a way to use chosen with AppendedText like

This works

AppendedText('user','a link to add a new user')

but this one does not work

AppendedText(Field('user', css_class='chosen'),'a link to add a new user')

the form displays chosen JS autofill but it does not show the link

@sureshvv
Copy link

  1. What is the role of helper.class = 'form-horizontal'?
  2. My form does not appear like a 2 column table, as in this example. What am I missing?

@wtfrank
Copy link

wtfrank commented Jun 11, 2016

@sureshvv form-horizontal is from bootstrap I think

@saiftheboss7
Copy link

ImportError: No module named 'forms'

What to do?

@mihirsevak
Copy link

How can i display radio buttons horizontally instead of vertically?? Same for the checkboxes. Can you show syntax for that in helper class?

Thanks.

@mihirsevak
Copy link

Guys, I tried using inline as explained in documentation but it had no effect on the outcome. Below is my code. can someone help me identify what I am doing wrong?? Thanks.

helper = FormHelper()
helper.form_class = 'form-horizontal'                                                                                              
helper.layout = Layout(
    Field('text_input', css_class='input-xlarge'),
    Field('textarea', rows="3", css_class='input-xlarge'),                                                                         
    'radio_buttons',
    InlineRadios('radio_buttons'),
    Field('checkboxes', style="background: #FAFAFA; padding: 10px;"),                                                              
    InlineCheckboxes('checkboxes'),
    AppendedText('appended_text', '.00'),
    PrependedText('prepended_text', '<input type="checkbox" checked="checked" value="" id="" name="">', active=True),              
    PrependedText('prepended_text_two', '@'),                                                                                      
    'multicolon_select',                                                                                                           
    FormActions(
        Submit('save_changes', 'Save changes', css_class="btn-primary"),                                                           
        Submit('cancel', 'Cancel'),                                                                                                
    )                                                                                                                              
)  

@Nabot
Copy link

Nabot commented May 27, 2017

Hi.. Nice tutorial. Is there a way to output the submitted results on the same page when one clicks save changes, in form of a table?

Thank you in advance.

@Kiodaddy
Copy link

OP you saved my life by sharing this codes.

@GraniteConsultingReviews

Thanks for this code its working perfectly

@arindam31
Copy link

What if we are using a modelForm ? Like this below:

class BlogPostForm(forms.ModelForm):
    class Meta:
        model = models.Post
        fields = ['title', 'text', 'tags', 'author', 'slug']

@farhatnawaz
Copy link

@arindam31 I have the same question. i have got the form fields but can't seem to find a way to put text in front of the fields, for instance "Name:" in front of the text field to fill in the name. Any help guys?

@aichaoxy
Copy link

aichaoxy commented Jan 9, 2020

What is in the base.html, please ?

@rachuri333
Copy link

rachuri333 commented Apr 24, 2020

@arindam31 I also had the same question, how can i work on it? can any any one help us

@arindam31
Copy link

arindam31 commented Apr 25, 2020

@rachuri333 I don't remember what I was trying to do back then . But this is what my form looks like.


class BlogPostForm(forms.ModelForm):
    class Meta:
        model = models.Post
        fields = ['title', 'text', 'tags', 'author', 'slug']
    helper = FormHelper()
    helper.form_class = 'form-group'
    helper.layout = Layout(
        Field('title', css_class='form-control mt-2 mb-3'),
        Field('text', rows="3", css_class='form-control mb-3'),
        Field('author', css_class='form-control mb-3'),
        Field('tags', css_class='form-control mb-3'),
        Field('slug', css_class='form-control'),
    )

You can browse my project to find the complete code.: https://github.com/arindam31/Django_TravelBlog

@Dsr2004
Copy link

Dsr2004 commented Feb 23, 2022

how can i put a bootstrap switch?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment