Contact Forms with Planio » History » Sprint/Milestone 44
Jan Schulz-Hofen, 11/19/2016 03:08 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 | 41 | Jan Schulz-Hofen | ## Submit the form using Ajax |
| 69 | 40 | Jan Schulz-Hofen | |
| 70 | 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. |
| 71 | 40 | Jan Schulz-Hofen | |
| 72 | 41 | Jan Schulz-Hofen | Here's one way to achieve that with an Ajax call using jQuery: |
| 73 | 40 | Jan Schulz-Hofen | |
| 74 | ~~~html |
||
| 75 | <p class="thanks" style="display:none;">Thank you for getting in touch.</p> |
||
| 76 | |||
| 77 | <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> |
||
| 78 | <script type="text/javascript"> |
||
| 79 | 44 | Jan Schulz-Hofen | $(function() { |
| 80 | $('form').submit(function() { |
||
| 81 | $.ajax({ url: $(this).attr('action'), dataType: 'jsonp', data: $(this).serialize() }); |
||
| 82 | $('form').hide(); $('.thanks').show(); |
||
| 83 | return false; |
||
| 84 | 42 | Jan Schulz-Hofen | }); |
| 85 | 40 | Jan Schulz-Hofen | }); |
| 86 | </script> |
||
| 87 | ~~~ |
||
| 88 | |||
| 89 | 36 | Jan Schulz-Hofen | ## A Practical Example |
| 90 | |||
| 91 | 38 | Jan Schulz-Hofen | So, pulling it all together, a minimal HTML page including our form would look like this: |
| 92 | 1 | Thomas Carney | |
| 93 | ~~~html |
||
| 94 | 38 | Jan Schulz-Hofen | <!doctype html> |
| 95 | <html lang="en"> |
||
| 96 | 1 | Thomas Carney | |
| 97 | 38 | Jan Schulz-Hofen | <head> |
| 98 | 43 | Jan Schulz-Hofen | |
| 99 | 1 | Thomas Carney | <title>Contact us!</title> |
| 100 | 43 | Jan Schulz-Hofen | |
| 101 | <style type="text/css"> |
||
| 102 | body { font-family: sans-serif; margin: 2em;} |
||
| 103 | label, input, textarea { width: 15em; float: left; margin-bottom: 1em; font-size: 1.2em;} |
||
| 104 | label, input[type=submit] {width: 10em; clear: left;} |
||
| 105 | #url { display:none; } |
||
| 106 | </style> |
||
| 107 | |||
| 108 | <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> |
||
| 109 | <script type="text/javascript"> |
||
| 110 | $(function() { |
||
| 111 | $('form').submit(function() { |
||
| 112 | $.ajax({ url: $(this).attr('action'), dataType: 'jsonp', data: $(this).serialize() }); |
||
| 113 | $('form').hide(); $('.thanks').show(); |
||
| 114 | return false; |
||
| 115 | }); |
||
| 116 | }); |
||
| 117 | </script> |
||
| 118 | |||
| 119 | 38 | Jan Schulz-Hofen | </head> |
| 120 | 1 | Thomas Carney | |
| 121 | <body> |
||
| 122 | 43 | Jan Schulz-Hofen | |
| 123 | <h1>Contact us!</h1> |
||
| 124 | |||
| 125 | 1 | Thomas Carney | <form action="https://example.plan.io/track" method="POST"> |
| 126 | 38 | Jan Schulz-Hofen | |
| 127 | <label for="name">Your name:</label> |
||
| 128 | 1 | Thomas Carney | <input name="name" id="name" type="text" /> |
| 129 | 38 | Jan Schulz-Hofen | |
| 130 | <label for="mail">Your email address:</label> |
||
| 131 | 1 | Thomas Carney | <input name="mail" id="mail" type="email" /> |
| 132 | 38 | Jan Schulz-Hofen | |
| 133 | <label for="subject">Subject:</label> |
||
| 134 | 1 | Thomas Carney | <input name="subject" id="subject" type="text" /> |
| 135 | 38 | Jan Schulz-Hofen | |
| 136 | <label for="description">Your message:</label> |
||
| 137 | 1 | Thomas Carney | <textarea name="description" id="description"></textarea> |
| 138 | 38 | Jan Schulz-Hofen | |
| 139 | <input name="project" type="hidden" value="example-project" /> |
||
| 140 | <input name="url" id="url" type="text" /> |
||
| 141 | |||
| 142 | <input type="submit" value="Submit request" /> |
||
| 143 | |||
| 144 | 1 | Thomas Carney | </form> |
| 145 | |||
| 146 | 43 | Jan Schulz-Hofen | <p class="thanks" style="display:none;">Thank you for getting in touch.</p> |
| 147 | |||
| 148 | </body> |
||
| 149 | 1 | Thomas Carney | </html> |
| 150 | ~~~ |
||
| 151 | 43 | Jan Schulz-Hofen | |
| 152 | \_You can download the entire HTML page here: "contact-us.html":contact-us.html. |
||
| 153 | 35 | Jan Schulz-Hofen | |
| 154 | 1 | Thomas Carney | When someone fills out this form, the message will show up in Planio as an issue as you can see here: |
| 155 | |||
| 156 |  |
||
| 157 | *A contact form message appears as issue in Planio* |
||
| 158 | |||
| 159 | 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). |
.