Contact Forms with Planio » History » Sprint/Milestone 23
Jan Schulz-Hofen, 11/19/2016 01:57 PM
1 | 8 | Thomas Carney | # Set Up Contact Forms with the Planio Help Desk |
---|---|---|---|
2 | |||
3 | 13 | Thomas Carney | In this guide, we will look at setting up a contact form that sends messages directly to Planio where they'll appear as issues in the Help Desk. |
4 | 1 | Thomas Carney | |
5 | 19 | Thomas Carney | {{>toc}} |
6 | 5 | Thomas Carney | |
7 | 10 | Thomas Carney | ## Benefits |
8 | 1 | Thomas Carney | |
9 | 13 | Thomas Carney | - Reply to website inquiries directly from Planio using the Help Desk. |
10 | 15 | Thomas Carney | - Don't let inquiries slip through the cracks in your overloaded email inbox. |
11 | 14 | Thomas Carney | - No need for server-side scripting to handle the contact form submissions. |
12 | 9 | Thomas Carney | |
13 | 7 | Thomas Carney | ## HTML Form |
14 | 5 | Thomas Carney | |
15 | 2 | Thomas Carney | You can send contact form requests directly to Planio, as Planio will accept an unauthenticated POST request with application/x-www-form-urlencoded form data. |
16 | 1 | Thomas Carney | |
17 | 16 | Thomas Carney | Therefore, we’re going to build a simple form with an action attribute that submits the form to Planio via the POST HTTP method. |
18 | 1 | Thomas Carney | |
19 | ~~~html |
||
20 | <form action="https://example.plan.io/track" method="POST"> |
||
21 | 12 | Thomas Carney | ~~~ |
22 | 1 | Thomas Carney | |
23 | Then, we’ll add input fields for a name, email, email subject, and the description: |
||
24 | |||
25 | 12 | Thomas Carney | ~~~html |
26 | 1 | Thomas Carney | <label for="name">Your name:</label> |
27 | <input name="name" id="name" type="text" /> |
||
28 | |||
29 | <label for="mail">Your email address:</label> |
||
30 | <input name="mail" id="mail" type="email" /> |
||
31 | |||
32 | <label for="subject">Subject:</label> |
||
33 | <input name="subject" id="subject" type="text" /> |
||
34 | |||
35 | <label for="description">Your message:</label> |
||
36 | <textarea name="description" id="description"></textarea> |
||
37 | ~~~ |
||
38 | |||
39 | 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 name of the project you want to forward the issue: |
||
40 | |||
41 | ~~~html |
||
42 | <input name="project" type="hidden" value="example-project" /> |
||
43 | ~~~ |
||
44 | |||
45 | Then, we add the submit input field: |
||
46 | |||
47 | ~~~html |
||
48 | <input type="submit" value="Submit request" /> |
||
49 | ~~~ |
||
50 | |||
51 | 7 | Thomas Carney | ## Add a Honeypot Field |
52 | 1 | Thomas Carney | |
53 | 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. |
54 | 5 | Thomas Carney | |
55 | 1 | Thomas Carney | Here’s the honeypot field along with some CSS: |
56 | |||
57 | ~~~html |
||
58 | <!-- CSS to hide honeypot field --> |
||
59 | <style media="screen">#url { display:none; }</style> |
||
60 | <input name="url" id="url" type="text" /> |
||
61 | ~~~ |
||
62 | |||
63 | So, pulling it all together, our form will look like this: |
||
64 | |||
65 | ~~~html |
||
66 | <!-- CSS to hide honeypot field --> |
||
67 | <style media="screen">#url { display:none; }</style> |
||
68 | |||
69 | <form action="https://example.plan.io/track" method="POST"> |
||
70 | |||
71 | <label for="name">Your name:</label> |
||
72 | <input name="name" id="name" type="text" /> |
||
73 | |||
74 | <label for="mail">Your email address:</label> |
||
75 | <input name="mail" id="mail" type="email" /> |
||
76 | |||
77 | <label for="subject">Subject:</label> |
||
78 | <input name="subject" id="subject" type="text" /> |
||
79 | |||
80 | <label for="description">Your message:</label> |
||
81 | <textarea name="description" id="description"></textarea> |
||
82 | |||
83 | <input name="project" type="hidden" value="example-project" /> |
||
84 | <input name="url" id="url" type="text" /> |
||
85 | <input type="submit" value="Submit request" /> |
||
86 | |||
87 | </form> |
||
88 | ~~~ |
||
89 | 5 | Thomas Carney | |
90 | 21 | Thomas Carney | ## A Practical Example |
91 | |||
92 | 1 | Thomas Carney | When someone fills out this form, the message will show up in Planio as an issue as you can see here: |
93 | |||
94 | 23 | Jan Schulz-Hofen | ![](email-from-contact-form.png) |
95 | *A contact form message appears as issue in Planio* |
||
96 | 1 | Thomas Carney | |
97 | 11 | Thomas Carney | 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 in our [Redmine API documentation](https://plan.io/api/). |