Commits

Scott Nixon  committed c211313 Draft

Upgrade our contact form to a crispy form. Updated layout on main template and contact page.

  • Participants
  • Parent commits a957d23

Comments (0)

Files changed (3)

File article/forms.py

 from django.contrib.flatpages.admin import FlatPageAdmin, FlatpageForm
 
 from django_cloudi.widgets import CloudImages
-from widgets import WYMEditor
-from tinymce.widgets import TinyMCE
+#from widgets import WYMEditor
+#from tinymce.widgets import TinyMCE
+
+from crispy_forms.helper import FormHelper
+from crispy_forms.layout import Submit, HTML, Layout
+from crispy_forms.bootstrap import PrependedText
 
 class PostAdminModelForm(forms.ModelForm):
     post_content = forms.CharField(widget=forms.Textarea(attrs={'class':'redactor','cols': 80, 'rows': 30}))
-    #post_content = forms.CharField(widget=TinyMCE(attrs={'cols': 80, 'rows': 30}))
     #change_form_template = 'article/templates/admin_post_form.html'
 
     class Meta:
     class Meta:
         model = get_model('article', 'recipephotos')
 
+
 class ContactForm(forms.Form):
-    question = forms.CharField(widget=forms.TextInput(attrs={'ng-model': 'userq'}))
-    message = forms.CharField(widget=forms.Textarea(attrs={'class':'span5'}))
+    #question = forms.CharField(widget=forms.TextInput())
+    message = forms.CharField(widget=forms.Textarea(attrs={'class':'span5', 'placeholder':"Type your message here..."}))
     name = forms.CharField()
     email = forms.EmailField()
-    
+
+    def __init__(self, *args, **kwargs):
+        self.helper = FormHelper()
+        self.helper.form_id = 'send-email'
+        self.helper.form_class = 'send-email'
+        self.helper.form_method = 'post'
+        self.helper.form_action = '/about/contact/'
+        
+        self.helper.layout = Layout(
+            HTML('<hr>'),
+            HTML("<div class='contactlindsay'><p>Hiya Herbie!</p><p>Nothing lifts my spirits like your personal stories and I love answering your questions! I do, however, respond to over 3,400 emails every month. Can you do me a favor and search below before emailing me? Chances are I've already addressed your question on this site. Thank you!</p><p>- Lindsay (HH)</p></div>"),
+            HTML('<hr>'),
+            'message',
+            PrependedText('name', '<i class="icon-user"></i>'),
+            PrependedText('email', '<i class="icon-envelope"></i>'),
+        )
+        self.helper.add_input(Submit('submit-email', 'Submit'))
+
+        super(ContactForm, self).__init__(*args, **kwargs)
+
+        

File article/templates/contact.html

     <!-- Content -->
     <div id="outer-wrapper" ng-app="hhfaq">
 
-      <div class="container">
+        <div class="container">
 
