mason/help/contact.mas

   1 <%args>
   2 $contact_form_human_answer => ''
   3 $contact_form_human_question => ''
   4 $website_name => ''
   5 $email_address_to_display => ''
   6 </%args>
   7
   8 <& "/page/page_title.mas", title => "Contact $website_name" &>
   9
  10 <div class="container-fluid">
  11     <div class="well">
  12
  13     <div id="contact_form_return_message">
  14     </div>
  15
  16 % #The form
  17   <form class="form-horizontal" name="contactForm">
  18
  19 % #Uses Perl to print out the fields with similar HTML tags
  20 <%perl>
  21 my $infoNeeded = ["name", "email", "subject", ];
  22 </%perl>
  23
  24 % foreach my $info_category (@$infoNeeded) {
  25     <div class="form-group">
  26       <label class="col-sm-2 control-label"><% ucfirst $info_category %>* :
  27       </label>
  28       <div class="col-sm-10">
  29         <input type="text" class="form-control" value="" name="<% $info_category %>"></input>
  30       </div>
  31     </div>
  32 % }
  33
  34     <div class="form-group">
  35       <label class="col-sm-2 control-label">Body* :
  36       </label>
  37       <div class="col-sm-10">
  38         <textarea rows="12" class="form-control" name="body"></textarea>
  39       </div>
  40     </div>
  41     <div class="form-group">
  42       <label class="col-sm-2 control-label">What is <br/><% $contact_form_human_question %>?* :
  43       </label>
  44       <div class="col-sm-10">
  45         <input type="text" class="form-control" value="" name="contact_form_human_answer"></input>
  46       </div>
  47     </div>
  48     <div class="form-group">
  49       <label class="col-sm-2 control-label"></label>
  50       <div class="col-sm-10">
  51         <h5 valign="middle" style="color:red; font-size:90%; font-style:italic;">Fields Marked With <% '"*"' |h %> Are Required.</h5>
  52       </div>
  53     </div>
  54     <hr>
  55     <button style="float:right" type="submit" class="btn btn-primary btn-lg" id="contact_form_submit">Submit</button>
  56     <br/><br/>
  57
  58   </form>
  59   </div>
  60
  61   <br/>
  62   <h2>Contact Us</h2>
  63   <br/>
  64   <table class="table table-hover table-bordered">
  65      <tbody>
  66       <tr>
  67         <td><b>Email</b></td>
  68         <td>Note that the contact email address <% $email_address_to_display %> has been deactivated due to extreme levels of spam. <br/>Use this contact form instead.</td>
  69       </tr>
  70       <tr>
  71         <td><b>Mailing Address</b></td>
  72         <td>Sol Genomics Network<br />
  73         Boyce Thompson Institute for Plant Research<br />
  74         Room 221<br />
  75         Tower Road<br />
  76         Ithaca, NY 14853<br />
  77         USA<br /></td>
  78       </tr>
  79       <tr>
  80         <td><b>Phone</b></td>
  81         <td>(607) 255-6557</td>
  82       </tr>
  83       <tr>
  84         <td><b>Mailing List</b></td>
  85         <td>To stay informed of developments at SGN you can subscribe to our <a href="http://rubisco.sgn.cornell.edu/mailman/listinfo/sgn-announce/">mailing list</a>. <br/>This is a low-volume list (usually no more than 2 messages per month).</td>
  86       </tr>
  87     </tbody>
  88   </table>
  89
  90   </div>
  91 </div>
  92
  93 <div class="modal fade" id="submit_contact_form_response" name="submit_contact_form_response" tabindex="-1" role="dialog" aria-labelledby="submitContactResponseDialog">
  94     <div class="modal-dialog" role="document">
  95         <div class="modal-content">
  96             <div class="modal-header" style="text-align: center">
  97                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  98                 <h4 class="modal-title" id="submitContactResponseDialog">Contact Form</h4>
  99             </div>
 100             <div class="modal-body">
 101                 <div class="container-fluid">
 102                     <div id="submit_contact_form_response_message">
 103                     </div>
 104                 </div>
 105             </div>
 106             <div class="modal-footer">
 107                 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 108             </div>
 109         </div>
 110     </div>
 111 </div>
 112
 113 <script>
 114
 115 jQuery(document).ready(function () {
 116
 117     jQuery('#contact_form_submit').on('click',function (e){
 118         var subject = jQuery('input[name="subject"]').val();
 119         var name = jQuery('input[name="name"]').val();
 120         var email = jQuery('input[name="email"]').val();
 121         var body = jQuery('textarea[name="body"]').val();
 122         var challenge_answer = jQuery('input[name="contact_form_human_answer"]').val();
 123         if (challenge_answer != <% $contact_form_human_answer %>){
 124             jQuery('#submit_contact_form_response_message').html("Please prove you are a human by answering the simple math question.");
 125             jQuery('#submit_contact_form_response').modal('show');
 126         } else if (subject == '' || !subject){
 127             jQuery('#submit_contact_form_response_message').html("Subject is required. Please fill in this field.");
 128             jQuery('#submit_contact_form_response').modal('show');
 129         } else if (name == '' || !name){
 130             jQuery('#submit_contact_form_response_message').html("Name is required. Please fill in this field.");
 131             jQuery('#submit_contact_form_response').modal('show');
 132         } else if (email == '' || !email){
 133             jQuery('#submit_contact_form_response_message').html("Email is required. Please fill in this field.");
 134             jQuery('#submit_contact_form_response').modal('show');
 135         } else if (body == '' || !body){
 136             jQuery('#submit_contact_form_response_message').html("Body is required. Please fill in this field.");
 137             jQuery('#submit_contact_form_response').modal('show');
 138         } else {
 139             jQuery.ajax ( {
 140                 url : '/ajax/contact/submit',
 141                 type: "POST",
 142                 beforeSend: function(){
 143                     jQuery('#working_modal').modal('show');
 144                 },
 145                 data: {
 146                     "title": subject,
 147                     "body": body + '\n\nFrom: ' + name + '\nEmail: ' + email,
 148                     "security_answer": <% $contact_form_human_answer %>,
 149                     "security_attempt": challenge_answer
 150                 },
 151                 success: function(response){
 152                     //console.log(response);
 153                     jQuery('#working_modal').modal('hide');
 154                     var html = '';
 155                     var html_return;
 156                     if (response.error){
 157                         html = response.error;
 158                         html_return = '<div class="panel panel-danger"><div class="panel-heading">Error</div><div class="panel-body">'+html+'</div></div>';
 159                     } else {
 160                         html = "Thank you for your message. We will reply as soon as possible.";
 161                         html_return = '<div class="panel panel-success"><div class="panel-heading">Success</div><div class="panel-body">'+html+'</div></div>';
 162                     }
 163                     jQuery('#contact_form_return_message').html(html_return);
 164                     jQuery('#submit_contact_form_response_message').html(html);
 165                     jQuery('#submit_contact_form_response').modal('show');
 166                 },
 167                 error: function(response){
 168                     console.log(response);
 169                     jQuery('#working_modal').modal('hide');
 170                     var html = "Error posting message! Please contact us. : "+response;
 171                     var html_return = '<div class="panel panel-danger"><div class="panel-heading">Error</div><div class="panel-body">'+html+'</div></div>';
 172                     jQuery('#contact_form_return_message').html(html_return);
 173                     jQuery('#submit_contact_form_response_message').html(html);
 174                     jQuery('#submit_contact_form_response').modal('show');
 175                 }
 176             });
 177         }
 178         e.preventDefault();
 179     });
 180
 181 });
 182
 183 </script>