The Planio web site is also available in English. Do you prefer to read it in English? Yes, please switch to English!
Die Planio-Webseite gibt es auch auf Deutsch. Möchten Sie lieber auf Deutsch weiterlesen? Ja, bitte zu Deutsch wechseln!
Planioのwebサイトは日本語にも対応しています。日本語での表示がお好みですか? 日本語に切り替え!
Ce site Web est disponible en français. Préférez-vous le lire en français ? Oui, passer au site en français !
A Product Manager's Guide to Planio Set up Planio Team Chat on Windows using Pidgin

Set Up a Contact Form on your own Website with CRM & Helpdesk

The CRM & Helpdesk App in Planio enables you to handle customer inquiries right from within Planio using all the Planio issue tracking features you love.

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.

1. Benefits

  • Reply to website inquiries directly from Planio using the CRM & Helpdesk App.
  • Don't let inquiries slip through the cracks in your overloaded email inbox.
  • Work as a team on customer support.
  • Become more efficient by using auto-replies and CRM templates.
  • No need for server-side scripting to handle the contact form submissions.

2. HTML Form

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.

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

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

You will have to replace example.plan.io with your own Planio domain.

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

<label for="name">Your name:</label>
<input name="name" id="name" type="text" />

<label for="mail">Your email address:</label>
<input name="mail" id="mail" type="email" />

<label for="subject">Subject:</label>
<input name="subject" id="subject" type="text" />

<label for="description">Your message:</label>
<textarea name="description" id="description"></textarea>

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:

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

Then, we add a submit button:

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

3. Add a Honeypot Field

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.

Here’s the honeypot field along with some CSS:

<style type="text/css">#url { display:none; }</style>
<input name="url" id="url" type="text" />

Using a honeypot field is optional but we highly recommend it to avoid spam.

4. Submit the form using Ajax

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.

Here's one way to achieve that with an Ajax call using jQuery:

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

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
  $(function() {
    $('form').submit(function() {
      $.ajax({
        url: $(this).attr('action'),
        dataType: 'jsonp',
        data: $(this).serialize()
      });
      $('form').hide(); $('.thanks').show();
      return false;
    });
  });
</script>

5. A Practical Example

So, pulling it all together, a full HTML page including our form would look like this:

<!doctype html>
<html lang="en">
  <head>
    <title>Contact us!</title>

    <style type="text/css">
      body { font-family: sans-serif; margin: 2em;}
      label, input, textarea {
        width: 15em;
        float: left;
        margin-bottom: 1em;
        font-size: 1.2em;
      }
      label, input[type=submit] {width: 10em; clear: left;}
      #url { display:none; }
    </style>

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
      $(function() {
        $('form').submit(function() {
          $.ajax({
            url: $(this).attr('action'),
            dataType: 'jsonp',
            data: $(this).serialize()
          });
          $('form').hide(); $('.thanks').show();
          return false;
        });
      });
    </script>
  </head>

  <body>
    <h1>Contact us!</h1>
    <form action="https://example.plan.io/track" method="POST">
      <label for="name">Your name:</label>
      <input name="name" id="name" type="text" />

      <label for="mail">Your email address:</label>
      <input name="mail" id="mail" type="email" />

      <label for="subject">Subject:</label>
      <input name="subject" id="subject" type="text" />

      <label for="description">Your message:</label>
      <textarea name="description" id="description"></textarea>

      <input name="project" type="hidden" value="example-project" />
      <input name="url" id="url" type="text" />

      <input type="submit" value="Submit request" />
    </form>
    <p class="thanks" style="display:none;">Thank you for getting in touch.</p>
  </body>
</html>

You can download the entire HTML page here: contact-us.html.

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

A contact form message appears as issue in Planio
A contact form message appears as issue in Planio

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.

Get a free Planio account for 30 days

No credit card required. Sign up only takes 60 seconds.

No installation No setup fees

Working With Planio

See How Our Customers Use Planio