article

Saturday, April 11, 2020

Contact Us - Python Django Forms and Validation


Contact Us - Python Django Forms and Validation
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
#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")
?
1
2
3
4
5
6
7
8
9
10
11
#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'), 
]
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
//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 %}
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
//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>
?
1
2
3
4
5
6
7
8
//templates/index.html
{% extends "base.html" %}
 
{% block title %}Home{% endblock title %}
 
{% block content %}
Homepage
{% endblock content %}
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
/* 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;
}
Posted by ednalan at 10:30 PM . Under .

Related Post