We Keep Coding

Django UserCreationForm and Bootstrap Forms Layouts

I am trying to extend the UserCreationForm using a Bootstrap layout style for the field username. After the input tag in the registration form, I would like to add a div element like an example that I have readapted from the Bootstrap page: i.e. suggesting the user to enter the same username as the company domain.
Let's focus to the bare minimum. The form readapted from Bootstrap is:
<form class="row gy-2 gx-3 align-items-center method="POST" action="{% url 'register' %} ">
<div class="col-auto">
<div class="input-group">
<input type="text" name="username" class="form-control" placeholder="your.username" id="id_username">
<div class="input-group-text">#company.domain.com</div>
</div>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
Which produces the following:
For the moment, I am using only {{form.as_p}} in my html template file:
<form class="row gy-2 gx-3 align-items-center method="POST" action="{% url 'register' %} ">
{{form.as_p}}
<div class="col-auto">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
And I don't know how to add the <div class="input-group-text">#company.domain.com</div> part embedded in a <div class="input-group">...</div> block.
My actual forms.py is a bit more complex, but readapted for this minimum example it contains the widget attributes as follows:
class SignupForm(UserCreationForm):
username = forms.CharField(label="",
widget=forms.TextInput(attrs={'class': 'form-control', 'placeholder': 'your.username'}))
class Meta:
model = User
fields = (
'username',
)
Without additional libraries, is there a way to extend the widget attributes? Is it even possible to use {{form.as_p}} as I am currently doing or should I use another method?

If you want to use only {{ form.as_p }} with bootstrap then you need to install django-bootstrap.
Install it using pip:
pip install django-bootstrap4
After installation, add it in INSTALLED_APPS in settings.py file.
INSTALLED_APPS = [
'bootstrap4',
]
And in templates, you need to load it.
{% load bootstrap4 %}
{% bootstrap_messages %}
<form class="row gy-2 gx-3 align-items-center method="POST" action="{% url 'register' %} ">
{% csrf_token %}
{% bootstrap_form form %} # added `form` here. we don't need to use with as_p.
<div class="form-group">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
This is the way you can use bootstrap along with {{ form.as_p }}
OR
Try another way:
Simply you can use {{ form.username }} inside an input tag in template.
For Example:
<input type="text" value="{{ form.username }}">
<form class="row gy-2 gx-3 align-items-center method="POST" action="{% url 'register' %} ">
<div class="col-auto">
<div class="input-group">
<input type="text" name="username" class="form-control" placeholder="your.username" id="id_username" value="{{ form.username }}"> #Added here
<div class="input-group-text">#company.domain.com</div>
</div>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>

Submit button not working and redirecting to 404 error page in Django

