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>
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
<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,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…
	
	Add table
		Add a link
		
	
		Reference in a new issue