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,59 +430,8 @@ | ||||||
|         </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> |         </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 --> |         <!-- /.container --> | ||||||
| 
 | 
 | ||||||
|  | @ -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…
	
	Add table
		Add a link
		
	
		Reference in a new issue