Django中的弹出UserCreationForm

Question

Can I popup UserCreationForm of Django?

I am building a website. When I click on signup page popup signup page needs to show.

Right now I have a signup page and login page and they are working but I need to popup them.

I am using usercreationform of Django.

Can I add Bootstrap and CSS in that form too?

from django.contrib.auth.forms import UserCreationForm

Here is the popup code of what i tried right now the div is showing on my page not in popup

Sign-up

<script src='{% static "js/grayscale.min.js" %}'></script>
      <script src='{% static "js/creative.min.js"%}'></script>
      <script type="text/javascript">
  var model= document.getElementById('abc');
  window.onclick= function(event){
    if (event.target==model) {
      model.style.display= "none";
    }
  }
      </script>  

<div id="abc">

    <div id="popupContact">
    {% block title %}

{% endblock %}
    {% block content %}

       <div class="login" style="background: grey">

         {% if messages %}
            <ul>
                {% for message in messages %}
                <li>{{ message }}</li>
                {% endfor %}
            </ul>
        {% endif %}

        <h1>Create account - Racernomics</h1>

         <form method="post" >
             {% csrf_token %}
             <table>
                {{ form.as_table }}
                 <tr>
                    <td></td>
                     <td><button type="submit">Register</button></td>
                </tr>
             </table>
         </form>
       {% endblock %}
</div>
    </div>

Answer 1

You can customize your form however you want.

It could be done by adding html-classes, id`s, etc. directly to your form class in django and then accessing and modifying them with css:

class SomeForm(forms.Form):
    some_field = forms.DateField(widget=forms.TextInput(attrs={'class': 'datepicker', 'placeholder': 'mm/dd/yy'}),
                           required=False)

or you can use for example additional library to access form in template (I prefer this way, it helps to keep logic and frontend separate from each other). Such library could be widget-tweaks .

Take a look at this article , could be interesting for you.