-        <div class="wrapper-box page">
-          <!-- Content -->
-          <div class="row">
-            <div class="span7">
-                {% if success %}
-                    <span class="btn btn-success"><i class="icon-ok icon-white"></i> Your message has been sent!</span>
-                {% else %}
-                    <script src="{{ STATIC_URL }}js/angular.min.js"></script>
-                    <script src="{{ STATIC_URL }}js/angular-resource.min.js"></script>
-                    <script src="{{ STATIC_URL }}js/faq.js"></script>
-                {% endif %}
-             <h2 class="title">Have a Question?</h2>
-             <h3 class="subtitle">With any luck, we already have an answer.</h3>
-             <div class="faq-search">
-                <div class="faq-search-input-area">
-                    <form method="#">                   
-                        <input ng-model="userq" type="text" id="id_faq_search" name="faqSearch" placeholder="Type a Keyword">
-                    </form>
-                </div><!-- / faq search input area -->
-                <div class="search-wrapper">
-                    <div class="faq-questions main-panel">
-                        <div class="faq-questions-header">
-                            <h4>See popular questions about...</h4>
-                        </div><!-- / faq questions header -->
-                        <ul class="faq-categories">
-                            <li><a href="#" data-id="1">Nutrition</a></li>
-                            <li><a href="#" data-id="2">Low-Fat Cooking</a></li>
-                            <li><a href="#" data-id="3">Substitutions</a></li>
-                            <li><a href="#" data-id="4">All FAQs</a></li>
-                        </ul>
-                    </div>
+            <div class="wrapper-box page">
+
+                <div class="row">
+                    <div class="span7">
+                        {% if success %}
+                            <span class="btn btn-success"><i class="icon-ok icon-white"></i> Your message has been sent!</span>
+                        {% else %}
+                            <script src="{{ STATIC_URL }}js/angular.min.js"></script>
+                            <script src="{{ STATIC_URL }}js/angular-resource.min.js"></script>
+                            <script src="{{ STATIC_URL }}js/faq.js"></script>
+                        {% endif %}
+                        <h2 class="title">Do you have a Question?</h2>
+                        <h3 class="subtitle">With any luck, we already have an answer for you.</h3>
+                        <div class="faq-search">
+                            <div class="faq-search-input-area">
+                                <form method="#">                   
+                                    <input ng-model="userq" type="text" id="id_faq_search" name="faqSearch" placeholder="Type a Keyword to Search our FAQ">
+                                </form>
+                            </div><!-- / faq search input area -->
+                            <div class="search-wrapper">
+                                <div class="faq-questions main-panel">
+
+                                    {% verbatim %}
+                                    <div class="faq-cat" data-id="1" ng-controller="FAQCtrl">
+                                        <div class="faq-questions-header">
+                                            <!--<a href="#" class="faq-back">Back</a>-->
+                                            <h4 ng-show="userq">Search results for <em>{{ userq }}</em></h4>
+                                        </div><!-- / faq questions header -->
+                                        <ul class="faq-questions-list">
+                                            <li ng-repeat="faq in questions.objects | filter:userq" data-toggle="collapse" data-target="#answer-text-{{ faq.id }}" class="accordion-question accordion_closed" ng-click="faq.selected=!faq.selected" ng-class="{ 'accordion_open' : faq.selected }">
+                                                <span class="question-text">{{ faq.post_title }}</span>
+                                                <div class="collapse answer-text" id="answer-text-{{ faq.id }}" ng-bind-html-unsafe="faq.post_content"></div>
+                                            </li>
+
+                                        </ul>
+                                    </div><!-- / faq-cat -->
+                                    {% endverbatim %}
+
+                                    <!-- Reactive once categories are available.
+                                    <div class="faq-questions-header">
+                                        <h4>See popular questions about...</h4>
+                                    </div>--><!-- / faq questions header -->
+                                    <!--
+                                    <ul class="faq-categories">
+                                        <li><a href="#" data-id="1">Nutrition</a></li>
+                                        <li><a href="#" data-id="2">Low-Fat Cooking</a></li>
+                                        <li><a href="#" data-id="3">Substitutions</a></li>
+                                        <li><a href="#" data-id="4">All FAQs</a></li>
+                                    </ul>
+                                -->
+                                </div>
                     
-                    <div class="faq-questions detail-panel">
-                        {% verbatim %}
-                        <div class="faq-cat" data-id="1" ng-controller="FAQCtrl">
-                            <div class="faq-questions-header">
-                                <a href="#" class="faq-back">Back</a>
-                                <h4>About Nutrition</h4>
-                            </div><!-- / faq questions header -->
-                            <ul class="faq-questions-list">
-                                <li ng-repeat="faq in questions.objects | filter:userq" data-toggle="collapse" data-target="#answer-text-{{ faq.id }}" class="accordion-question accordion_closed" ng-click="faq.selected=!faq.selected" ng-class="{ 'accordion_open' : faq.selected }">
-                                    <span class="question-text">{{ faq.post_title }}</span>
-                                    <div class="collapse answer-text" id="answer-text-{{ faq.id }}" ng-bind-html-unsafe="faq.post_content"></div>
-                                </li>
-                                
-                            </ul>
-                        </div><!-- / faq-cat -->
-                        {% endverbatim %}
+                                <div class="faq-questions detail-panel">
+
+                                    <!-- Move angular app back here when categories are ready. -->
                         
