You can use the steps below to create a support ticket form, or a contact us form. When you receive a new response on your form our Front addon will turn those response into new contacts and / or new messages in Front.

1. Create a new form and add fields

On your FormCrafts dashboard, click on New Form and enter a form name. On the next screen we will add the following fields via Add Field on the top-right corner:

  1. custom-text field
  2. one-line-text field labelled Name
  3. email field labelled Email
  4. one-line-text field labelled Twitter Handle
  5. comment field labelled Comment
  6. submit button

Our form would look like this:

Front app contact form
Front app contact form

2. Enable Front and map fields

Click on Addons (top-left) → Help Desk → Front → Enable.

Once enabled you need to select an Inbox from the dropdown.

Once an inbox is selected we can map our form fields to their respective Front counterpart. For our form we are creating a new message, and also adding a new contact. Check Create new contact in Front.

The following Front columns are required:

  1. Sender Handle - This would usually be the email of your customer. Map a form email field to Sender Handle.
  2. To - This would be the email(s) of the agents who receive the message. Instead of mapping a field you can manually enter email(s)
  3. Message Body - You can map a comment field to Message Body, or map the string [Response Summary]. This would ensure that all the form data becomes the message body.

We will map the Name field to Name (under Contact Fields) and to Sender Name (under Message Fields). We map the Email field to Email (Handle) (under Contact Fields) and to Sender Handle (under Message Fields). We map Twitter Handle to Twitter (Handle), and [Response Summary] to Message Body.

You can also map strings to Front Columns. To do so leave the FormCrafts field as (Select), check the appropriate Front Column, click Add and then edit the input field, like the last item in the image below, where we map the email support@example.com to Message: To:

Our mappings would look like this:

FormCrafts to Front mapping

Your form is ready to accept new responses and turn them into Front contacts and Front messages.

Click on Preview (top-right) and test your form.