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.
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.
Go into your Settings, select Inboxes, and Add a team inbox.
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).
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, which you can then copy and use as a starting point to customize your form.
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:
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.
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 Front, go to your inbox settings and expand Spam protection. Then 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"> <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.
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 ).
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.
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.
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.
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="email@example.com"
You will want to change the address under value to be the desired sending channel for your users.
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="firstname.lastname@example.org"> <input type="hidden" name="autoreply-sender-name" id="autoreply-sender-name" value="WaniKani Team">