-                        <div class="faq-cat" data-id="2">
-                            <div class="faq-questions-header">
-                                <a href="#" class="faq-back">Back</a>
-                                <h4>About Low-Fat Cooking</h4>
-                            </div><!-- / faq questions header -->
-                            <ul class="faq-questions-list">
-                                <li data-toggle="collapse" data-target="#answer-text-4" class="accordion-question accordion_closed"><span class="question-text">Example of a question might go here?</span>
-                                    <div class="collapse answer-text" id="answer-text-4">
-                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis varius lectus eu orci euismod at cursus est vestibulum. Sed sit amet sapien sit amet odio dictum ullamcorper in eu ipsum. In hac habitasse platea dictumst.</p>
-                                        <p>Nunc ante ipsum, interdum ac semper ut, mollis a nibh. Duis porta feugiat est, et accumsan purus sollicitudin ac. Maecenas adipiscing quam faucibus ligula fringilla a convallis magna egestas. Nullam vitae porttitor arcu. Donec sed adipiscing metus.</p>
-                                        <p>Vestibulum dapibus tempus odio nec dictum. Curabitur placerat cursus leo id euismod. Ut at massa.</p>
-                                    </div>
-                                </li>
-                                
-                                <li data-toggle="collapse" data-target="#answer-text-5" class="accordion-question accordion_closed"><span class="question-text">Another example question in this category?</span>
-                                    <div class="collapse answer-text" id="answer-text-5">
-                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis varius lectus eu orci euismod at cursus est vestibulum. Sed sit amet sapien sit amet odio dictum ullamcorper in eu ipsum. In hac habitasse platea dictumst.</p>
-                                        <p>Nunc ante ipsum, interdum ac semper ut, mollis a nibh. Duis porta feugiat est, et accumsan purus sollicitudin ac. Maecenas adipiscing quam faucibus ligula fringilla a convallis magna egestas. Nullam vitae porttitor arcu. Donec sed adipiscing metus.</p>
-                                        <p>Vestibulum dapibus tempus odio nec dictum. Curabitur placerat cursus leo id euismod. Ut at massa.</p>
-                                    </div>
-                                </li>
-                                
-                                <li data-toggle="collapse" data-target="#answer-text-6" class="accordion-question accordion_closed"><span class="question-text">Don't forget to dynamically generate CSS ids?</span>
-                                    <div class="collapse answer-text" id="answer-text-6">
-                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis varius lectus eu orci euismod at cursus est vestibulum. Sed sit amet sapien sit amet odio dictum ullamcorper in eu ipsum. In hac habitasse platea dictumst.</p>
-                                        <p>Nunc ante ipsum, interdum ac semper ut, mollis a nibh. Duis porta feugiat est, et accumsan purus sollicitudin ac. Maecenas adipiscing quam faucibus ligula fringilla a convallis magna egestas. Nullam vitae porttitor arcu. Donec sed adipiscing metus.</p>
-                                        <p>Vestibulum dapibus tempus odio nec dictum. Curabitur placerat cursus leo id euismod. Ut at massa.</p>
-                                    </div>
-                                </li>
-                            </ul>
-                        </div><!-- / faq-cat -->
+                                </div>
+                            </div><!-- /search-wrapper -->
+                        </div><!-- / faq search -->
 
