Filemail can easily be integrated with Contact Form 7 and this article will show you how in a few steps.
You start by creating a new custom Contact form and set it up with all the fields you need.
At the place in the form where you want your file upload to be, you will add a small code snippet like this:
<div data-filemail-widget="form" data-companyid="xxxx" data-target="#transfer-url"></div>
[hidden transfer-url id:transfer-url]
<script type="text/javascript" src="https://www.filemail.com/widgets/embed/form"></script>
You can find your code snippet here https://www.filemail.com/settings#integration under "Integrated uploader in a form" section.
Required attributes
Name | Example value | Description |
data-filemail-widget | form | Required with value "form" |
data-companyid | your accounts specific value (usualy 9-13 characters or numbers) | Find this on your settings page under Integrations. Look for "companyid". |
data-target | #transfer-url | This is the selector of an HTML input element (which is part of your custom form) where you want us to insert the link to uploaded files. It's most convenient to use the input's id attribute - in that case the selector is prefixed with # sign |
Optional attributes:
Name | Example value | Description |
data-incoming-page-name
| custom1 | If you have created custom incoming pages in Filemail, you can specify which one of them to use here. |
data-height | 100 | Specify the height of this component |
data-color | #ba03fc | Set a custom color on the component |
data-to | Specify the to e-mail address if you don't want it to be the account default e-mail. It will appear in the Filemail inbox of this user(s) (multiple recipients are separated with comma). |
Results:
Your form should now look something like this:
Now try it out for yourself, you will see that after the upload finishes, it will look like this:
And the URL will have been inserted into your hidden field in the contact form
Now user can post the form with the link to files included. That link can be then injected it into the Contact Form 7 email (the one which you receive when people submit the form) like this:
Contact us on support@filemail.com or click the chat badge in the lower right corner if you need any help!