moep/dynamicweb
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Change border-color if contact field is empty

Browse source 
The conact modals where moved in seperated templates. Further to
evaluate the form without reloading the page some ajax was added.
This commit is contained in:
Modulos 2017-04-12 11:17:03 +02:00
parent d98d139136
commit ef8ae14582
6 changed files with 104 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
alplora/static/alplora/js/form.js Normal file
View file

File diff suppressed because one or more lines are too long

42
alplora/templates/alplora/contact.html Normal file
View file

@ -0,0 +1,42 @@
{% load i18n %}
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="exampleModalLabel">{% trans 'New message'%}</h4>
</div>
<form novalidate method="post" action="{% url 'alplora:contact'%}" id="contact_form">
<div class="modal-body">
{% csrf_token %}
{{ form.non_field_errors }}
<div class="form-group text-left">
<label for="recipient-name" class="control-label ">{% trans 'Name:'%}</label>
<input type="text" class="form-control" {%if form.name.errors%}
style="border-color: red" {%endif%} name="name" placeholder="{% trans 'What is your name ?'%}" id="recipient-name" required>
{{ form.name.errors|striptags }}
</div>
<div class="form-group text-left">
<label for="recipient-name" class="control-label ">{% trans 'From:'%}</label>
<input type="text" class="form-control" {%if form.email.errors%}
style="border-color: red" {%endif%}name="email" placeholder="{% trans 'You email'%}" id="recipient-name" required>
{{ form.email.errors|striptags}}
</div>
<div class="form-group text-left">
<label for="message-text" class="control-label ">{% trans 'Message:'%}</label>
<textarea class="form-control" {%if form.message.errors %} style =
"border-color: red" {%endif%} name="message" placeholder="{% trans 'Leave us your message'%}" id="message-text" required></textarea>
{{ form.message.errors|striptags}}
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">{% trans 'Close'%}</button>
<button type="submit" class="btn btn-warning">{% trans 'Send message'%}</button>
</div>
</form>
</div>
</div>
<script>
$('#contact_form').ajaxForm({
target: '#modal', success: function(response) { }
});
</script>

21
alplora/templates/alplora/contact_success.html Normal file
View file

@ -0,0 +1,21 @@
{% load i18n %}
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title">{% trans "Message Sent" %}</h4>
</div>
<div class="modal-body">
<p>{% trans "Thank you, we will contact you as soon as possible" %}</p>
</div>
<div class="modal-footer text-center">
<button type="submit" class="btn btn-primary" data-dismiss="modal">Ok</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
<script>
// close the modal after 3 seconds
setTimeout(function() {
$('#modal').modal('hide');
}, 3000);
</script>

76
alplora/templates/alplora/index.html
View file

