CODEWITHSUNDEEP
djangopython-3.x
user12718539
user12718539

Reputation:

Django - render custom form fields in custom HTML template

I'm kinda new into Django and I'm facing some troubles using some custom forms.

I'm using a purchased Bootstrap theme which apart from the standard classes that comes with Bootstrap has its own classes and of course, some custom CSS. I find it very difficult how Django deals with custom forms and all the sources/information/examples found online makes no sense to me.

So, my elements from my HTML template use the following classes:

<form action="#" method="post" class="card shadow-soft border p-4 mb-4">
    <div class="form-group">
        <label for="video">Video url</label>
        <input type="text" value="https://video.com/" class="form-control shadow-soft" id="video"
            placeholder="Video url" required>
    </div>
    <div class="row">
        <div class="col">
            <button class="btn btn-primary btn-dark mt-2 animate-up-2 text-right"
                type="submit">Update</button>
        </div>
    </div>
</form>

In forms.py I have added the following:

class UpdateURLForm(forms.Form):
    VideoURL = forms.CharField(
        widget=forms.TextInput(
            attrs={
                'class': 'form-group'
            }
        )
    )

    class Meta:
        model = Listing
        fields = ('VideoURL')

In views.py I have imported the form and added to the view:

from .forms import UpdateURLForm

def updateInfo(request):
    if request.method == 'POST':
        form = UpdateURLForm(request.POST)
        if form.is_valid():
            pass
        else:
            form = UpdateURLForm()
    return render(request, 'myapp/editinfo.html', {'form': form})

Now, in my HTML template, I want to render the form field which has to inherit the custom CSS styles but somehow, I'm missing something because the field is being displayed as I was using Crispy forms. 

<form action="#" method='post' class="card shadow-soft border p-4 mb-4">{% csrf_token %}
    <div class="form-group">
        <label for="video">Video URL</label>
        <input type="text" value="{{form}}" class="form-control shadow-soft" id="video"
            placeholder="{{object.VideoURL}}" required> # the placeholder comes from my class based view
    </div>
    <div class="row">
        <div class="col">
            <button class="btn btn-primary btn-dark mt-2 animate-up-2 text-right"
                type="submit">Update</button>
        </div>
    </div>
</form>

What should I do if I need more fields from a custom form to be rendered using my custom CSS classes?

Any suggestion would be much appreciated. Thanks!

Upvotes: 0

Views: 1071

Answers (1)

cdrrr
cdrrr

Reputation: 1112

You can use Widget Tweaks to achieve what you want. This will allow you to use your own styles:

You can get Django Widget Tweaks by using pip:

$ pip install django-widget-tweaks

To enable widget_tweaks in your project you need to add it to INSTALLED_APPS in your projects settings.py file:

INSTALLED_APPS = [
    ...
    'widget_tweaks',
    ...
]

Considering your code sample, when you render the form field in the HTML template, do something like:

  1. first you need to load in the top of the HTML file (similar how you load static):

    {% load widget_tweaks %}

  2. Then you can add your custom class like this:

                    <div class="form-group">
                    <label for="video">Video URL</label>
                    {{form.VideoURL|add_class:"form-control shadow-soft"}}
                </div>

Upvotes: 1

Related Questions