Contact Us - Python Django Forms and Validation
#contact.py
from django import forms
from django.shortcuts import get_object_or_404, render
from django.http import HttpResponseRedirect
from django.core.mail import send_mail, get_connection
class ContactForm(forms.Form):
name = forms.CharField(max_length=100, label='Your Name', widget=forms.TextInput(attrs={ 'class': 'form-control' }))
email = forms.EmailField(label='Your e-mail address', widget=forms.TextInput(attrs={ 'class': 'form-control' }))
subject = forms.CharField(max_length=100, widget=forms.TextInput(attrs={ 'class': 'form-control' }))
message = forms.CharField(required=False, widget=forms.Textarea(attrs={ 'class': 'form-control' }))
def contact(request):
submitted = False
if request.method == 'POST':
form = ContactForm(request.POST)
if form.is_valid():
cd = form.cleaned_data
# assert False
con = get_connection('django.core.mail.backends.console.EmailBackend')
send_mail(
cd['subject'],
cd['message'],
cd.get('email', 'noreply@example.com'),
['cairocoders0711@gmail.com'],
connection=con
)
return HttpResponseRedirect('/contact?submitted=True')
else:
form = ContactForm()
if 'submitted' in request.GET:
submitted = True
return render(request, 'contact/contact.html', {'form': form, 'submitted': submitted})
def index(request):
return render(request, "index.html")
#urls.py
from django.contrib import admin
from django.urls import include, path
from django.contrib.auth import views as auth_views
from myapp import contact
urlpatterns = [
path('admin/', admin.site.urls),
path('', contact.index),
path('contact/', contact.contact, name='contact'),
]
//templates/contact/contact.html
{% extends "base.html" %}
{% block title %}Contact Us{% endblock title %}
{% block content %}
<div class="section-content">
<h1 class="section-header">Get in <span class="content-header wow fadeIn " data-wow-delay="0.2s" data-wow-duration="2s"> Touch with us</span></h1>
<h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry</h3>
</div>
{% if submitted %}
<div class="alert alert-success" role="alert">
Your message was submitted successfully. Thank you.
</div>
{% else %}
{% if form.errors %}
{% for error in form.errors %}
<div class="alert alert-danger" role="alert">
This fields is required : {{ error }}
</div>
{% endfor %}
{% endif %}
<form action="" method="post" novalidate>
<div class="col-md-6 form-line">
<div class="form-group">
<label for="exampleInputUsername">Your name</label>
{{ form.name }}
</div>
<div class="form-group">
<label for="exampleInputEmail">Email Address</label>
{{ form.email }}
</div>
<div class="form-group">
<label for="telephone">Subject</label>
{{ form.subject }}
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for ="description"> Message</label>
{{ form.message }}
</div>
<div>
<button type="submit" value="Submit" class="btn btn-default submit"><i class="fa fa-paper-plane" aria-hidden="true"></i> Send Message</button>
</div>
</div>
{% csrf_token %}
</form>
{% endif %}
{% endblock content %}
//templates/base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}{% endblock %}</title>
{% load static %}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Oleo+Script:400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Teko:400,700" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="{% static 'css/style.css' %}" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Cairocoders</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="/">Home</a></li>
<li><a href="/calendar">Calendar</a></li>
<li><a href="/about">About Us</a></li>
<li><a href="/contact">Contact Us</a></li>
</ul>
</div>
</nav>
<header class="text-white">
<div class="container text-center">
<h1>Contact Us - Python Django Forms and Validation</h1>
<p class="lead">Contact Us - Python Django Forms and Validation</p>
</div>
</header>
<section id="contact">
<div class="contact-section">
<div class="container">
{% block content %}
{% endblock %}
</div>
</div>
</section>
</body>
</html>
//templates/index.html
{% extends "base.html" %}
{% block title %}Home{% endblock title %}
{% block content %}
Homepage
{% endblock content %}
/* static/css/style.css */
ul.errorlist {
margin: 0;
padding: 0;
}
.errorlist li {
border: 1px solid red;
color: red;
background: rgba(255, 0, 0, 0.15);
list-style-position: inside;
display: block;
font-size: 1.2em;
margin: 0 0 3px;
padding: 4px 5px;
text-align: center;
border-radius: 3px;
}
.success {
background-color: rgba(0, 128, 0, 0.15);
padding: 10px;
text-align: center;
color: green;
border: 1px solid green;
border-radius: 3px;
}
/*Contact sectiom*/
.content-header{
font-family: 'Oleo Script', cursive;
color:#fcc500;
font-size: 45px;
}
.section-content{
text-align: center;
}
#contact{
font-family: 'Teko', sans-serif;
padding-top: 60px;
width: 100%;
background: #3a6186; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #3a6186 , #89253e); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #3a6186 , #89253e); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
color : #fff;
}
.contact-section{
padding-top: 40px;
}
.contact-section .col-md-6{
width: 50%;
}
.form-line{
border-right: 1px solid #B29999;
}
.form-group{
margin-top: 10px;
}
label{
font-size: 1.3em;
line-height: 1em;
font-weight: normal;
}
.form-control{
font-size: 1.3em;
color: #080808;
}
textarea.form-control {
height: 135px;
/* margin-top: px;*/
}
.submit{
font-size: 1.1em;
float: right;
width: 150px;
background-color: transparent;
color: #fff;
}