@ -53,7 +53,6 @@
</script>
<div class="page-loader">
<div class="loader">
<div class="circle circle-1"></div>
@ -419,7 +418,9 @@
<h1>{% trans 'How do I get Alplora?'%}</h1>
<h3>{% trans 'Click the button below and leave us your contact.'%}<p></p>{% trans 'Team Alplora will contact you and visit you with tracking device. '%}</h3>
<hr class="intro-divider">
<a href="#howitworks" class="btn btn-default btn-lg"><i class="#Services"></i> <span class="network-name" data-toggle="modal" data-target="#exampleModal" >{% trans 'Contact'%}</span></a>
<a href="{% url 'alplora:contact' %}" data-toggle="modal" data-target="#modal" class="btn btn-default
btn-lg"><i class="#Services"></i> <span
class="network-name" >{% trans 'Contact'%}</span></a>
</ul>
</div>
@ -429,60 +430,9 @@
</div>
<!-- CONTACT FORM MODAL -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" style="color:black;">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="exampleModalLabel">{% trans 'New message'%}</h4>
</div>
<form method="POST" action="">
<div class="modal-body">
{% csrf_token %}
{{ form.non_field_errors }}
<div class="form-group text-left">
<label for="recipient-name" class="control-label ">{% trans 'Name:'%}</label>
<input type="text" class="form-control" name="name" placeholder="{% trans 'What is your name ?'%}" id="recipient-name" required>
</div>
<div class="form-group text-left">
<label for="recipient-name" class="control-label ">{% trans 'From:'%}</label>
<input type="text" class="form-control" name="email" placeholder="{% trans 'You email'%}" id="recipient-name" required>
{{ form.email.errors|striptags}}
</div>
<div class="form-group text-left">
<label for="message-text" class="control-label ">{% trans 'Message:'%}</label>
<textarea class="form-control" name="message" placeholder="{% trans 'Leave us your message'%}" id="message-text" required></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">{% trans 'Close'%}</button>
<button type="submit" class="btn btn-warning">{% trans 'Send message'%}</button>
</div>
</form>
</div>
</div>
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" style="color:black;">
</div>
<!-- SUCCESS MODAL MESSAGE -->
<div class="modal fade bs-example-modal-sm" style="color:black;" id="request-success-message" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title">{% trans "Message Sent" %}</h4>
</div>
<div class="modal-body">
<p>{% trans "Thank you, we will contact you as soon as possible" %}</p>
</div>
<div class="modal-footer text-center">
<button type="submit" class="btn btn-primary" data-dismiss="modal">Ok</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- /.container -->
</div>
@ -560,6 +510,7 @@
<script src="{% static 'alplora/js/main.js' %}"></script>
<script src="{% static 'alplora/js/form.js' %}"></script>
<link rel="stylesheet" href="/static/debug_toolbar/css/print.css" type="text/css" media="print">
<link rel="stylesheet" href="/static/debug_toolbar/css/toolbar.css" type="text/css">
@ -572,14 +523,15 @@
<script src="/static/debug_toolbar/js/toolbar.js"></script>
<script type="text/javascript">
window.onload=function(){
var hash = window.location.hash.substr(1);
if (hash == 'requestformsuccess'){
$('#request-success-message').modal('show');
}
};
$('#modal').on('show.bs.modal', function (event) {
var modal = $(this)
$.ajax({
url: "{% url 'alplora:contact' %}",
context: document.body
}).done(function(response) {
modal.html(response);
});
});
</script>
</body>
</html>

3
alplora/urls.py
View file

@ -1,11 +1,12 @@
from django.conf.urls import url
from .views import IndexView, LoginView
from .views import IndexView, LoginView, ContactView
urlpatterns = [
url(r'^/?$', IndexView.as_view(), name='index'),
url(r'/login/', LoginView.as_view(), name='login'),
url(r'/contact', ContactView.as_view(), name='contact'),
# url(r'^/beta-program/?$', BetaProgramView.as_view(), name='beta'),
# url(r'^/landing/?$', LandingProgramView.as_view(), name='landing'),
]

22
alplora/views.py
View file

@ -5,13 +5,12 @@ from django.utils.translation import ugettext_lazy as _
from django.views.generic.edit import FormView
from django.contrib import messages
from django.core.urlresolvers import reverse_lazy, reverse
from django.shortcuts import render
from utils.forms import ContactUsForm
class IndexView(FormView):
class IndexView(TemplateView):
template_name = "alplora/index.html"
form_class = ContactUsForm
success_message = _('Message Successfully Sent')
def get_context_data(self, *args, **kwargs):
context = super(IndexView, self).get_context_data(**kwargs)
@ -19,17 +18,22 @@ class IndexView(FormView):
context.update(languages)
return context
def get_success_url(self):
success_url = reverse('alplora:index')
success_url += "#requestformsuccess"
return success_url
class ContactView(FormView):
template_name = 'alplora/contact.html'
form_class = ContactUsForm
success_message = _('Message Successfully Sent')
def get_context_data(self, *args, **kwargs):
context = super(ContactView, self).get_context_data(**kwargs)
languages = getlanguages()
context.update(languages)
return context
def form_valid(self, form):
form.save()
form.send_email(email_to='info@alplora.ch')
messages.add_message(self.request, messages.SUCCESS, self.success_message)
return super(IndexView, self).form_valid(form)
return render(self.request, 'alplora/contact_success.html', {})
class LoginView(TemplateView):
template_name = "alplora/login.html"