How to style model form in django with CSS?

Question

I have been using simple forms in Django since I started with python and now I've switched over to model forms, right now I'm wondering how to style the form. I tried to use the widgets code but it is behaving a little funny, If I understand correctly the widgets are to style the form itself (such as input fields) and I can use regular html/css styling on any other elements I have? My desired effect is to have the form centered in the middle of the screen. Is this correct? Here is my code incase there are errors:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {% load static %}
    <link rel="stylesheet" href="{% static 'css/tripadd.css' %}">
    <title>Document</title>
</head>
<body>
    <!-- <div class="form-container">
        <h4>Add a Trip</h4>
        <form action="/createTrip" method="post" class="reg-form">
            {% csrf_token %}
                    <p><input class="field" type="text" name="city" placeholder="City" id=""></p>
                    <p><input class="field" type="text" name="country" placeholder="Country" id=""></p>
                    <p><textarea name="description" id="" cols="30" rows="10"></textarea></p>
                    <p><input class="field" type="file" name="photo" placeholder="Photo" id=""></p>
                    <input class="form-btn" type="submit" value="submit">
        </form>
    </div> -->
    {% block content %}
    <div class="trip-form">
                <form method="POST" enctype="multipart/form-data">
                    {% csrf_token %}
                    {{form.as_p}}
                    <button type="submit">submit</button>
                </form>
    </div>

    {% endblock %}
</body>
</html>

@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}


body{
    display: flex;
    justify-content: center;
    align-items: center;
}

.form-control{
    width: 500px;
    height: 500px;
    border: 2px solid black;
    
}


// form should be centered in middle of page

cosmo boi · Accepted Answer · 2022-06-13 13:25:08Z

You are right on the point that widget provides you with an option to style your form but it will only style the field for you not the label and any class you mention in the widget should be available in the stlyesheet . you can check the link below it provides a simple example on how you can style your form.

Simple form styling

and if you want to fully style the form with labels and how it should be structured you will have to loop over the form. below I have mentioned a simple code that illustrates how you can structure your form using django forms

<style>
.h-100{ 
   min-height:100vh;
 }
</style>

 <div class="w-100 d-flex justiy-content-center align-items-center h-100" >
 <form method="POST" class="row" enctype="multipart/form-data">
      {% csrf_token %}
      {% for field in form %}
      <div class="col-6 text-start"> {{field.label}} </div>
      <div class="col-6"> {{field}} </div>
      {% endfor %}
      <button type="submit">submit</button>
 </form>

i hope this helps you in your problem :)

Collectives™ on Stack Overflow

How to style model form in django with CSS?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related