Create a custom html template using forms in Django

Question

I've been going over the docs and some StackOverflow examples but I'm still having a little trouble. In Django I created a form, the view renders it and I have it displayed as form.as_p in the HTML template. This works perfectly, but I would like to be able to customize my HTML template instead of having it displayed as form.as_p. Any examples on how to do so?

So far I have the following.

View:

@login_required
def register(request):

    info = Content.objects.get(id=request.user.id)

    if request.method == 'POST':
        form = UploadFileForm(request.POST, request.FILES, instance=info)

        if form.is_valid():
            info = form.save(commit=False)
            info.save()
            return HttpResponseRedirect('/portal/register')
    else:
        form = UploadFileForm(instance=info)

        return render(request, 'portal/register.html', {'form': form, 'gallery': info})

Form:

class UploadFileForm(ModelForm):

    logo = forms.ImageField(required=False)
    image1 = forms.ImageField(required=False)
    terms = forms.CharField(required=False)

    class Meta:
        model = Content
        fields = ['user', 'logo', 'image1', 'terms']

Model:

class Content(models.Model):
    user = models.ForeignKey(User)
    logo = models.ImageField(upload_to=content_file_name, null=True, blank=True)
    image1 = models.ImageField(upload_to=content_file_name, null=True, blank=True)
    terms = models.CharField(max_length="256", blank=True)

    def __unicode__(self):
        return self.title

HTML Template:

<form method="POST" action="" enctype="multipart/form-data">
    {% csrf_token %}

            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#">
                    {% if gallery.logo %}
                    <img class="img-responsive" id="logo" src="/media/{{ gallery.logo }}" alt="">
                    {% else %}
                    <img class="img-responsive" id="logo" src="/media/images/placeholder.png" alt="">
                    {% endif %}
                </a>
                <input type="file" name="logo" id="logo" multiple>
            </div>

            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#">
                    {% if gallery.image1 %}
                    <img class="img-responsive" id="image1" src="/media/{{ gallery.image1 }}" alt="">
                    {% else %}
                    <img class="img-responsive" id="image1" src="/media/images/placeholder.png" alt="">
                    {% endif %}
                </a>
                <input type="file" name="image1" id="image1" multiple>
            </div>

            <div class="form-group">
                <input type="text" name="terms" id="terms" class="form-control input-sm" placeholder="terms" value="{{ gallery.terms }}">
            </div>

    <input type="submit" value="Submit" />
</form>

This question doesn't make sense to me. Could you elaborate? — Luke Xu
– Luke Xu, Commented Sep 2, 2015 at 18:13
docs cover it pretty well docs.djangoproject.com/en/1.8/topics/forms/… — Austin
– Austin, Commented Sep 2, 2015 at 18:35
If you are using bootstrap, look into django-bootstrap3. It will save you a lot of pain. See also Django Crispy Forms. — Paulo Almeida
– Paulo Almeida, Commented Sep 2, 2015 at 18:42
Sorry, I should of explained better. I want to put input wherever I would like in the HTML and have it upload to the model form. — Ryan113
– Ryan113, Commented Sep 2, 2015 at 19:08

Muhammad Shoaib · Accepted Answer · 2015-09-02 18:34:59Z

3

Yes you can loop on the form fields by doing the following

{% for field in form %}
    <div class="fieldWrapper">
        {{ field.errors }}
        <label> 
            {{ field.label_tag }}
        </label>
       <div>
           {{ field }}
       </div>
    </div>
{% endfor %}

Then you can add class to the div and label tags and style the form fields

You can also use Django Widget Tweaks to add classed to the form fields.

Click here to read in more details

By using widget tweaks you simply find the field in which you want to add the class by doing this

{% load widget_tweaks %}

{{ form.name|add_class:"inputContact volunteer" }}

answered Sep 2, 2015 at 18:34

Muhammad Shoaib

3722 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dimitrios Mistriotis Over a year ago

bixly link broken :(

Paulo Almeida · Accepted Answer · 2015-09-02 19:27:55Z

2

You can render the fields manually:

We don’t have to let Django unpack the form’s fields; we can do it manually if we like (allowing us to reorder the fields, for example). Each field is available as an attribute of the form using {{ form.name_of_field }}, and in a Django template, will be rendered appropriately.

Example from the documentation:

{{ form.non_field_errors }}
<div class="fieldWrapper">
    {{ form.subject.errors }}
    <label for="{{ form.subject.id_for_label }}">Email subject:</label>
    {{ form.subject }}
</div>
<div class="fieldWrapper">
    {{ form.message.errors }}
    <label for="{{ form.message.id_for_label }}">Your message:</label>
    {{ form.message }}
</div>

As I said in the comments, see also Django Crispy Forms. You can achieve the same without so much markup.

answered Sep 2, 2015 at 19:27

Paulo Almeida

8,09030 silver badges36 bronze badges

5 Comments

Ryan113 Over a year ago

Thank you, I appreciate the help. How would I submit the form fields manually? an example being I want a certain input that I have created in HTML to upload to a specific model field?

Paulo Almeida Over a year ago

You control that with the name attribute of the input fields. That's {{ field.html_name }} if you use iterate the fields in the form.

Ryan113 Over a year ago

How would I create a custom input field?

Paulo Almeida Over a year ago

I'm not sure I understand. You can create custom widgets, but for what you are doing you just have to write HTML, using the field's attributes if you wish.

Ryan113 Over a year ago

Thanks for all your help Paulo. I guess I am trying to figure out how to write HTML using the attributes I wish and relating that to my view. Do you by chance know of a working example of that method?

Collectives™ on Stack Overflow

Create a custom html template using forms in Django

2 Answers 2

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related