Mobile Help Center Template with Email Form

01 - Instructions

Using the following template components in the mobile template, you can add the ability to submit requests from your mobile help center.

If you are interested in using this template, please contact [email protected] and let them know so they can enable an extra feature that will allow you to use this.  There is no fee for the feature, but we need to know.



To install template:
1.In the "Channel" section of the Admin, enable "Mobile Template" located in the "Support Center" configuration under the "Advanced Settings"

2. Create a New Mobile Template

3. Replace the content of the Header section of the template with the Header.html below

4. Replace the content of the Body section of the template with the Body.html below

5. Modify the colors and text in the assigned variables at the top of Header template section

02 - Header.html

{% assign Title = "Help Center" %}

{% assign HeaderTextColor = "white" %}
{% assign HeaderTextShadow = "0 1px rgba(0,0,0,.5)" %}
{% assign HeaderBackgroundColor = "#ACACAC" %}
{% assign BodyTextColor = "#392e21" %}
{% assign BodyBackgroundColor = "#f3f3f3" %}

<script>
$(function() {
  $('#q').focus(function() {
    $('#home-icon').hide();
    $(this).css("position", "absolute");
    $(this).css("width", "auto");
    $(this).css("left", "0");
    $(this).css("right", "0");
  });
  $('#q').blur(function() {
    $('#home-icon').show();
    $(this).css("position", "relative");
    $(this).css("width", "90px");
    $(this).css("left", "auto");
    $(this).css("right", "0");
  });
  
});
</script>


<script src="https://d3jyn100am7dxp.cloudfront.net/rb92d82246fd2286b4d10bed3772a68873777fe8a/assets/js_core.jsgz?1346651681" type="text/javascript"></script>
    <script src="https://d3jyn100am7dxp.cloudfront.net/rb92d82246fd2286b4d10bed3772a68873777fe8a/assets/customer_widget_libraries.jsgz?1346651681" type="text/javascript"></script>
    <script src="https://d3jyn100am7dxp.cloudfront.net/rb92d82246fd2286b4d10bed3772a68873777fe8a/assets/portal_libraries.jsgz?1346651681" type="text/javascript"></script>
<script type="text/javascript" src="https://d3jyn100am7dxp.cloudfront.net/rb92d82246fd2286b4d10bed3772a68873777fe8a/javascripts/portal/desk.portal.body.email_new.js"></script>

<script type="text/javascript" charset="utf-8">
  $("link[href*='portal_mobile.cssgz']").remove();
  $(document).ready(function() {
    var q = $("#q");
    q.attr("placeholder", "Search");
    q.before('<a id="home-icon" href="{{ main_url }}">{{ Title }}</a>');
    var windowWidth = $(window).width();
   $("#rate_article span").text("Was this helpful?");
    $(window).load(function() {
      $(".article img").each(function() {
        if ($(this).width() > (windowWidth * .75)) {
          $(this).addClass("scale-to-window");
        };
      });
    });
  });
</script>
<meta name="viewport" content="width=device-width, user-scalable=no" />
{% if page == "page_topic_list" %}
  <title>{{site.company_name}} | FAQ</title>
{% elsif page == "page_search_result" %}
  <title>{{site.company_name}} | Search Results</title>
{% elsif page == "page_topic_article_list" %}
  <title>{{site.company_name}} | {{ topic.name }}</title>
{% elsif page == "page_article" %}
  <title>{{site.company_name}} | {{ article.subject_plain_extra_short }}</title>
{% endif %}

<style>
*
{
  box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  margin:0;
  padding:0;
}
  
img, embed, object, iframe {
  width: 100%;  
}

body
{
  font:normal 16px/20px "helvetica neue",helvetica,arial,hirakakupro-w3,osaka,"ms pgothic",sans-serif;
  background: {{ BodyBackgroundColor }};
  color: {{ BodyTextColor }};
  -webkit-font-smoothing:antialiased;
  min-height:480px;
}

a:link,a:visited
{
  color:#2d81c5;
  text-decoration:underline;
}

br
{
  display:none;
}

p br,li br
{
  display:inline;
}

p,li
{
  margin-bottom:20px;
}

label
{
  font-size:14px;
}

hr
{
  border:none;
  background:transparent url(PaperTableSeparator.png) repeat-x bottom left;
  height:3px;
  margin:20px 0;
}

h1
{
  font-size:20px;
  margin:10px 0;
}

.title a, .article-title a {
  color: white;
  text-decoration: none;
}

