Change border-color if contact field is empty
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
parent
d98d139136
commit
ef8ae14582
6 changed files with 104 additions and 72 deletions
12
alplora/static/alplora/js/form.js
Normal file
12
alplora/static/alplora/js/form.js
Normal file
File diff suppressed because one or more lines are too long
42
alplora/templates/alplora/contact.html
Normal file
42
alplora/templates/alplora/contact.html
Normal 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">×</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
21
alplora/templates/alplora/contact_success.html
Normal 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">×</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>
|
||||
|
|
@ -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,59 +430,8 @@
|
|||
</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">×</span></button>
|
||||
<h4 class="modal-title" id="exampleModalLabel">{% trans 'New message'%}</h4>
|
||||
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" style="color:black;">
|
||||
</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>
|
||||
|
||||
<!-- 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">×</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 -->
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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'),
|
||||
]
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Reference in a new issue