Project

Profile

Help

Edit History

Guide »

Contact Forms with Planio » History » Sprint/Milestone 56

Thomas Carney, 03/13/2017 02:03 PM

1 56 Thomas Carney 
# Set Up a Contact Form on your own Website with the Planio Help Desk
2 8 Thomas Carney 





    3
    56
    Thomas Carney
    
The [Planio Help Desk App](https://plan.io/customer-service-and-help-desk/) in Planio enables you to handle customer inquiries right from within Planio using all the Planio [issue tracking](https://plan.io/task-management/) features you love.





    4
    51
    Jan Schulz-Hofen
    





    5
    54
    Jan Schulz-Hofen
    
Normally, this is done via email. In this guide, however, we will look at setting up a customizable online form on your own website that sends your customer's messages directly to Planio where they'll appear as issues.





    6
    1
    Thomas Carney
    





    7
    19
    Thomas Carney
    
{{>toc}}





    8
    5
    Thomas Carney
    





    9
    10
    Thomas Carney
    
## Benefits





    10
    1
    Thomas Carney
    





    11
    56
    Thomas Carney
    
  - Reply to website inquiries directly from Planio using the [Help Desk App](https://plan.io/customer-service-and-help-desk/). 





    12
    1
    Thomas Carney
    
  - Don't let inquiries slip through the cracks in your overloaded email inbox.





    13
    30
    Jan Schulz-Hofen
    
  - Work as a team on customer support.





    14
    
    
    
  - Become more efficient by using auto-replies and CRM templates.





    15
    14
    Thomas Carney
    
  - No need for server-side scripting to handle the contact form submissions.





    16
    7
    Thomas Carney
    





    17
    1
    Thomas Carney
    
## HTML Form





    18
    
    
    





    19
    30
    Jan Schulz-Hofen
    
You can send HTML form requests directly to Planio, as Planio will accept an unauthenticated POST request with `application/x-www-form-urlencoded` form data.





    20
    1
    Thomas Carney
    





    21
    30
    Jan Schulz-Hofen
    
Therefore, we’re going to build a simple form with an action attribute that submits the form to Planio via the HTTP POST method.





    22
    1
    Thomas Carney
    





    23
    
    
    
~~~html





    24
    
    
    
<form action="https://example.plan.io/track" method="POST">





    25
    12
    Thomas Carney
    
~~~





    26
    1
    Thomas Carney
    





    27
    34
    Jan Schulz-Hofen
    
You will have to replace `example.plan.io` with your own Planio domain.





    28
    
    
    





    29
    1
    Thomas Carney
    
Then, we’ll add input fields for a name, email, email subject, and the description:





    30
    
    
    





    31
    12
    Thomas Carney
    
~~~html





    32
    27
    Jan Schulz-Hofen
    
<label for="name">Your name:</label>





    33
    
    
    
<input name="name" id="name" type="text" />





    34
    1
    Thomas Carney
    





    35
    27
    Jan Schulz-Hofen
    
<label for="mail">Your email address:</label>





    36
    
    
    
<input name="mail" id="mail" type="email" />





    37
    1
    Thomas Carney
    





    38
    27
    Jan Schulz-Hofen
    
<label for="subject">Subject:</label>





    39
    
    
    
<input name="subject" id="subject" type="text" />





    40
    1
    Thomas Carney
    





    41
    27
    Jan Schulz-Hofen
    
<label for="description">Your message:</label>





    42
    
    
    
<textarea name="description" id="description"></textarea>





    43
    1
    Thomas Carney
    
~~~





    44
    
    
    





    45
    31
    Jan Schulz-Hofen
    
A Planio account can have multiple projects, so we need a way to assign this message to a particular project in Planio. Therefore, we’ll add a hidden input field with the value set to the identifier of the project you want to forward the issue:





    46
    1
    Thomas Carney
    





    47
    
    
    
~~~html





    48
    27
    Jan Schulz-Hofen
    
<input name="project" type="hidden" value="example-project" />





    49
    1
    Thomas Carney
    
~~~





    50
    
    
    





    51
    32
    Jan Schulz-Hofen
    
Then, we add a submit button:





    52
    1
    Thomas Carney
    





    53
    
    
    
~~~html





    54
    27
    Jan Schulz-Hofen
    
<input type="submit" value="Submit request" />





    55
    1
    Thomas Carney
    
~~~





    56
    
    
    





    57
    7
    Thomas Carney
    
## Add a Honeypot Field





    58
    1
    Thomas Carney
    





    59
    17
    Thomas Carney
    
Forms are frequently the target of spambots that send messages to any form they can find online. One strategy for dealing with spam bots is to add an additional input field to the form called a honeypot field. Then, you hide the form field using CSS. If that input field is filled out, which spambots usually do, then the message is discarded as spam - hence the name honeypot field.





    60
    5
    Thomas Carney
    





    61
    1
    Thomas Carney
    
Here’s the honeypot field along with some CSS:





    62
    
    
    





    63
    
    
    
~~~html





    64
    29
    Jan Schulz-Hofen
    
<style type="text/css">#url { display:none; }</style>





    65
    28
    Jan Schulz-Hofen
    
<input name="url" id="url" type="text" />





    66
    1
    Thomas Carney
    
~~~





    67
    
    
    





    68
    37
    Jan Schulz-Hofen
    
Using a honeypot field is optional but we highly recommend it to avoid spam.





    69
    
    
    





    70
    41
    Jan Schulz-Hofen
    
## Submit the form using Ajax





    71
    40
    Jan Schulz-Hofen
    





    72
    41
    Jan Schulz-Hofen
    
After receiving your contact form data, Planio will redirect back to the page it came from. This works nicely in many cases, but you might want to display a short "Thank you" message to your users once the form is submitted instead and make the form appear a little more snappy.





    73
    40
    Jan Schulz-Hofen
    





    74
    41
    Jan Schulz-Hofen
    
Here's one way to achieve that with an Ajax call using jQuery:





    75
    40
    Jan Schulz-Hofen
    





    76
    
    
    
~~~html





    77
    
    
    
<p class="thanks" style="display:none;">Thank you for getting in touch.</p>





    78
    
    
    





    79
    
    
    
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>





    80
    
    
    
<script type="text/javascript">





    81
    44
    Jan Schulz-Hofen
    
  $(function() {





    82
    
    
    
    $('form').submit(function() {





    83
    48
    Jan Schulz-Hofen
    
      $.ajax({





    84
    
    
    
        url: $(this).attr('action'),





    85
    
    
    
        dataType: 'jsonp',





    86
    
    
    
        data: $(this).serialize()





    87
    
    
    
      });





    88
    44
    Jan Schulz-Hofen
    
      $('form').hide(); $('.thanks').show();





    89
    
    
    
      return false;





    90
    42
    Jan Schulz-Hofen
    
    });





    91
    40
    Jan Schulz-Hofen
    
  });





    92
    
    
    
</script>





    93
    
    
    
~~~





    94
    
    
    





    95
    36
    Jan Schulz-Hofen
    
## A Practical Example





    96
    
    
    





    97
    50
    Jan Schulz-Hofen
    
So, pulling it all together, a full HTML page including our form would look like this:





    98
    1
    Thomas Carney
    





    99
    
    
    
~~~html





    100
    38
    Jan Schulz-Hofen
    
<!doctype html>





    101
    
    
    
<html lang="en">





    102
    
    
    
  <head>





    103
    1
    Thomas Carney
    
    <title>Contact us!</title>





    104
    43
    Jan Schulz-Hofen
    





    105
    
    
    
    <style type="text/css">





    106
    
    
    
      body { font-family: sans-serif; margin: 2em;}





    107
    47
    Jan Schulz-Hofen
    
      label, input, textarea {





    108
    
    
    
        width: 15em;





    109
    
    
    
        float: left;





    110
    
    
    
        margin-bottom: 1em;





    111
    
    
    
        font-size: 1.2em;





    112
    
    
    
      }





    113
    43
    Jan Schulz-Hofen
    
      label, input[type=submit] {width: 10em; clear: left;}





    114
    
    
    
      #url { display:none; }





    115
    
    
    
    </style>





    116
    
    
    





    117
    
    
    
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>





    118
    
    
    
    <script type="text/javascript">





    119
    1
    Thomas Carney
    
      $(function() {





    120
    
    
    
        $('form').submit(function() {





    121
    47
    Jan Schulz-Hofen
    
          $.ajax({





    122
    
    
    
            url: $(this).attr('action'),





    123
    
    
    
            dataType: 'jsonp',





    124
    
    
    
            data: $(this).serialize()





    125
    
    
    
          });





    126
    43
    Jan Schulz-Hofen
    
          $('form').hide(); $('.thanks').show();





    127
    
    
    
          return false;





    128
    
    
    
        });





    129
    
    
    
      });





    130
    
    
    
    </script>





    131
    38
    Jan Schulz-Hofen
    
  </head>





    132
    1
    Thomas Carney
    





    133
    
    
    
  <body>





    134
    43
    Jan Schulz-Hofen
    
    <h1>Contact us!</h1>





    135
    1
    Thomas Carney
    
    <form action="https://example.plan.io/track" method="POST">





    136
    38
    Jan Schulz-Hofen
    
      <label for="name">Your name:</label>





    137
    1
    Thomas Carney
    
      <input name="name" id="name" type="text" />





    138
    38
    Jan Schulz-Hofen
    





    139
    
    
    
      <label for="mail">Your email address:</label>





    140
    1
    Thomas Carney
    
      <input name="mail" id="mail" type="email" />





    141
    38
    Jan Schulz-Hofen
    





    142
    
    
    
      <label for="subject">Subject:</label>





    143
    1
    Thomas Carney
    
      <input name="subject" id="subject" type="text" />





    144
    38
    Jan Schulz-Hofen
    





    145
    
    
    
      <label for="description">Your message:</label>





    146
    1
    Thomas Carney
    
      <textarea name="description" id="description"></textarea>





    147
    38
    Jan Schulz-Hofen
    





    148
    
    
    
      <input name="project" type="hidden" value="example-project" />





    149
    
    
    
      <input name="url" id="url" type="text" />





    150
    
    
    





    151
    
    
    
      <input type="submit" value="Submit request" />





    152
    
    
    
    </form>





    153
    1
    Thomas Carney
    
    <p class="thanks" style="display:none;">Thank you for getting in touch.</p>





    154
    43
    Jan Schulz-Hofen
    
  </body>





    155
    
    
    
</html>





    156
    1
    Thomas Carney
    
~~~





    157
    
    
    





    158
    49
    Jan Schulz-Hofen
    
*You can download the entire HTML page here:* [*contact-us.html*](https://support.plan.io/attachments/download/213611/contact-us.html).





    159
    35
    Jan Schulz-Hofen
    





    160
    1
    Thomas Carney
    
When someone fills out this form, the message will show up in Planio as an issue as you can see here:





    161
    
    
    





    162
    55
    Jan Schulz-Hofen
    
{{figure(A contact form message appears as issue in Planio)





    163
    
    
    
!email-from-contact-form@2x.png!





    164
    
    
    
}}





    165
    1
    Thomas Carney
    





    166
    
    
    
That’s just one of the examples of how you can use the Redmine API at Planio to streamline your processes. You’ll find more examples and documentation, including how to add your own **custom fields** to your contact forms, in our [Redmine API documentation](https://plan.io/api/#issues-via-contact-forms).