CODEWITHSUNDEEP
pythonhtmldjangoformsdjango-crispy-forms
cornisto
cornisto

Reputation: 209

Django crispy forms inline label and input field

I have a Django ModelForm containing 3 fields: name, lastname, email. What I want is to adjust the crispy form to have each field along with it's label in one line, so the form will look like this:

Name: <input name>
Lastname: <input lastname>
Email: <input email>
<button Submit>

I tried with FormHelper and Layout and bootstrap inline attribute but all I achieved was having all elements in the form in one line.

I'm really bad at frontend and I'm stuck.

Upvotes: 1

Views: 1317

Answers (2)

cornisto
cornisto

Reputation: 209

I managed to achieve my goal by simply changing {{ my_form|crispy }} to {{ my_form.as_p }} in my html code.

Upvotes: 0

Fran&#231;ois Fournier
Fran&#231;ois Fournier

Reputation: 316

Assuming your settings.py contains:

CRISPY_TEMPLATE_PACK = 'bootstrap4'

you probably want to override the template bootstrap4/field.html which is the one that places the label and the various possible input field together.

to do so, you can copy the templates/bootstrap4/field.html file from the crispy_form package into your templates/bootstrap4/field.html in your application and have it modified as per your needs. When the template engine will render the form fields, it will find your modified field.html before the one in the original template.

you may also want to be refered to the template pack uni_form which, without css, renders the fields almost the way you want. You can use it as is or get yourself inspired by the way it is structured to modify your own field.html.

Upvotes: 1

Related Questions