django-crispy-forms bootstrap form example

forms.py

# -*- 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'),
        )
    )

index.html

{% extends 'base.html' %}
{% load crispy_forms_tags %}

{% block content %}
   {% crispy form %}
{% endblock %}

views.py

# -*- 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()})

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

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?

@sureshvv form-horizontal is from bootstrap I think

ImportError: No module named 'forms'

What to do?

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

Thanks.

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'),                                                                                                
    )                                                                                                                              
)  

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.

OP you saved my life by sharing this codes.

Thanks for this code its working perfectly

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']

@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?

What is in the base.html, please ?

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

@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

how can i put a bootstrap switch?