I have deployed Django in my site subdomain apps.example.com through cPanel and the home page of my Django app apps.example.com/adsense-eligibility-checker is working but when I fill the form and click on the SUBMIT Button it redirects to 404 error page instead of running the second function scanned(requests) in mainApp/views.py. But it works in local host.
This is inside mainApp/views.py directory:
def home(request):
return render(request, 'home.html')
def scanned(request):
email = request.POST['email']
site = request.POST['site']
rating = request.POST['stars']
source = request.POST.getlist('source')
......
return render(request, "result.html", {'rMsg':rMsg,'result0':result0, 'result1':result1,'site': site,'show_site':show_site, 'vips':m1, 'domain':domain, 'site_age':site_age, 'sent': sent})
Inside MainApp/urls.py:
from django.urls import path
from.import views
urlpatterns=[
path('', views.home, name='home'),
path('scanned/', views.scanned, name='scanned')
]
Inside home.html:
{% extends 'main.html' %}
{% load static %}
{% block content %}
{% csrf_token %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="{% static 'style.css' %}">
<form method='POST' action="/scanned/" class='FormBody'>
{% csrf_token %}
<div id='tab'>
<h2>Adsense Eligibility Checker</h2>
<fieldset class='siteAndEmail'>
<legend>Site & Email</legend>
<div class='form-wrapper'>
<div class='full-input'>
<label for="site">Your Site URL</label>
<input type="domain" name='site' class='input' placeholder="https://yoursite.com">
</div>
<div class='full-input'>
<label for="email">Your Email</label>
<input type="text" name='email' class='input' placeholder="youremail#gmail.com">
</div>
</div>
</fieldset>
<fieldset class='siteAndEmail reached'>
<legend>How did you reached us?</legend>
<label class='c1'>
<input type="checkbox" name='source' value='Facebook' />
<i id='icon' class="fa fa-facebook"
style='background:linear-gradient(white,lightblue); color:dodgerblue;'></i>
Via Facebook
</label>
<label class='c1'>
<input type="checkbox" name='source' value='Google Search' />
<i id='icon' class="fa fa-google"
style='background:linear-gradient(160deg,yellow, dodgerblue,rgb(255, 0, 119), rgb(157, 255, 0)); color:white;'></i>
Via Google Search
</label>
<label class='c1'>
<input type="checkbox" name='source' value='Quora' />
<i id='icon' class="fa fa-quora"
style='background:linear-gradient(rgb(236, 0, 0),rgb(158, 0, 0)); color:white;'></i>
Via Quora
</label>
<div style='display:inline-block;'>
OTHERS
<input type="text" name='source'
style="background:rgba(255, 255, 255, 0.048);font-family:'Courier New', Courier, monospace; border:0px; border-bottom:1px solid rgba(0, 0, 0, 0.568);line-height:1.5em; padding-left:3px;"
placeholder="others" />
</div>
</fieldset>
</div>
<fieldset class='siteAndEmail'>
<legend>Rate Our Service</legend>
<div class='rating'>
<label>
<input type="radio" name="stars" value="1" />
<span class="icon">★</span>
</label>
<label>
<input type="radio" name="stars" value="2" />
<span class="icon">★</span>
<span class="icon">★</span>
</label>
<label>
<input type="radio" name="stars" value="3" checked />
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
</label>
<label>
<input type="radio" name="stars" value="4" />
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
</label>
<label>
<input type="radio" name="stars" value="5" />
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
</label>
</div>
</fieldset><br>
<button class='butn'> S C A N </button>
</form>
{% endblock %}
Inside result.html:
{% extends 'main.html' %}
{% load static %}
{% block content %}
{% load static %}
{% csrf_token %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="{% static 'style2.css' %}">
<div class='borders'>
<h2>R E S U L T Of Scanning Via Adsense Eligibility Checker</h2>
<div id='result'>
<ul style='text-align:left;'>
<li type='disc'>
{{result1}}
<script>
if ('{{rMsg}}'== ''){
document.write('<br>');
console.log('rMsg Level 1');
}
else {
document.getElementById('rmsg').innerHTML=('{{rMsg}}');
console.log('rMsg Level 2');
}
</script>
{{result0}}
<a id='rmsg'></a><br><a alt='What are the pages required for Adsense Approval' title='Pages Required For Adsense Approval' style='display:inline-block; text-decoration:none; color:rgb(196, 255, 87);' href='https://blog.example.com/check-website-eligibility-for-google-adsense/#What_are_the_pages_required_for_Adsense_approval'>
Pages Required For Adsense Approval
</a>
</li>
<li type='disc'>{{domain}}</li>
<li type='disc'>{{site_age}}</li>
<p style='text-align:center;'><i id='icon' class="fa fa-globe" style='background:linear-gradient(rgba(0, 250, 146, 0.596),rgba(0, 140, 255, 0.637)); color:rgb(255, 255, 255);'></i>
<a href='{{site}}' style='display:inline-block; text-decoration:none; color:rgb(0, 255, 179);'>{{show_site}}</a> is awesome.
</p>
</ul>
</div>
</div>
<p style='font-size:medium;font-family:serif;'>{{sent}}</p>
<br>
<a style='font-family:Consolas;font-size:larger;font-weight:bolder;display:inline-block; text-decoration:none; color:rgb(196, 255, 87);' href='https://blog.example.com/check-website-eligibility-for-google-adsense/#What_are_the_minimum_requirements_for_Adsense_Approval' title='Minimum requirements for Adsense Approval'>Min-Requirements for Adsense Approval</a>
{% endblock %}

type attribute also need be added, and action can be left empty if it has to go the current url
<button class='butn' type='submit'> S C A N </button>

Change this views.py:
def scanned(request):
email = request.POST['email']
site = request.POST['site']
rating = request.POST['stars']
source = request.POST.getlist('source')
......
# Inside function
return render(request, "result.html", {'rMsg':rMsg,'result0':result0, 'result1':result1,'site': site,'show_site':show_site, 'vips':m1, 'domain':domain, 'site_age':site_age, 'sent': sent})
Also, change your action by name. Like:
<form method='POST' action="{% url 'scanned' %}" class='FormBody'>

You have got issues with form url action make that correct and change button type to submit and redirect your url rather than rendering
return redirect('html_page')

The last character 'r' of slug adsense-eligibility-checker gets vanished into adsense-eligibility-checke\scanned and finally, I added action='adsense-eligibility-checker\scanned' which worked perfectly.

Submit django form in a modal popup

I render my form inside a modal:
view:
#login_required
def task_edit(request, pk):
member = get_object_or_404(Tasks, pk=pk)
if request.method == "POST":
form = TasksForm(request.POST or None, instance=member)
if form.is_valid():
reg = form.save(commit=False)
reg.save()
return HttpResponse(
'<script type="text/javascript">window.close();</script>')
else:
form = TasksForm(instance=member)
return render(request, 'TaskProj/task_edit.html', {'form': form})
my html rendered in a modal popup:
{%load staticfiles %}
<div class="row">
<div class="col-lg-12">
<div class="panel">
<div class="content-box">
<h3 class="content-box-header bg-primary">
<span class="icon-separator">
<i class="glyph-icon icon-tasks"></i>
</span>
<span class="header-wrapper">
Eidt Tasks </span>
</span>
</h3>
<div class="panel">
<div class="panel-body">
<form method="POST" id="form" class="form-horizontal bordered-row" autocomplete="off">
{% csrf_token %}
<div class="example-box-wrapper">
<div class="form-group">
{{ form.as_p }}
</div>
</div>
<button type="submit" class="btn btn-primary btn-lg btn-block">Salva</button>
</div>
</div>
</form>
<script type="text/javascript">
$(document).on('click','.submit',function(){
$( "#form" ).submit();
});
</script>
{% endblock %}
This form is rendered inside a modal popup.
I try to save, it close modal but not save form.
I think there is a problem with submit button...
Any idea?
TY

you need to declare an action attribute with the url to your function that handles the specific form in views.py. So that the form knows where to go, and be handled:
<form method="POST" id="form" class="form-horizontal bordered-row" action="{% 'task_edit' your-object.pk %}" autocomplete="off">
{% csrf_token %}
<div class="example-box-wrapper">
<div class="form-group">
{{ form.as_p }}
</div>
</div>
<button type="submit" class="btn btn-primary btn-lg btn-block">Salva</button>
</div>
</div>
</form>

How to add a button in email input?

I am trying to put a button inside an email input in a Django form.
This is the code with the button next to the email input:
<div class="container" id="notifyEmailFormContainer">
<form action="{% url "landing:notify_email_add" %}" method="post" id="notifyEmailForm">
{% csrf_token %}
<div class="form-group row">
<div class="col-sm-10 input-group" id="emailInput">
<div class="input-group-addon" id="comingSoonEmailIcon"><i class="fa fa-envelope fa fa-2x" aria-hidden="true"></i></div>
<input class="form-control" type="email" name="email" placeholder="Your email...." maxlength="255" required id="id_email"/>
</div>
<div class="col-sm-2">
<button type="button" class="btn btn-block btn-primary" onclick="addNotifyEmail()" id="submitNotifyEmail">Notify Me</button>
</div>
</div>
</form>
</div>
I have a tried a couple answers in similar questions but it seems I can't get it to work.

How to get textbox value in views.py django

I am trying to get the value of a textbox from views.py but its not working for some reason.
Below is my code
base.html
<form method="POST" role="form" >
{% csrf_token %}
<div class="tab-content">
<div class="tab-pane active" role="tabpanel" id="step1">
<div class="mobile-grids">
<div class="mobile-left text-center">
<img src="{% static 'images/mobile.png' %}" alt="" />
</div>
<div class="mobile-right">
<h4>Enter your mobile number</h4>
<!-- <label>+91</label><input type="text" name="mobile_number" class="mobile-text" value="asdfasd" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '';}" required=""> -->
<label>+91</label><input type="text" name="mobile_number" class="mobile-text" value="" >
</div>
</div>
<ul class="list-inline pull-right">
<li><button type="button" class="mob-btn btn btn-primary btn-info-full" data-dismiss="modal">Finish</button></li>
</ul>
</div>
<div class="clearfix"></div>
</div>
</form>
views.py
def home(request):
mobile_number = request.POST.get('mobile_number')
print(mobile_number)
return render(request,"home.html", {'mobile_number': mobile_number})
I am getting None when I try to get the value of textbox mobile_number.
How can I get the correct value?

You are missing a submit-button (<input type="submit" value="submit"/>) from the from.
To see the value on the form after submitting it, change value=""on the mobile_number -row, to value="{{ mobile_number }}".

My solution
1. You have to set action in form field as your functon in view.py
<form class="forms-sample" name="form" action="{% url "update_size" %}" method="post">
You have make button type as submit.
<button type="Submit" value="Submit" name="Submit" class="btn btn-primary">
url.py
path('updatesize/', views.updatesize, name='update_size')
View.py
def updatesize(request):
if (request.method == 'POST'):
temp = request.POST.get('size_name')
print("==================form================",temp)
return redirect("/collection.html")