Project

Profile

Help

Contact Forms with Planio » History » Sprint/Milestone 37

Jan Schulz-Hofen, 11/19/2016 02:27 PM

1 26 Jan Schulz-Hofen
# Set Up a Contact Form on your own Website with CRM & Helpdesk
2 8 Thomas Carney
3 30 Jan Schulz-Hofen
In this guide, we will look at setting up a contact form on your own website that sends your customer's messages directly to Planio where they'll appear as issues in Planio's CRM & Helpdesk.
4 1 Thomas Carney
5 19 Thomas Carney
{{>toc}}
6 5 Thomas Carney
7 10 Thomas Carney
## Benefits
8 1 Thomas Carney
9 25 Jan Schulz-Hofen
  - Reply to website inquiries directly from Planio using the CRM & Helpdesk App. 
10 1 Thomas Carney
  - Don't let inquiries slip through the cracks in your overloaded email inbox.
11 30 Jan Schulz-Hofen
  - Work as a team on customer support.
12
  - Become more efficient by using auto-replies and CRM templates.
13 14 Thomas Carney
  - No need for server-side scripting to handle the contact form submissions.
14 7 Thomas Carney
15 1 Thomas Carney
## HTML Form
16
17 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.
18 1 Thomas Carney
19 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.
20 1 Thomas Carney
21
~~~html
22
<form action="https://example.plan.io/track" method="POST">
23 12 Thomas Carney
~~~
24 1 Thomas Carney
25 34 Jan Schulz-Hofen
You will have to replace `example.plan.io` with your own Planio domain.
26
27 1 Thomas Carney
Then, we’ll add input fields for a name, email, email subject, and the description:
28
29 12 Thomas Carney
~~~html
30 27 Jan Schulz-Hofen
<label for="name">Your name:</label>
31
<input name="name" id="name" type="text" />
32 1 Thomas Carney
33 27 Jan Schulz-Hofen
<label for="mail">Your email address:</label>
34
<input name="mail" id="mail" type="email" />
35 1 Thomas Carney
36 27 Jan Schulz-Hofen
<label for="subject">Subject:</label>
37
<input name="subject" id="subject" type="text" />
38 1 Thomas Carney
39 27 Jan Schulz-Hofen
<label for="description">Your message:</label>
40
<textarea name="description" id="description"></textarea>
41 1 Thomas Carney
~~~
42
43 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:
44 1 Thomas Carney
45
~~~html
46 27 Jan Schulz-Hofen
<input name="project" type="hidden" value="example-project" />
47 1 Thomas Carney
~~~
48
49 32 Jan Schulz-Hofen
Then, we add a submit button:
50 1 Thomas Carney
51
~~~html
52 27 Jan Schulz-Hofen
<input type="submit" value="Submit request" />
53 1 Thomas Carney
~~~
54
55 7 Thomas Carney
## Add a Honeypot Field
56 1 Thomas Carney
57 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.
58 5 Thomas Carney
59 1 Thomas Carney
Here’s the honeypot field along with some CSS:
60
61
~~~html
62 29 Jan Schulz-Hofen
<style type="text/css">#url { display:none; }</style>
63 28 Jan Schulz-Hofen
<input name="url" id="url" type="text" />
64 1 Thomas Carney
~~~
65
66 37 Jan Schulz-Hofen
Using a honeypot field is optional but we highly recommend it to avoid spam.
67
68 36 Jan Schulz-Hofen
## A Practical Example
69
70 1 Thomas Carney
So, pulling it all together, our form will look like this:
71
72
~~~html
73 29 Jan Schulz-Hofen
<style type="text/css">#url { display:none; }</style>
74 1 Thomas Carney
75
<form action="https://example.plan.io/track" method="POST">
76
77
  <label for="name">Your name:</label>
78
  <input name="name" id="name" type="text" />
79
80
  <label for="mail">Your email address:</label>
81
  <input name="mail" id="mail" type="email" />
82
83
  <label for="subject">Subject:</label>
84
  <input name="subject" id="subject" type="text" />
85
86
  <label for="description">Your message:</label>
87
  <textarea name="description" id="description"></textarea>
88
89
  <input name="project" type="hidden" value="example-project" />
90
  <input name="url" id="url" type="text" />
91
  <input type="submit" value="Submit request" />
92
93 5 Thomas Carney
</form>
94 21 Thomas Carney
~~~
95
96 1 Thomas Carney
When someone fills out this form, the message will show up in Planio as an issue as you can see here:
97
98 24 Jan Schulz-Hofen
![](email-from-contact-form@2x.png)  
99 23 Jan Schulz-Hofen
*A contact form message appears as issue in Planio*
100 1 Thomas Carney
101 35 Jan Schulz-Hofen
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).