.title
{
  margin:0;
  padding:3px 15px;
  font-size:14px;
  background:rgba(0,0,0,0.7);
  color:#fff;
}

.article-title
{
  margin:0;
  padding:3px 15px;
  font-size:14px;
  background:rgba(0,0,0,0.7);
  color:#fff;
}

h2
{
  font-size:18px;
  margin:0 0 10px;
}

input,select,textarea,label
{
  display:block;
  width:100%;
}

input.default,select,textarea
{
  margin-bottom:15px;
  font-size:16px;
}

.default,textarea,input.default
{
  padding:4px 6px;
  border:1px solid #8a8a8a;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
}

textarea
{
  height:148px;
}

input.default:focus,textarea:focus
{
  border-color:#73bdfa;
}

input.default.invalid,select.invalid,textarea.invalid
{
  border:2px solid #f90;
}

label.invalid
{
  margin: 15px 0 10px;
  color:#f90;
  font-weight:bold;
}

#header
{
  background:#e5e5e5;
}

#header.solo
{
  border-bottom:1px solid #9e7b55;
}

#header a
{
  display:block;
  padding:12px;
  font-weight:bold;
  font-size:18px;
  color:#392e21;
  text-align:center;
  text-decoration:none;
  text-shadow:0 1px rgba(255,255,255,0.3);
}

#questionblock
{
  position:relative;
  background: {{ HeaderBackgroundColor }};
  height:50px;
  text-align:center;
  padding:10px 0 0;
}

#questionblock .question_image
{
  display:none;
}

#home-icon
{
  float: left; 
  text-align: left;
  margin: 5px 15px;
  display:block;
  height:29px;
  text-decoration: none; 
  color: {{ HeaderTextColor }};
  text-shadow: {{ HeaderTextShadow }};
  font-weight: bold;
  font-size: 1.5em;
}
  
::-webkit-input-placeholder  {
  color:rgba(255,255,255,.5); 
}
input:-moz-placeholder { 
  color:rgba(255,255,255,.5); 
}

#q
{
  -webkit-appearance: none;
  background: rgba(0,0,0,.10);
  color: {{ HeaderTextColor }} !important;
  border: 0;
  float: right; 
  margin: 0 10px;
  width:90px;
  height:29px;
  -webkit-border-radius:14px;
  -moz-border-radius:14px;
  border-radius:14px;
  padding:0 10px;
  font-size:14px;
  -moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,0.4),inset 0 2px 1px 0 rgba(0,0,0,0.2),inset 0 2px 3px 0 rgba(0,0,0,0.2),0 1px 0 0 rgba(255,255,255,0.5);
  -webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,0.4),inset 0 2px 1px 0 rgba(0,0,0,0.2),inset 0 2px 3px 0 rgba(0,0,0,0.2),0 1px 0 0 rgba(255,255,255,0.5);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.4),inset 0 2px 1px 0 rgba(0,0,0,0.2),inset 0 2px 3px 0 rgba(0,0,0,0.2),0 1px 0 0 rgba(255,255,255,0.5);
}

#q:focus
{
  outline:none;
  
}

#examples,#question_space
{
  display:none!important;
}

#content
{
  padding:15px;
}

.article
{
  padding:10px 15px;
}

.article ul,.article ol
{
  list-style-position:inside;
}

img.scale-to-window
{
  width:100%!important;
  height:auto!important;
}

.content-list li
{
  position:relative;
  margin:0;
  background:rgba(0,0,0,0.02);
  border-bottom:1px solid rgba(0,0,0,0.1);
}

.content-list a
{
  display:block;
  color:#52585d;
  font-weight:500;
}

.content-list a:link,.content-list a:visited
{
  color:#52585d;
  display:block;
  padding:15px 40px 15px 15px;
  text-shadow:0 1px rgba(255,255,255,0.3);
  text-decoration:none;
}

.content-list a::after
{
  content:" ";
  position:absolute;
  right:4px;
  top:0;
  background:url(Disclosure-Arrow.png) no-repeat center left;
  width:20px;
  height:100%;
}

#email_submit
{
  margin-top:25px;
}

#paginate_block
{
  background:rgba(0,0,0,0.2);
  text-align:center;
}

#results_string
{
  font-size:13px;
  padding:5px 15px 0;
  color:#52585d;
}

.pagination
{
  height:auto;
  font-weight:bold;
  padding:10px 15px;
}

