If you click on “Forms” in the navigation bar, you change to form setup and are presented an overview of all your currently configured forms.
Set up a new form
If you want to create an action endpoint for a new form, that you already implemented on one of your websites, all you have to do is click the button “Add form”.
A modal dialog will appear, asking you for the form’s name and description. You can name your form whatever you like. The name and description are only helpers for yourself, and do not affect your form’s configuration at all. You can later change both as many times as you want. In our experience, giving form configurations individual names helps distinguishing them in your form’s overview. So feel free to choose whatever name you think is appropriate. For now, we are going to name our form configuration “Contact Form”, because in our example, we want to create an action endpoint for a contact form.
Click on the “Save” button and your form’s endpoint is immediately ready for use. You can see that, because once the modal dialog is closed and your form is saved, you switch back to your forms’ overview and your freshly created form is now shown.
As we told you, your form’s name is not important and only for your personal use. The important part is your form’s alias. The alias defines your form’s endpoint which you are going to use as your form’s action URL. Right now, click on your form, to change into your form’s detail view.
Connect your form to our endpoint
When you click on your form, your are promptly changing into its detail view. The menu tab “Integration” shows you all needed info on how to use our endpoint with your form on your static site. We told you, the form’s alias is the important part. The alias guarantees, that your form endpoint stays anonymous. Other services, like formspree, use your email address in your form’s endpoint URL. That way, bots and spammers immediately know your contact. By using an anonymous alias, our details stay hidden and we can map submissions to the correct form and owner.
So, all you need to do now, is copy your form’s endpoint URL and paste it into your form’s action on your static site. You can either select the URL and copy it yourself or click on the “Copy” button. Paste the URL into your real form’s action URL as shown in the exemplary source code. And that’s already there is to know. Go ahead and test your form!
Testing your form
As an example, we use a simply contact form, that we connect with above backend endpoint URL. To illustrate things, this is the form’s html we use. It is a really simple contact form without any styling.
<h1 class="mb-4">Our example contact form</h1> <form action="https://www.formmonkey.io/submit/9902e3199e61d203044e6981ae3b16a1" method="POST"> <div> <label style="display: block;">Your name:</label> <input type="text" name="name"> </div> <div style="margin-top: 2rem;"> <label style="display: block;">Your email:</label> <input type="text" name="email"> </div> <div style="margin-top: 2rem;"> <label style="display: block;">Your message:</label> <textarea type="text" name="message"></textarea> </div> <div style="margin-top: 2rem;"> <button type="submit">Send</button> </div> </form>
You can design your contact form any way you like - really simply with only containing an email and message field or rather complex with as many input fields as you wish. formmonkey is able to handle an unlimited amount of input fields and does not limit your form’s design. The only important thing is, that you copy and paste the endpoint URL correctly.
So, what happens, when we click on the “Send” button of our exemplary form? Let’s find out and click the button…
After sending the form, the customers sees our ‘Thank you’ page and the submission is automatically sent to you by email.
Our endpoints allow forms with file uploads by default. You do not need to configure the form’s endpoint in any special way for it. You only need to make sure, that your HTML form has the correct encoding type assigned. You do this, by setting the encoding type enctype=“multipart/form-data” in the form’s <form>-tag like so:
<form action="https://www.formmonkey.io/submit/9902e3199e61d203044e6981ae3b16a1" method="POST" enctype="multipart/form-data"> ... </form>
Once your form has the correct encoding, simply add a file-input to it:
<form action="https://www.formmonkey.io/submit/9902e3199e61d203044e6981ae3b16a1" method="POST"> <div style="margin-top: 2rem;"> <label style="display: block;">File upload:</label> <input type="file" name="my_file"> </div> <div style="margin-top: 2rem;"> <button type="submit">Send</button> </div> </form>
If a customer uploads files with your form, you receive the form submission by email. The email then contains links to all uploaded files, by which you can download them instantly.
One of formmonkey’s prominent features is its submission archive. You are notified by eMail for each form submission. But more than that, you can see all form submissions in the form’s submission archive. Using the archive, you no longer lose submissions in case you accidently delete the notification email. Submissions are stored in the archive up to 365 days and are listed there in chronological order. You get to a form’s submission archive by clicking on the form on the form overview page, and choosing “Submissions” tab in the form’s navigation menu.
Submissions are automatically deleted after 365 days. In case you want to delete individual submissions manually, you can select the ones to delete by clicking on the checkbox left to the submission in the overview table.
A popup dialog appears on the bottom of the page, with which you can delete the selected submissions.
Deleted submissions cannot be restored.
Once you click on a particular submission, the submission details page opens up. In there, you can read all submission contents in detail. In case the submission contains file uploads, each file is shown along with a download link.
Disabling email notifications
In rare cases you do not wish to be notified by email and only want to use the submission archive.
If you disable email notifications, you will not be notified on new form submissions of that particular form.
You can configure the email addresses, to which form submissions are sent to.
Recipient email addresses are selected from a dropdown list. The dropdown list is populated with all recipient contacts that you defined in your global account settings. Email addresses of recipient contacts must be verified, before they are shown in the dropdown list.
One recipient for all submissions
If you want to use the same email address for all submissions, create the corresponding recipient contact in your global settings, and have it verfied. Then, in your form’s settings, click on the input “Recipients” and select that contact from the presented dropdown list.
Rule-based notification routing
If you want to route form submissions to different email addresses, then rule-based notificiation routing is perfect for you! Depending on form field values, you can define rules to decide, to whom the form submission should be routed to. You can define rules under the form’s navigation menu tab “Routing”:
At the moment, you can choose between three different rules:
Match All: The “Match All” rule matches all submissions. Basically, it is the same as setting the same email addresses for all submissions above. If a customer submits your form, by choosing this rule and selecting a recipient contact, its submission will always be sent to this contact’s email address.
Exact Match: With this rule, you can decide the submissions routing based on a form field’s exact value. E.g. imagine you provide a select list for the customer to select his or her gender:
<form action="https://www.formmonkey.io/submit/9902e3199e61d203044e6981ae3b16a1" method="POST"> <select name="gender"> <option value="male">Male</option> <option value="female">Female</option> </select> </form>
If you want to notify a different recipient, if your customer is male, then you can simply set up a “Exact Match” rule like so:
Please note, that our matching is case insensitive.
- Contains: The “Contains” rule is perfect, if you do not know the exact form field value in advance. For example, this can be the case, if you provide a textarea form field, into which the customer may write a description of his inquiry. Imagine you provide such a description field in your form, and customers may write to you about cancelling their accounts, in which case you want to notify your HR department. Then you can easily set up a rule like this:
As with the “Exact Match” rule, matching is case insensitive.
If you put a form online, you can expect to receive a lot of spam. To minimize this, you can implement different strategies, which we are going to describe to you in detail now.
Spam Filtering with a Honeypot
A honeypot is a hidden form field, that is included in your form - invisible to your customers and therefore usually empty when the form is submitted by humans. In contrast, automated bots usually don’t have the ability to recognize such fields as honeypots. They try to fill out every form field they see - even hidden fields. Hence, spam submissions can be detected easily be filtering out the ones with non-empty honeypot fiel values. In order to enable honeypot spam filtering, you only need to define your honeypot form field’s name in your form’s settings:
Then, include this field in your form, e.g. like this:
<form action="https://www.formmonkey.io/submit/9902e3199e61d203044e6981ae3b16a1" method="POST"> <input type="hidden" name="trapit" value=""> </form>
Spam Filtering with Keyword Spotting
In contrast to a hidden honeypot field, you can also match a particular form field for keywords, and ignore form submissions containing such keywords. “Viagra” might be one of the surely popular keywords, you might not expect in your form. Therefore, you might configure keyword spotting for “Viagra” like this, and automatically get rid of all respective form submissions:
Keywords are spotted in every field of your form. You do not need to define an individual field name.
Spam Filtering with Google reCaptcha
We provide you an implementation of Google’s reCaptcha v2. Google’s reCaptcha v2 displays a checkbox to the user, which needs to be checked before form submission can proceed. If user behaviour is conspicuous, Google then asks the user to select particular images from a presented set of options, e.g. all images containing traffic lights. You can enable or disable the use of this spam filter by clicking the respective toggle in your form’s setting:
If you enable this option, after submitting your form, your customer will be redirected to an intermediary website containing this reCaptcha, before the submission is saved and forwarded to you or your recipients.
Sending Confirmation Emails to customers
In case you want to send a confirmation email to each submitting customer, e.g. thanking him and depicting him the contents of the form he just submitted, you can do so be enabling the corresponding form option:
The contents of the confirmation email can be configured and customized. You can customize the name of the sender, in this case “Support”. You can also customize the subject line and the confirmation email’s body text. The form’s submission contents are automatically appended to the confirmation email’s body after your customized text.