How to set up a form inbox in Front

Overview

You can build a form on your website and configure it so that messages arrive directly into Front. You can completely customize the look of your form using CSS.

If you've created a form, Front can give you a sample HTML source code. You'll then copy it and reuse it on your website. You can change the markup to suit your needs, but you should not modify the form attributes (action URL, enctype) or the name of the fields.


Instructions

Step 1

Click into Company settings.

Step 2

Click on Inboxes on the left menu and Add a team inbox.

Step 3

Fill out the name and description of your inbox. Click Create.

Step 4

Choose Form from the channel menu.

Step 5

Complete the setup for your inbox. For Location, set the form location as the URL where your form will be hosted. As a security precaution, Front will only accept messages posted from this URL. This can be changed later if needed.

Optionally, you can also configure where the user will be sent after completing the form by entering a Success Page and an Error Page, If you leave these fields blank, a query parameter will be passed to the Location page (see below for more information).

Step 6

After creating the form, you will see an HTML code section that you can expand. This will reveal the source code of the form, which you can then copy and use as a starting point to customize your form.

Step 7

Choose the teammate access for this inbox, and whether you'd like to pin this inbox for teammates.

Step 8

Complete the remainder of the inbox settings, and click Finish.


Form customization

Success and error

After completing the form, Front will redirect the user to a new page. If you did not provide a success page, the user will be sent to the same page with a success code such as:

https://company.com/my-form?code=ok

If there is an error, the code will be:

  • inactive_form: the form has been deleted.
  • bad_referer: the message was posted from an incorrect location.
  • no_email: no valid "email" field was found.
  • no_body: the body is empty or no body field was found.
  • service_unavailable: the form service is currently unavailable and cannot receive messages.

A message parameter will also be passed with a friendly error message in English.

Note: you can change the success and error pages (as well as the location URL) at any time by going to Settings > Inboxes > select your form inbox > scroll down to Form configuration.

Attachments & Extra Fields

You can add multiple attachments to your form, which will appear in Front alongside the message. If you add additional fields (in addition to name, email, and body), Front will list them in the message as well.

Subject field

If your form contains a subject field, it will be used to define the subject of the message in Front. Otherwise, you can define a default subject in the settings. The subject will be used if you reply from Front.

Spam protection: reCAPTCHA integration

If you receive a high volume of spam messages on your form, you can enable reCAPTCHA.

Step 1

Go to the reCATPCHA landing page and click on Sign Up.

Step 2

Enter the domain where your form is hosted

Step 3

  • Expand "Step 1: client-side integration" and copy the data-sitekey value.
  • Expand "Step 2: Server side integration" and copy the secret.

In Front, go to your inbox settings and expand Spam protection. Then enable reCAPTCHA and enter both values:

 

Step 4

Adjust the code of your form to include the captcha control. The HTML will update to include the reCAPTCHA controls.

Autoreply support

You can configure Front to send an automated response to your users. Just create a rule with the following definition:

  • When: inbound messages
  • If: channel is my form
  • Then: Reply with my response once

By default, Front will use the first available email channel to respond. You can specify the channel that is used by adding the following field in your form (inside the <form> tag):

<input type="hidden" name="autoreply-from" value="address@company.com">
<input type="hidden" name="autoreply-sender-name" value="Company Name">

The value should be the public address of a shared email channel. You can also specify a sender name that will be used to reply.


Pricing

You will need to be on the Plus plan or above to access this feature. Some legacy plans with different names may also have this channel. If you'd like to purchase the feature, you can update your plan in-app or reach out to us.