-                        <div class="faq-cat" data-id="3">
-                            <div class="faq-questions-header">
-                                <a href="#" class="faq-back">Back</a>
-                                <h4>About Substitutions</h4>
-                            </div><!-- / faq questions header -->
-                            <ul class="faq-questions-list">
-                                <li data-toggle="collapse" data-target="#answer-text-7" class="accordion-question accordion_closed"><span class="question-text">Example of a question might go here?</span>
-                                    <div class="collapse answer-text" id="answer-text-7">
-                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis varius lectus eu orci euismod at cursus est vestibulum. Sed sit amet sapien sit amet odio dictum ullamcorper in eu ipsum. In hac habitasse platea dictumst.</p>
-                                        <p>Nunc ante ipsum, interdum ac semper ut, mollis a nibh. Duis porta feugiat est, et accumsan purus sollicitudin ac. Maecenas adipiscing quam faucibus ligula fringilla a convallis magna egestas. Nullam vitae porttitor arcu. Donec sed adipiscing metus.</p>
-                                        <p>Vestibulum dapibus tempus odio nec dictum. Curabitur placerat cursus leo id euismod. Ut at massa.</p>
-                                    </div>
-                                </li>
-                                
-                                <li data-toggle="collapse" data-target="#answer-text-8" class="accordion-question accordion_closed"><span class="question-text">Another example question in this category?</span>
-                                    <div class="collapse answer-text" id="answer-text-8">
-                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis varius lectus eu orci euismod at cursus est vestibulum. Sed sit amet sapien sit amet odio dictum ullamcorper in eu ipsum. In hac habitasse platea dictumst.</p>
-                                        <p>Nunc ante ipsum, interdum ac semper ut, mollis a nibh. Duis porta feugiat est, et accumsan purus sollicitudin ac. Maecenas adipiscing quam faucibus ligula fringilla a convallis magna egestas. Nullam vitae porttitor arcu. Donec sed adipiscing metus.</p>
-                                        <p>Vestibulum dapibus tempus odio nec dictum. Curabitur placerat cursus leo id euismod. Ut at massa.</p>
-                                    </div>
-                                </li>
-                                
-                                <li data-toggle="collapse" data-target="#answer-text-9" class="accordion-question accordion_closed"><span class="question-text">Don't forget to dynamically generate CSS ids?</span>
-                                    <div class="collapse answer-text" id="answer-text-9">
-                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis varius lectus eu orci euismod at cursus est vestibulum. Sed sit amet sapien sit amet odio dictum ullamcorper in eu ipsum. In hac habitasse platea dictumst.</p>
-                                        <p>Nunc ante ipsum, interdum ac semper ut, mollis a nibh. Duis porta feugiat est, et accumsan purus sollicitudin ac. Maecenas adipiscing quam faucibus ligula fringilla a convallis magna egestas. Nullam vitae porttitor arcu. Donec sed adipiscing metus.</p>
-                                        <p>Vestibulum dapibus tempus odio nec dictum. Curabitur placerat cursus leo id euismod. Ut at massa.</p>
-                                    </div>
-                                </li>
-                            </ul>
-                        </div><!-- / faq-cat -->
+                        <div ng-hide="checked">
+                            <h3 class="subtitle">Do you still need to email Lindsay?</h2>
+                            <div class="askcontact">
+                                <label for="yescontact" class="yescontact">Yes</label>
+                                <input id="yescontact" type="checkbox" ng-model="checked">
+                            </div>
+                        </div>
 
