How to set up a form inbox in Front
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.
After creating a form, Front will give you a sample HTML source code. You should 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.
Go into your Settings, select Inboxes, and Add a team inbox.
Set the form location, which is the URL where your form will be hosted. As a security precaution, Front will only accept messages posted from this location. This can be changed later if needed.
You can also configure success and error pages, where the user will be sent after completing the form. If you leave these fields blank, a query parameter will be passed to the location page (see below).
Select who on your team has access to this inbox, and click Create inbox.
After creating the form, you will see an HTML Code section that you can expand. This will reveal the source code of the form that you can copy and use as a starting point to customize your form.Success & 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 like:
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.
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.
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.
Go to the reCATPCHA landing page and click on "Sign Up".
Enter the domain where your form is hosted
- Expand "Step 1: client-side integration" and copy the data-sitekey value.
- Expand "Step 2: Server side integration" and copy the secret.
In your Front settings, enable reCAPTCHA and enter both values:
Adjust the code of your form to include the captcha control. The HTML will update to include the reCAPTCHA controls.
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="firstname.lastname@example.org">
The value should be the public address of a shared email channel.
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?Reply
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.Reply
Glad to hear Galen!Reply
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?Reply
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 ( http://dev.frontapp.com/#create-a-custom-channel ).Reply
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.
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.Reply