MODx Revolution – Adding an Attachment Field to a FormIt Form

In this brief tutorial, I am going to show you how to add the capability to send and receive attachments with your FormIt form. This tutorial will be building on the MODx Revolution Beginner series and therefore we will just add to the contact form we created in the FormIt tutorial. I therefore recommend that if you’re not familiar with FormIt you read that tutorial first.

I will admit here that I’m not entirely sure whether or not the FormIt snippet has a hook specifically for dealing with attachments, if you know of one please let me know in the comments. The method I outline here is the one I use and it works well and is simple to implement.

The form we’ve created so far has the following fields – name, email, phone, ext, message, and a captcha.

What we would like to do is add a field that will allow out site user to upload a file and attach it to the form. We then want that file to be sent to us as an email attachment. This is a pretty straightforward process. Let’s get started.

Set the Form enctype

The first and most important thing we need to do is set the enctype attribute of the form. Usually, this is an attribute that most users don’t set, and that’s generally fine because if not set, all HTML forms will default to “application/x-www-form-urlencoded”, which is fine for sending emails. However, if you want to add files to the mix, you need to set the enctype attribute to “multipart/form-data”. You can read more about enctype and other form attributes at the w3 website linked to at the end of this post.

This attribute specifies the content type used to submit the form to the server (when the value of method is “post”). The default value for this attribute is “application/x-www-form-urlencoded”. The “multipart/form-data” value should be used in combination with the INPUT element, type=”file”.

Let’s open our contact page and edit our contact form code to add the enctype attribute to the very first line that opens our form and sets it attributes:

Now that that’s done, our form is ready to handle attachments, and all we need to do is add the upload field.

Adding the Attachment Upload Field

We will now add a field to our form that has a type of “file”, and we will give it the name contact_attachment. I will add this field to my form code after the message area and before the reCaptcha box, like so:

If we look at the form, you can see there’s a new field for attaching a file:

So let’s now test the form to see what happens:

You can see there that jane doe has decided to send me some buttons since she really likes my website 🙂 This is what my inbox looks like when the message comes through. You can see that this time the message from the website has an attachment to it:

And on opening the email, we can see that the file marys-buttons.zip that jane doe sent me is successfully attached to my email and I can now click on it to download the file, open it, and enjoy my gift 🙂

Conclusion

This brings us to the end of this brief tutorial on how to add an attachment field to your MODx Revolution FormIt contact form. We have learned that we need to add the enctype attribute to our form and then add a field of type file. I encourage you to take some time and read the w3 link below if you want to understand more about forms in general.

28 Comments

Re: your question about an attachment hook; no, FormIt doesn’t have one. What it does instead is in the “email” hook, it automatically processes the attachment as a field and attaches it to the email. So, in that sense, the email hook automatically handles your attachments without need for configuration.

Strochli
I assume you mean upload the attachment to a folder in your server and then save a reference to it in the database? I’m sure it’s doable, but I personally haven’t had a need for that functionality so I haven’t done it. If I do then I’ll write a tut on it 🙂

I already used formit2db to save a form into a database and it works fine – for text form fields. I’m looking for a way to save a document (.doc, .pdf) directly to a mysql database table, without saving it to the webserver before.

I’m having the same problem as Francis. I have the enctype set correctly and the form fields set correctly (according to all instructions). However, no attachment comes through. I get the rest of the email just find and I see no errors. Am I missing something?

Mary, do you know much about Validating the attached file during this process? I’ve got this exact set up but I feel that it’s probably extremely vulnerable to attacks… do you know how I could go about the following:

a) Adding a file-type restriction (so only certain types of files are allowed to be uploaded).

b) Adding file-size checks (so they can’t click upload if the file is larger than the allowed file size)

c) Any other security features that could limit the chances of malicious scripts being uploaded to my server, or worse emailed to a client.

However, bear in mind that this method as outlined here is simply attaching files to be sent by email, not necessarily uploaded and stored in your server. So where you need to exercise care is in opening the attachments on your end.

Thanks Mary, I’ll check out the link and see what I can work out.
As I understand it; before the email can be sent with the attachment, the file gets uploaded to a temp directory on your server. I would imagine doing this with no validation at all would be a big security risk. When I find a nice solution to help with this, I’ll post it here 🙂