23replies Oldest first
  • Oldest first
  • Newest first
  • Active threads
  • Popular
  • This is fantastic! And the timing couldn't be better as we were about to implement a simple form for new leads before sending them off to our more comprehensive Typeform brief.

    Question: the name field doesn't seem to pass their name to Front—should it?

    Like 1
  • Scratch that, I can see it does pass the name… when I tested it with my own email address, it just showed my email because I must be a saved Contact already with not name. Works great! So simple. Well done.

    Like 1
  • Glad to hear Galen!

    Like
  • What if I already have an existing form (eg. via HubSpot), is there a way to connect this to that and have them both pull the data through?

    Like
  • Ryan Bonnici not easily. However, if you are willing to use our API, you can always create a custom channel in Front and post messages submitted to HubSpot to Front ( https://dev.frontapp.com/reference/channels#post_inboxes-inbox-id-channels-1 ).

    Like
  • I tried setting this form up on our site using ajax to submit the form but the redirects that the responses make cause errors. Is it possible to have this endpoint return simple JSON?

    Recreating this form in the API seems possible but much much more involved than just sending a request to the Form's URL, so if I can avoid that extra work I'd like to.

    Thanks!

    Like
  • Colin At the moment, our form inbox uses the PRG - https://en.wikipedia.org/wiki/Post/Redirect/Get - pattern. We will eventually open AJAX endpoints, but there are security aspects and we don't want to rush it.

    Like
  • Great! Although I'm having trouble working out how to customise the attachments and extra fields section. The article mentions it can be done but not precisely sure how? And is there a way I can preview the form? Thanks

    Like 1
  • Hi Brooke, this requires a bit of HTML knowledge. Are you familiar with HTML?

    Like
  • Hi Cori Morris - sure I can understand a little bit of html and the devs in the team would be able to help me :)

    Like
  • Brooke Hahn,

    Regarding the preview, you will need to host the form somewhere on your end, so once you set it up, you should be able to preview it. 

    The extra fields/attachment you refer to will have a different "name" than the other fields and when that form is submitted to Front, we will grab those fields and include the names/values in the message that appears in the Form channel. I think this will become clearer after testing it 😀

    This documentation should be pretty straightforward. It sounds like your questions are generally around HTML. We're willing to help with Front-specific questions, but I think your developers should be able to get started with this documentation.

    Like
  • Is there a way to set the default reply email address for emails sent to form inbox? Our team deals with many products, each with their own email address. It looks like its defaulting to the team email address at the top of the list, which is not ideal. I've poked around the form inbox settings and didn't see any way to set it.

    Like
  • Viet Hoang Hi there,

    Please see Step 4 for autoreply support. The default channel is specified with an HTML form tag: input type="hidden" name="autoreply-from" value="address@company.com"

    You will want to change the address under value to be the desired sending channel for your users.

    Like
  • Cori Morris Ahh thank you. I totally glossed over that tidbit.

    Like 1
  • Cori Morris

    Setting the hidden field doesn't seem to be working for us. Looks like this works for auto replying flow, but our flow doesn't use autoreply. We manually reply to emails and the reply email is still set to the address at the top of the list.

    Here is the line of HTML we added to the form:

    <input type="hidden" name="autoreply-from" id="autoreply-from" value="hello@wanikani.com">
    <input type="hidden" name="autoreply-sender-name" id="autoreply-sender-name" value="WaniKani Team">
    Like
  • Two questions:

    1. can I add a phone number field to the form so that it automatically adds this phone number to the contact information?

    2. I've set up a rule to automatically respond to the contact after they submit the form, but is it possible to hide the original form submission?

    Like
  • Esmee Tijdeman Hi there,

    1. No, there's no way to update a contact in the Contact Manager via a form field.

    2. Are you wanting to hide the original submission from your reply? If so, there's no way to do that at this time.

    Like
  • Hi There, 

    This feature would be really helpful for my website (Travel agency). The only problem is that I need more than one form. As I have about 20 holiday packages that each require a form. Is this possible?

    Like
  • Robert Jooste Yes! You can have as many form inboxes as you wish.

    Like
  • do you have more info on forms like how to add tags, assigments and preset in general more data than just custom fields?

    would be very nice to have more options on hidden fields to fully customize how messages enter and not have to use rules

    Like
  • Guillermo Dewey Absolutely! Please reach out to your Account Manager. They'll be able to provide any information you need.

    Like
  • I noticed Gravity Forms (wordpress plugin) offers webhooks. Any chance it would be possible to set up a form through gravity forms using a webhook to get form entries into front?

    Like
  • When creating a custom field, using numbers, can you stipulate the amount of characters needed?

    Like
Like3 Follow
  • 3 Likes
  • 1 mth agoLast active
  • 23Replies
  • 8513Views
  • 11 Following