Merge pull request #206 from Modulos/feature/3040

Change border-color if contact field is empty
This commit is contained in:
Levi Velázquez 2017-05-03 00:13:05 -05:00 committed by GitHub
commit 4a4ca3ff15
6 changed files with 104 additions and 72 deletions

File diff suppressed because one or more lines are too long

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>

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>

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 a 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>

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'),
]

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"