Adding bootstrap or sylilng to django built in forms

Question

I just started my first app with django. I have built forms previously with bootstrap and custom styling. Now i came to know about django built-in forms with models. i have written the code for this but found that there is not styling and it's look so ugly. i want to add my custom styling to this form how can i do this. here is my code.

model.py

class Message(models.Model):
    MessageID = models.AutoField(verbose_name='Message ID',primary_key=True)
    MessageSubject = models.CharField(verbose_name='Subject',max_length=255,null=True,blank=True)
    MessageContent = models.TextField(verbose_name='Content',null=True,blank=True)
    MessageType = models.CharField(verbose_name='Message Type',max_length=255,default='Email',null=True,blank=True)

forms.py

from django import forms
from django.forms import ModelForm
from Apps.SendMessage.models import Message

class Message_form(ModelForm):
    class Meta:
        model = Message

views.py

def add_message(request):
    message_form = {'message_form': Message_form}
    print request.POST.get('Subject')
    return render_to_response('sendmessage_form.html', message_form,  context_instance=RequestContext(request))

and sendmessage_form.html

{% extends "base.html" %}

{% block Content %}

<div class="container">
  <!-- Contacts -->
  <div id="contacts">
    <div class="row">
      <!-- Alignment -->
      <div class="col-sm-offset-3 col-sm-4">
        <!-- Form itself -->
        <form name="sentMessage" action="" method="POST" class="well" id="contactForm"  novalidate>
          {% csrf_token %}
          {{ message_form }}

          <button type="submit" class="btn btn-primary btn-sm pull-right">Send</button><br />
        </form>
      </div>
    </div>
  </div>
</div>



{% endblock %}

NBajanca · Accepted Answer · 2016-11-28 22:42:52Z

You're looking for Widgets!

From the documentation:

from django import forms

class CommentForm(forms.Form):
    name = forms.CharField()
    url = forms.URLField()
    comment = forms.CharField(widget=forms.Textarea)

In your example:

You're using Bootstrap and therefore a simple css class (form-control) in each field will make it look great:

class Message_form(ModelForm):
    class Meta:
        model = Message
        fields = ['MessageSubject', 'MessageContent', 'MessageType']
        widgets = {'MessageSubject': forms.TextInput(attrs={'class': 'form-control'}),
                   'MessageContent': forms.Textarea(attrs={'class': 'form-control'}),
                   'MessageType': forms.TextInput(attrs={'class': 'form-control'}),}

Another thing, you don't need to explicit define MessageID. All Django models have a primary key like the one you defined (check the docs).

catavaran · Accepted Answer · 2014-12-26 11:29:52Z

0

Use Django Bootstrap3 app. It provides form fields and template tags for displaying horizontal and vertical bootstrap forms:

{% load bootstrap3 %}

<form action="." method="post" class="form">
    {% csrf_token %}
    {% bootstrap_form form %}
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

answered Dec 26, 2014 at 11:29

catavaran

45.7k8 gold badges104 silver badges89 bronze badges

Comments

nima · Accepted Answer · 2014-12-26 11:50:33Z

0

I've been using crispy_forms and it's working very well with bootstrap.

pip install django-crispy-forms

In your template:

{% load crispy_forms_tags %}
<form method="POST">
    {% csrf_token %}
    {{ form|crispy }}
</form>

answered Dec 26, 2014 at 11:50

nima

6,7535 gold badges47 silver badges59 bronze badges

Comments

bummi · Accepted Answer · 2015-07-15 11:17:25Z

0

In template:

{{ form|as_p}}

in forms.py:

select = forms.CharField(widget=forms.Select(choices=select_choices, attrs={'class ':'form-control'}))

name = forms.CharField(widget=forms.TextInput(attrs={'class ':'form-control'}))

edited Jul 15, 2015 at 11:17

bummi

27.4k14 gold badges67 silver badges105 bronze badges

answered Jul 15, 2015 at 11:06

Nidhi Barthwal

11 bronze badge

Collectives™ on Stack Overflow

Adding bootstrap or sylilng to django built in forms

4 Answers 4

You're looking for Widgets!

From the documentation:

In your example:

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

You're looking for Widgets!

From the documentation:

In your example:

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related