.pagination a,.pagination span
{
  padding:0 10px;
  text-transform:capitalize;
}

.pagination a:link,.pagination a:visited
{
  color:#52585d;
  text-decoration:none;
}

.pagination span
{
  color:#858b90;
}

a.prev_page,span.prev_page
{
  padding-right:5px;
  -webkit-border-top-left-radius:10px;
  -moz-border-radius-topleft:10px;
  border-top-left-radius:10px;
  -webkit-border-bottom-left-radius:10px;
  -moz-border-radius-bottomleft:10px;
  border-bottom-left-radius:10px;
}

a.next_page,span.next_page
{
  padding-left:5px;
  -webkit-border-top-right-radius:10px;
  -moz-border-radius-topright:10px;
  border-top-right-radius:10px;
  -webkit-border-bottom-right-radius:10px;
  -moz-border-radius-bottomright:10px;
  border-bottom-right-radius:10px;
}

#rate_article
{
  background:rgba(0,0,0,0.2);
  font-size:12px;
  font-weight:bold;
  margin:0;
  padding:5px 15px;
  text-align:center;
}

#rate_article a:link,#rate_article a:visited
{
  font-weight:bold;
  color:#392e21;
  text-decoration:none;
}

#assistly
{
  color:#ddd;
  font-size:10px;
  text-align:center;
  padding:0 5px 5px;
}

#assistly a
{
  color:#ddd;
  text-decoration:none;
}