-                        <div class="faq-cat" data-id="4">
-                            <div class="faq-questions-header">
-                                <a href="#" class="faq-back">Back</a>
-                                <h4>About Just Getting Started</h4>
-                            </div><!-- / faq questions header -->
-                            <ul class="faq-questions-list">
-                                <li data-toggle="collapse" data-target="#answer-text-10" class="accordion-question accordion_closed"><span class="question-text">Example of a question might go here?</span>
-                                    <div class="collapse answer-text" id="answer-text-10">
-                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis varius lectus eu orci euismod at cursus est vestibulum. Sed sit amet sapien sit amet odio dictum ullamcorper in eu ipsum. In hac habitasse platea dictumst.</p>
-                                        <p>Nunc ante ipsum, interdum ac semper ut, mollis a nibh. Duis porta feugiat est, et accumsan purus sollicitudin ac. Maecenas adipiscing quam faucibus ligula fringilla a convallis magna egestas. Nullam vitae porttitor arcu. Donec sed adipiscing metus.</p>
-                                        <p>Vestibulum dapibus tempus odio nec dictum. Curabitur placerat cursus leo id euismod. Ut at massa.</p>
-                                    </div>
-                                </li>
-                                
-                                <li data-toggle="collapse" data-target="#answer-text-11" class="accordion-question accordion_closed"><span class="question-text">Another example question in this category?</span>
-                                    <div class="collapse answer-text" id="answer-text-11">
-                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis varius lectus eu orci euismod at cursus est vestibulum. Sed sit amet sapien sit amet odio dictum ullamcorper in eu ipsum. In hac habitasse platea dictumst.</p>
-                                        <p>Nunc ante ipsum, interdum ac semper ut, mollis a nibh. Duis porta feugiat est, et accumsan purus sollicitudin ac. Maecenas adipiscing quam faucibus ligula fringilla a convallis magna egestas. Nullam vitae porttitor arcu. Donec sed adipiscing metus.</p>
-                                        <p>Vestibulum dapibus tempus odio nec dictum. Curabitur placerat cursus leo id euismod. Ut at massa.</p>
-                                    </div>
-                                </li>
-                                
-                                <li data-toggle="collapse" data-target="#answer-text-12" class="accordion-question accordion_closed"><span class="question-text">Don't forget to dynamically generate CSS ids?</span>
-                                    <div class="collapse answer-text" id="answer-text-12">
-                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis varius lectus eu orci euismod at cursus est vestibulum. Sed sit amet sapien sit amet odio dictum ullamcorper in eu ipsum. In hac habitasse platea dictumst.</p>
-                                        <p>Nunc ante ipsum, interdum ac semper ut, mollis a nibh. Duis porta feugiat est, et accumsan purus sollicitudin ac. Maecenas adipiscing quam faucibus ligula fringilla a convallis magna egestas. Nullam vitae porttitor arcu. Donec sed adipiscing metus.</p>
-                                        <p>Vestibulum dapibus tempus odio nec dictum. Curabitur placerat cursus leo id euismod. Ut at massa.</p>
-                                    </div>
-                                </li>
-                            </ul>
-                        </div><!-- / faq-cat -->
-                        
-                    </div>
-                </div><!-- /search-wrapper -->
-            </div><!-- / faq search -->
-            <h3 class="subtitle">Still need to contact Lindsay?</h2>
-            <form action="/about/contact/" method="post">
-                {% csrf_token %}
-                <hr style="clear:both;">
-                <p style="clear:both;">
-                    <h4 class="contactlindsay">Still need to Contact Lindsay?</h4>
-                    <textarea id="id_message" rows="10" cols="40" name="message" class="span5" placeholder="Type your message here..."></textarea>
-                </p>
-                <p>
-                    <span class="add-on"><i class="icon-user"></i></span> 
-                    <input type="text" name="name" id="id_name" placeholder="Name">
-                </p>
-                <p>
-                    <i class="icon-envelope"></i> 
-                    <input type="text" name="email" id="id_email" placeholder="Email">
-                </p>
-                <input type="submit" value="Send Email">
-            </form>
-        </div>
+                        {% load crispy_forms_tags %}
+                        <div ng-show="checked">
+                            {% crispy form %}
+                        </div>
 
-    </div>
-  </div>
-
-  </div><!-- / outer-wrapper -->
-
+                    </div> <!-- span7 -->
+                </div> <!-- row -->
+            </div> <!-- / wrapper-box -->
+        </div> <!-- container -->
+    </div><!-- / outer-wrapper -->
 </div> <!-- / content -->
 
 {% endblock %}

File article/templates/theme_base.html

         
     
     {% block extra_body_base %}
-    <script src="//css.happyherbivore.com/bootstrap204/js/bootstrap.min.js"></script>
+        <script src="//css.happyherbivore.com/bootstrap204/js/bootstrap.min.js"></script>
         {% block extra_body %}{% endblock %}
+        <script type="text/javascript">
         $(document).ready(function(){
         {% block onready %}{% endblock %}
         });
+        </script>
     {% endblock %}
 
     {% gblock 13 for "gblocks.Text" into "viglink" %}