Project

Profile

Help

Contact Forms with Planio » History » Sprint/Milestone 59

Gregor Schmidt, 05/28/2018 04:09 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 57 Thomas Carney
  - Become more efficient by using auto-replies and Help Desk 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 58 Gregor Schmidt
<form action="https://example.plan.io/helpdesk" 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 1 Thomas Carney
<p class="thanks" style="display:none;">Thank you for getting in touch.</p>
78 58 Gregor Schmidt
<p class="error" style="display:none;">Something went wrong. Please try again.</p>
79 40 Jan Schulz-Hofen
80
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
81
<script type="text/javascript">
82 44 Jan Schulz-Hofen
  $(function() {
83
    $('form').submit(function() {
84 1 Thomas Carney
      $.ajax({
85 59 Gregor Schmidt
        url: $(this).attr('action') + '.json',
86 58 Gregor Schmidt
        method: 'post',
87
        dataType: 'json',
88
        data: $(this).serialize(),
89
        success: function () {
90
          $('form').hide();
91
          $('.thanks').show();
92
        },
93
        error: function () { 
94
          $('.error').show();
95
        }
96 44 Jan Schulz-Hofen
      });
97
      return false;
98 42 Jan Schulz-Hofen
    });
99 40 Jan Schulz-Hofen
  });
100
</script>
101
~~~
102 36 Jan Schulz-Hofen
103
## A Practical Example
104 50 Jan Schulz-Hofen
105 1 Thomas Carney
So, pulling it all together, a full HTML page including our form would look like this:
106
107 38 Jan Schulz-Hofen
~~~html
108 1 Thomas Carney
<!doctype html>
109
<html lang="en">
110 43 Jan Schulz-Hofen
  <head>
111
    <title>Contact us!</title>
112
113 47 Jan Schulz-Hofen
    <style type="text/css">
114 58 Gregor Schmidt
      body { font-family: sans-serif; margin: 2em; }
115 1 Thomas Carney
      label, input, textarea {
116 47 Jan Schulz-Hofen
        width: 15em;
117
        float: left;
118
        margin-bottom: 1em;
119 43 Jan Schulz-Hofen
        font-size: 1.2em;
120
      }
121 58 Gregor Schmidt
      label, input[type=submit] { width: 10em; clear: left; }
122
      #url, .thanks, .error { display: none; }
123 1 Thomas Carney
    </style>
124
125 43 Jan Schulz-Hofen
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
126 1 Thomas Carney
    <script type="text/javascript">
127
      $(function() {
128
        $('form').submit(function() {
129
          $.ajax({
130
            url: $(this).attr('action'),
131 58 Gregor Schmidt
            method: 'post',
132
            dataType: 'json',
133 1 Thomas Carney
            data: $(this).serialize()
134 58 Gregor Schmidt
            success: function () {
135
              $('form').hide();
136
              $('.thanks').show();
137
            },
138
            error: function () {
139
              $('.error').show();
140
            }
141 1 Thomas Carney
          });
142 43 Jan Schulz-Hofen
          return false;
143
        });
144
      });
145
    </script>
146 38 Jan Schulz-Hofen
  </head>
147 1 Thomas Carney
148
  <body>
149 43 Jan Schulz-Hofen
    <h1>Contact us!</h1>
150 58 Gregor Schmidt
    <form action="https://example.plan.io/helpdesk" method="POST">
151
      <p class="error">Something went wrong. Please try again.</p>
152 1 Thomas Carney
      <label for="name">Your name:</label>
153 38 Jan Schulz-Hofen
      <input name="name" id="name" type="text" />
154
155 1 Thomas Carney
      <label for="mail">Your email address:</label>
156 38 Jan Schulz-Hofen
      <input name="mail" id="mail" type="email" />
157
158 1 Thomas Carney
      <label for="subject">Subject:</label>
159
      <input name="subject" id="subject" type="text" />
160 38 Jan Schulz-Hofen
161
      <label for="description">Your message:</label>
162 1 Thomas Carney
      <textarea name="description" id="description"></textarea>
163 38 Jan Schulz-Hofen
164
      <input name="project" type="hidden" value="example-project" />
165
      <input name="url" id="url" type="text" />
166
167
      <input type="submit" value="Submit request" />
168
    </form>
169 58 Gregor Schmidt
    <p class="thanks">Thank you for getting in touch.</p>
170 43 Jan Schulz-Hofen
  </body>
171
</html>
172 1 Thomas Carney
~~~
173
174 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).
175 35 Jan Schulz-Hofen
176 1 Thomas Carney
When someone fills out this form, the message will show up in Planio as an issue as you can see here:
177
178 55 Jan Schulz-Hofen
{{figure(A contact form message appears as issue in Planio)
179
!email-from-contact-form@2x.png!
180
}}
181 1 Thomas Carney
182
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).