Merge pull request #206 from Modulos/feature/3040
Change border-color if contact field is empty
This commit is contained in:
commit
4a4ca3ff15
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>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<div class="page-loader">
|
<div class="page-loader">
|
||||||
<div class="loader">
|
<div class="loader">
|
||||||
<div class="circle circle-1"></div>
|
<div class="circle circle-1"></div>
|
||||||
|
@ -419,7 +418,9 @@
|
||||||
<h1>{% trans 'How do I get Alplora?'%}</h1>
|
<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 a tracking device.'%}</h3>
|
<h3>{% trans 'Click the button below and leave us your contact.'%}<p></p>{% trans 'Team Alplora will contact you and visit you with a tracking device.'%}</h3>
|
||||||
<hr class="intro-divider">
|
<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>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
@ -429,60 +430,9 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- CONTACT FORM MODAL -->
|
<!-- CONTACT FORM MODAL -->
|
||||||
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" style="color:black;">
|
<div class="modal fade" id="modal" 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>
|
|
||||||
<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>
|
</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 -->
|
<!-- /.container -->
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
@ -560,6 +510,7 @@
|
||||||
|
|
||||||
<script src="{% static 'alplora/js/main.js' %}"></script>
|
<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/print.css" type="text/css" media="print">
|
||||||
<link rel="stylesheet" href="/static/debug_toolbar/css/toolbar.css" type="text/css">
|
<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 src="/static/debug_toolbar/js/toolbar.js"></script>
|
||||||
|
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
window.onload=function(){
|
$('#modal').on('show.bs.modal', function (event) {
|
||||||
var hash = window.location.hash.substr(1);
|
var modal = $(this)
|
||||||
if (hash == 'requestformsuccess'){
|
$.ajax({
|
||||||
$('#request-success-message').modal('show');
|
url: "{% url 'alplora:contact' %}",
|
||||||
}
|
context: document.body
|
||||||
|
}).done(function(response) {
|
||||||
};
|
modal.html(response);
|
||||||
|
});
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -1,11 +1,12 @@
|
||||||
from django.conf.urls import url
|
from django.conf.urls import url
|
||||||
|
|
||||||
from .views import IndexView, LoginView
|
from .views import IndexView, LoginView, ContactView
|
||||||
|
|
||||||
|
|
||||||
urlpatterns = [
|
urlpatterns = [
|
||||||
url(r'^/?$', IndexView.as_view(), name='index'),
|
url(r'^/?$', IndexView.as_view(), name='index'),
|
||||||
url(r'/login/', LoginView.as_view(), name='login'),
|
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'^/beta-program/?$', BetaProgramView.as_view(), name='beta'),
|
||||||
# url(r'^/landing/?$', LandingProgramView.as_view(), name='landing'),
|
# 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.views.generic.edit import FormView
|
||||||
from django.contrib import messages
|
from django.contrib import messages
|
||||||
from django.core.urlresolvers import reverse_lazy, reverse
|
from django.core.urlresolvers import reverse_lazy, reverse
|
||||||
|
from django.shortcuts import render
|
||||||
|
|
||||||
from utils.forms import ContactUsForm
|
from utils.forms import ContactUsForm
|
||||||
|
|
||||||
class IndexView(FormView):
|
class IndexView(TemplateView):
|
||||||
template_name = "alplora/index.html"
|
template_name = "alplora/index.html"
|
||||||
form_class = ContactUsForm
|
|
||||||
success_message = _('Message Successfully Sent')
|
|
||||||
|
|
||||||
def get_context_data(self, *args, **kwargs):
|
def get_context_data(self, *args, **kwargs):
|
||||||
context = super(IndexView, self).get_context_data(**kwargs)
|
context = super(IndexView, self).get_context_data(**kwargs)
|
||||||
|
@ -19,17 +18,22 @@ class IndexView(FormView):
|
||||||
context.update(languages)
|
context.update(languages)
|
||||||
return context
|
return context
|
||||||
|
|
||||||
def get_success_url(self):
|
class ContactView(FormView):
|
||||||
success_url = reverse('alplora:index')
|
template_name = 'alplora/contact.html'
|
||||||
success_url += "#requestformsuccess"
|
form_class = ContactUsForm
|
||||||
return success_url
|
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):
|
def form_valid(self, form):
|
||||||
form.save()
|
form.save()
|
||||||
form.send_email(email_to='info@alplora.ch')
|
form.send_email(email_to='info@alplora.ch')
|
||||||
messages.add_message(self.request, messages.SUCCESS, self.success_message)
|
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):
|
class LoginView(TemplateView):
|
||||||
template_name = "alplora/login.html"
|
template_name = "alplora/login.html"
|
||||||
|
|
Loading…
Reference in a new issue