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:
<form id="contactForm" class="cmxform" method="post" action="[[~[[*id]]]]" enctype="multipart/form-data">
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:
. . . <div> <label for="contact_message">Your comment </label><em>(required)</em><br /> <textarea id="contact_message" class="required" cols="70" rows="7" name="contact_message">[[!+fi.contact_message]]</textarea> </div> <div> <label for="contact_attachment">Attach a File </label><em>(optional)</em><br /> <input type="file" name="contact_attachment" value="[[!+fi.contact_attachment]]" /> </div> [[+formit.recaptcha_html]] [[!+fi.error.recaptcha]] . . .
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 🙂
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.