Question on creating a contact form app using bootstrap template

136 views
Skip to first unread message

Kim

unread,
Aug 18, 2014, 3:13:28 AM8/18/14
to django...@googlegroups.com
Hi,

I'm learning python/django and am building my personal page using this template (http://startbootstrap.com/templates/agency/). 

Since it already has a contact form, I would like to integrate django form app on that to actually work. 

I was looking at the django doc (https://docs.djangoproject.com/en/dev/topics/forms/) but I wasn't sure how to structure the system. 

Could anyone suggest me how to integrate the backend system into the template?

I would appreciate very much if you could give me sample code examples!

Thanks,
Kim

Kim

unread,
Aug 18, 2014, 9:20:23 PM8/18/14
to django...@googlegroups.com
Anyone? 

2014年8月18日月曜日 16時13分28秒 UTC+9 Kim:

Collin Anderson

unread,
Aug 18, 2014, 9:42:19 PM8/18/14
to django...@googlegroups.com
I recommend making the same contact form in django first, then merge the two. Your starter template only makes the form look good, it doesn't provide much functionality.

Kim

unread,
Aug 19, 2014, 3:36:55 AM8/19/14
to django...@googlegroups.com
Thank you for the advice, Collin! 
However, If I have this HTML below, where should I put {{ form.[name] }}?

                             <form name="sentMessage" id="contactForm" novalidate>
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="Your Name *" id="name" required data-validation-required-message="Please enter your name.">
                                    <p class="help-block text-danger"></p>
                                </div>
                                <button type="submit" class="btn btn-xl">Send Message</button>
                             </form>

2014年8月19日火曜日 10時42分19秒 UTC+9 Collin Anderson:

Martin Spasov

unread,
Aug 19, 2014, 6:15:32 AM8/19/14
to django...@googlegroups.com
Maybe you could copy the classes and id's from the template and put them in your form like this :

class  SomeForm(forms.Form):
    name=forms.CharField(attrs={'class':'form-control', 'id':'name'})
    message=forms.CharField(widget=forms.TextInput(attrs={'class':'the class name thats on the templates form for the text input'})

And then pass the SomeForm to the view as some context variable, for example 'form'.
In your template :
                             <form name="sentMessage" id="contactForm" novalidate>
                                <div class="form-group">
                                   {%for field in form%}
                                       {{field.label}} {{field}}
                                   {%endfor%}
                                <button type="submit" class="btn btn-xl">Send Message</button>
                             </form>

This is just advice from beginner to beginner and if there is an easier way please correct me! If you choose this way Kim and you don't understand something please ask!

Mario Gudelj

unread,
Aug 19, 2014, 7:00:08 AM8/19/14
to django...@googlegroups.com
Some other options:

- Install https://github.com/dyve/django-bootstrap-toolkit and use {{ form|as_bootstrap }}. See the docs for more options.

http://django-crispy-forms.readthedocs.org/en/latest/ Crispy Forms is amazing BTW (by the way)

- Render your labels with {{form.field_name.label}} and fields with {{form.field_name}} and errors with {{form.field_name.errors}} inside that boostrap markup. You'll have to do this individually for every field though. As for the attributes, such as placeholder, classes and data attributes, you have to pass the to the widget class inside attr={}

Cheers,

M





--
You received this message because you are subscribed to the Google Groups "Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to django-users...@googlegroups.com.
To post to this group, send email to django...@googlegroups.com.
Visit this group at http://groups.google.com/group/django-users.
To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/c25c646e-bbc2-44c5-a4d4-fe36296c9b88%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Reply all
Reply to author
Forward
0 new messages