I've installed Userena, and I am trying to figure out how to integrate the existing userena form with my own custom HTML form template, I have pasted part of the code for the userena form template, and I do not see ANY css or html, so I'm very confused about how I would integrate this with my own template consisting of HTML, CSS. I figured with Django I'd be able to take any old HTML form and just plugin Django's variables to get it working.
So my question is how can I integrate the top example (userenas form template) into the bottom example (generic HTML example). An example might be helpful.
{% block content %}
<form action="" method="post">
{% csrf_token %}
<fieldset>
<legend>{% trans "Signup" %}</legend>
{{ form.non_field_errors }}
{% for field in form %}
{{ field.errors }}
{% comment %} Displaying checkboxes differently {% endcomment %}
{% if field.name == 'tos' %}
<form action="/register/" method="post" role="form">
<div class="form-group">
<input type="text" class="form-control input-lg" id="nameinput" placeholder="Name" name="contact-name">
</div>
<div class="form-group">
<input type="email" class="form-control input-lg" id="emailinput" placeholder="Email" name="contact-email">
</div>
Related
I am using the django all-auth login form. I wanted to customize the look of the form fields so I changed login.html within the account folder to look like this:
<form class="login" method="POST" action="{% url 'account_login' %}">
{% csrf_token %}
{% for field in form.visible_fields|slice:'2' %}
<div class="row form-group">
{% if field.name == 'login' %}
<input type="text" placeholder="Email"><i class="fas fa-at"></i>
{% else %}
<input type="password" placeholder="Password"><i class="la la-lock"></i>
{% endif %}
</div>
{% endfor %}
Forgot Password?
<button type="submit">Sign In</button>
</form>
The form renders exactly how I would like it to, however nothing happens when I click on submit. What is strange to me is that the form submits perfectly fine if in place of my for loop I simply type {{ form.as_p }}, it just doesn't look how I want. Can anyone see an error in my loop, or is there something else wrong here. I have been looking for a solution online but so far been unsuccessful
You need to specify the names of the fields in your input tags otherwise the POST dictionary will be empty. You are using {% if field.name == 'login' %} but you forgot to specify the name attribute. Same applies for the password input.
<form class="login" method="POST" action="{% url 'account_login' %}">
{% csrf_token %}
{% for field in form.visible_fields|slice:'2' %}
<div class="row form-group">
{% if field.name == 'login' %}
<input name='login' type="text" placeholder="Email"><i class="fas fa-at"></i>
{% else %}
<input name='password' type="password" placeholder="Password"><i class="la la-lock"></i>
{% endif %}
</div>
{% endfor %}
Forgot Password?
<button type="submit">Sign In</button>
</form>
I want to add a custom form to a django admin-site change list view. As soon as I add a submit button it asking to select the custom action from the drop-down list. I created a separate form with a unique id. Still it look for a action be select. How can I overcome this?
Here is my template code.
{% extends "admin/change_list.html" %}
{% load staticfiles %}
{% block content %}
<div align="right">
<form id="generate-form" method="POST">
{% csrf_token %}
<select>
<option value="">-- section name --</option>
{% for section in sections %}
<option value="{{ section.short_name }}">{{ section.name }}</option>
{% endfor %}
</select>
<input type="text" name="from_date" class="vTextField" placeholder="from">
<input type="text" name="to_date" class="vTextField" placeholder="to">
<input type="submit" value="Generate" class="default" id="gen-schedules"
style="margin:0; height: 30px; padding-top: 5px;">
<form>
</div>
{{ block.super }}
{% endblock %}
Assuming you copy/pasted without changing it, you have this because the form tag isn't properly closed: <form> should be replaced by </form>:
...
</form>
</div>
{{ block.super }}
{% endblock %}
Because it's not closed, the browser thinks it's the same form as the the next form, the actions one.
To avoid this kind of problems, I'd recommend relying on Django's forms to generate the right HTML for you, when possible. To help with complex layouts, django-crispy-forms is a great library that is very helpful.
Using the following code to render a form:
<div class="row">
<div class="col-lg-6 col-lg-offset-3">
<form action="{% url 'chartboard:chart_url' %}" method="post" class="form">
{% csrf_token %}
{% bootstrap_form form layout='inline' %}
{% buttons %}
<button type="submit" class="btn btn-primary">
{% bootstrap_icon "star" %} Submit
</button>
{% endbuttons %}
</form>
</div>
</div>
Here is the output:
And here it is when removing layout='inline'
Datepicking is done by adding a custom class upon form creation with form widgets and using a jquery datepicker (if that is of any relevance at all)
Why are field labels being hidden in the first case?
Why isn't the entire form displayed in a single line when opting for inline display?
Working with python 3.4 and the following venv:
Django==1.8.11
django-bootstrap3==7.0.1
flake8==2.5.4
mccabe==0.4.0
numexpr==2.5
numpy==1.10.4
pep8==1.7.0
pyflakes==1.0.0
requests==2.9.1
tables==3.2.2
You need to change the class of your <form> element to class="form-inline" and it should work. It doesn't seem to appear in the docs but check the example inline form on GitHub.
I am making a website using django but I have a problem with my modelforms. This is my working form code in my html-file:
<form class="form-horizontal" role="form" method="post" action="">
<div class="form-group">
{% csrf_token %}
{{ form.as_p }}
</div>
<input type="submit" value="Inschrijven!" class="btn btn-primary" />
</form>
If i use this code, everything works fine, when I fill in the form and press send, I can see the information from my admin-page.
I now tried to style my form using bootstrap:
<form class="form-horizontal" role="form" method="post" action="">
{% csrf_token %}
{% for field in form %}
<div class="form-group">
<label class="col-sm-4 control-label">{{ field.label }}</label>
<div class="col-sm-4">
<input type="text" class="form-control" placeholder="{{field.label}} ingeven">
</div>
</div>
{% endfor %}
<input type="submit" value="Inschrijven!" class="btn btn-primary">
</form>
Now I have a nice bootstrap layout but if I fill in the form, I can't see the information at my admin-page.
Does somebody know how I can fix this so I can keep the nice layout and still have my form to work?
When you output Django HTML form, you will notice that it creates input elements with the following ID and Name attributes of the element.
Eg
class MyForm...
name = ...
age = ...
HTML
<input type='text' id='id_name' name='name' ...
<input type='text' id='id_age' name='age'...
To fix your issue, in your HTML add the following attribute to the HTML input field you're generating
id="id_{{field.name}}" name="{{field.name}}"
Reasoning:
When the form is submitted, the browser will send form encoded data in the form of name=value pair, which then arrives in form of dict in request.POST and when fed into Django form, it pre fills the form by matching the Django form attribute name to POST values.
I'm trying to use the app django-dynamic-formset to allow users to add more than one media object at the end of a form.
I'm following the demo here.
https://github.com/elo80ka/django-dynamic-formset/blob/master/docs/usage.rst
I managed to get this to work but then changed to using crispy form and it's no longer working.
The "add another" text isn't appearing aver the first inline formset.
The template looks like this.
<form id="dtuForm" enctype="multipart/form-data" action="." method="post" >
{% csrf_token %}
{{ formset.management_form }}
{% crispy form %}
<fieldset class="" id="formaddtest" >
{% for formset in inlines %}
<div id = "media_object">
{% for subform in formset.forms %}
{{ formset.management_form }}
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Add Link / Downloadable File</h3>
</div>
<div class="panel-body">
{% crispy subform %}
</div>
</div>
{% endfor %}
</div>
{% endfor %}
</fieldset>
{% buttons %}
<button type="submit" class="btn btn-primary">
{% bootstrap_icon "star" %} Submit
</button>
{% endbuttons %}
</form>
I'm starting to suspect that I'm not putting the media_object selector in the right place but I'm not sure where to put it now that I'm using crispy forms so any help or pointers is useful to me.
Thanks