CODEWITHSUNDEEP
pythoncssdjangotwitter-bootstrap
Muhammad Taqi
Muhammad Taqi

Reputation: 5424

Adding bootstrap or sylilng to django built in forms

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 %}

Upvotes: 0

Views: 470

Answers (4)

NBajanca
NBajanca

Reputation: 3730

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).

Upvotes: 1

Nidhi Barthwal
Nidhi Barthwal

Reputation: 1

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

Upvotes: 0

nima
nima

Reputation: 6733

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>

Upvotes: 0

catavaran
catavaran

Reputation: 45595

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>

Upvotes: 0

Related Questions