Django - render custom form fields in custom HTML template - django

Question

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!

Answer 1

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:
first you need to load in the top of the HTML file (similar how you load static):
{% load widget_tweaks %}
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>