a.button,input.button
{
  display:block;
  background:#999;
  background:0;
  background:0 color-stop(0.5,#dadce0), color-stop(0.51,#e4e5e9), color-stop(1,#fdfdfd));
  padding:11px 10px;
  color:#52585d;
  text-align:center;
  -webkit-border-radius:6px;
  -moz-border-radius:6px;
  border-radius:6px;
  -webkit-border-radius:9px;
  font-size:18px;
  font-weight:bold;
  text-decoration:none!important;
  text-shadow:0 1px 0 rgba(255,255,255,0.75);
  -moz-box-shadow:0 0 0 1px #a7afb5 inset,0 0 1px 2px rgba(255,255,255,0.2) inset,0 1px 2px rgba(255,255,255,0.5);
  -webkit-box-shadow:0 0 0 1px #a7afb5 inset,0 0 1px 2px rgba(255,255,255,0.2) inset,0 1px 2px rgba(255,255,255,0.5);
  box-shadow:0 0 0 1px #a7afb5 inset,0 0 1px 2px rgba(255,255,255,0.2) inset,0 1px 2px rgba(255,255,255,0.5);
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}
  
a.button {
  background: white;
}

a.button.active,input.button.active
{
  background:0;
  background:0 color-stop(0.5,#a3a8b2), color-stop(0.51,#acafbb), color-stop(1,#cacaca));
}

a.button.active,input.button.active
{
  color:#52585d;
}

a.button:disabled,a.button.disabled,input.button:disabled,input.button.disabled
{
  color:#cdcdd0!important;
  text-shadow:none!important;
  cursor:default!important;
  background:#999!important;
  background:0!important;
  background:0 color-stop(0.5,#dadce0), color-stop(0.51,#e4e5e9), color-stop(1,#fdfdfd))!important;
  -moz-box-shadow:0 0 0 1px #a7afb5 inset,0 0 1px 2px rgba(255,255,255,0.2) inset,0 1px 2px rgba(255,255,255,0.5)!important;
  -webkit-box-shadow:0 0 0 1px #a7afb5 inset,0 0 1px 2px rgba(255,255,255,0.2) inset,0 1px 2px rgba(255,255,255,0.5)!important;
  box-shadow:0 0 0 1px #a7afb5 inset,0 0 1px 2px rgba(255,255,255,0.2) inset,0 1px 2px rgba(255,255,255,0.5)!important;
}

a.primary,input.primary
{
  background:#3676b6;
  background:0;
  background:0 color-stop(0.5,#1c41c3), color-stop(0.51,#375edd), color-stop(1,#77acf2));
  color:#fff;
  text-shadow:0 -1px 0 rgba(0,0,0,0.5);
  -moz-box-shadow:0 0 0 1px #2b4575 inset,0 0 1px 2px rgba(255,255,255,0.2) inset,0 1px 2px rgba(255,255,255,0.5);
  -webkit-box-shadow:0 0 0 1px #2b4575 inset,0 0 1px 2px rgba(255,255,255,0.2) inset,0 1px 2px rgba(255,255,255,0.5);
  box-shadow:0 0 0 1px #2b4575 inset,0 0 1px 2px rgba(255,255,255,0.2) inset,0 1px 2px rgba(255,255,255,0.5);
}

a.primary.active,input.primary.active
{
  background:0;
  background:0 color-stop(0.5,#0f236a), color-stop(0.51,#193695), color-stop(1,#1a73e9));
}

a.primary.active,input.primary.active
{
  color:#fff;
}
  
.contact input[type="text"], .contact textarea, .contact input[type="select"], .contact textarea {
  padding: 5px;
  font-size: 14px;
  font-family: 'Verdana', sans-serif !important;
  border: 2px #CCC solid !important;
  background-color: white !important;
  -moz-border-radius: 7px;
  border-radius: 7px;
  border-image: initial;
  width: 267px !important;
  margin-bottom: 10px;
}
  
input:focus,
select:focus,
textarea:focus {
    outline: none !important;
}
  
.link-button {
  width: 267px !important;
}

.contact select {
  font-size: 14px;
  font-family: 'Verdana', sans-serif !important;
  width: 267px !important;
  border: auto !important;
}
</style>

03 - Body.html

{% assign HomePageName = "Help Home" %}

<script>
  $.getUrlVar = function() { return ''; } // override hardcoded call to a non-existant function
  $.fn.DefaultValue = function() { return ''; } // override hardcoded call to a non-existant function
</script>

<div id="questionblock2"><div id="questionblock1"><div id="questionblock">
  <form accept-charset="UTF-8" action="/customer/portal/articles/search" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"></div>
      <input id="q" maxlength="100" name="q" type="text" value="" placeholder="Search" class="questionblock_blur">
      <input class="question_image" type="submit" value="">
</form></div></div></div>

{% if page == "page_topic_list" %}
  <h1 class="title">
    {{ HomePageName }}
  </h1>
  <ul class="content-list">
    {% for topic in topics %}
      <li class="kb_topic_name">
        <a href="{{ topic.public_url }}" class="kb_topic_a">{{ topic.name }}</a>
      </li>
    {% endfor %}
  </ul>

{% elsif page == "page_search_result" %}
  <script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
      var q = $('<textarea/>').html("{{ search_term }}").val();
      $("#q").val(q);
    });
  </script>
  <h1 class="title">
    {{ number_search_results }} Search {% if number_search_results == 1 %}Result{% else %}Results{% endif %}
  </h1>
  {% if number_search_results > 0 %}
    <ul class="content-list">
      {% for article in search_result_articles %}
      <li class="kb_article_name">
        <a href="{{ article.public_url }}" class="kb_article_a">{{ article.subject_plain }}</a>
      </li>
      {% endfor %}
    </ul>
  {% endif %}
  {{ more_search_block }}

{% elsif page == "page_topic_article_list" %}
  <h1 class="title">
    <a href="{{ home_link }}">{{ HomePageName }}</a> &rarr; {{ topic.name }}
  </h1>
  <ul class="content-list">
    {% for article in articles %}
      <li class="kb_article_name">
        <a href="{{ article.public_url }}" class="kb_article_a">{{ article.subject_plain }}</a>
      </li>
    {% endfor %}
  </ul>

  {{ more_article_block }}

{% elsif page == "page_article" %}
  <h1 class="article-title">
    <a href="{{ home_link }}">{{ HomePageName }}</a> &rarr; <a href="{{ topic.public_url }}">{{ topic.name }}</a>
  </h1>
  <div class="article">
    <h2>{{ article.subject_plain }}</h2>
    {{ article.body_public }}
  </div>
  

<!-- insert email form -->
      {% elsif page == "email_new" %}
      
      
      <script type="text/javascript">
        //<![CDATA[
  $(document).ready(function()
  {

   
   //set height of spacer
    $('.frame-border-top').css('padding-top','0px');
    $('.frame-border-middle').css('padding-top','20px');
    $('.frame').css('margin-top','-20px');

    //$('.clear').css('background-color','#white');
    $('.clear').css('height','10px;');
    
  });

  //]]>
      </script>

<h1 class="article-title">
    <a href="{{ home_link }}">{{ HomePageName }}</a> &rarr; Contact
  </h1>
      
      
      
      <div class="contact_container" style="margin: 15px;">
        
        <div class="contact_outer">
          
          <div class="contact_inner" font face="helvetica neue" style="font-style:normal;">    
            
            
     
            
            <!--begin:email_new-->
            
            {{form_begin}}
            {% if current_user == nil or current_user.is_guest %}
            
            <!-- NEW FORM -->
            <div class="container contact">
              
              <div class="frame">
                <div class="frame-border-top"></div>
                <div class="frame-border-middle">
                  
                  <!-- Name -->              
                  <div>
                    
                    <label class="first">Name*:</label>
                    
                    
                    <input type="text" input value='{{interaction.name}}' name='interaction[name]' id='interaction_name' maxlength='100'/>
                    
                    <div class="clear"></div>
                  </div>
                  <!-- Email -->
                  <div>
                    
                    <label >Email*:</label>
                    
                    
                    <input value='{{interaction.email}}' id='interaction_email' maxlength='100' name='interaction[email]' type='text'  />
                    
                    
                    <div class="clear"></div>
                  </div>
                  
                  {% endif %}
                  
                  
                  <!-- Subject -->
                  
                  <div>
                    <label >Subject*:</label>
                    <input id="email_subject" name="email[subject]" value='{{interaction.subject}}'  maxlength='100' type='text'  />
                  </div>
                  <!-- Description -->
                  <div class="clear"></div>
                  <div>
                    <label >Your message*:</label>
                    <div class="textarea-wrapper">
                      <textarea id="email_body" name="email[body]">{{email.body}}</textarea>
                    </div>
                    
                    <div class="clear"></div>
                  </div>
                  
                  
                  <input id='email_submit' name='commit' type='submit' value='Send Email' class="link-button submit" />
                  <img alt='Ajax-loader-small' id='email_submit_spinner' src='{{ "/images/ajax-loader-small.gif" | portal_image_url: image_asset_host }}' style='display: none; margin: 7px 0 0 5px; position: absolute;' />                          
                  
                  <div class="clear"></div>
                  
                  <div class="frame-border-bottom"></div>
                </div>
                <!-- // END NEW Form -->
                
                {{form_end}}
                
                <script type='text/javascript'>
                  //<![CDATA[


    $(document).ready(function(){
        $('#new_email').attr('action','/customer/portal/emails');
        });

   $('#new_email').validate({
   submitHandler: function(form) {
     $('#email_submit').attr('disabled',true);
   $('#email_submit').addClass('disabled');
     $('#email_submit_spinner').show();
     form.submit();
      },
     messages:{
    'interaction[name]':{
    'required':'Name is required.'
     },
    'interaction[email]':{
    'required':'Email address is required.',
    'email':'Invalid email address'
     },
    'email[subject]':{
     'required':'Subject is required.'
     },
    'ticket[custom_inquiry_type]':{
     'required':'Inquiry Type is required.'
     },
    'ticket[custom2]':{
     'required':'Device Type is required.'
     },
    'email[body]':{
    'required':'Message is required.',
    'maxlength':'Exceeding max length of 5KB'
     }
     },
    rules:{
    'interaction[name]':{
    'required':true
    },
    'interaction[email]':{
    'required':true,
    'email':true
    },
    'email[subject]':{
    'required':true
    },
    'ticket[custom_inquiry_type]':{
    'required':true
    },
    'ticket[custom2]':{
    'required':true
    },
    'email[body]':{
    'required':true,
    'maxlength':5000,
    'invalidchars':''
    }
    },
    errorClass:'invalid'
    });
     //]]>
                </script>
                
              </div>
            </div>      
            
            
            <!--end:email_new-->
                     
{% elsif page == "email_submitted" %}
      <!--begin:email_submitted-->
      
      <h1 class="title">
        <a href="{{ home_link }}">{{ HomePageName }}</a>
  </h1>
  
        <div class="article">
          You email has been sent!
          <br><br>
          <a href="{{ home_link }}" class="button">Back to Home</a>
        </div>
                      
    <!--end:email_submitted-->
    
    
    
    <!-- end email form -->

{% endif %}
                      
{% unless page == "email_new" or page == "email_submitted" ||  %}
<p id="content">
  <a href="{{email_link}}" class="button">Email Support</a>
</p>
{% endunless %}


<script>
  $(document).ready(function(){
    setTimeout(function() { window.scrollTo(0, 1) }, 100);
    var $buttons = $(".button");
    $buttons.bind("touchstart mousedown", function() {
      $(this).addClass("active");
    });
    $buttons.bind("touchend mouseup", function() {
      $(this).removeClass("active");
    });
  });
</script>