Contact Form File Upload Field

Add a file upload field to the contact form.

Wireframe

File Upload Form


Preparation Checklist

Before you start this tweak, it's a good idea to run through our Preparation Checklist below:


Coding Instructions

Step 1: Edit the contact form

In the control panel, navigate to Webstore > Form and select the "Contact Us" form.

Note: If you can't see the "form" link in your control panel, you'll need to enable the content type menu link. Navigate to Setup & tools > All Settings & Tools > Content Types Manager > form, and tick the Show in control panel menu box.

Step 2: Add code to your HTML form

On the Contact Us form, scroll down to the "Page Content" section and click the Form tab.

Click the "Source Code" button and paste the following parameter into the opening form tag enctype="multipart/form-data". Eg. <form action="[%URL nohost:'1' type:'page' id:'[@content_id@]'%][%END URL%]" enctype="multipart/form-data" method="post"><input name="inp-submit" type="hidden" value="y" />.

Paste the below code where you'd like your file upload field to appear:

<div class="form-group"><label>File Upload</label>
    <input class="form-control" name="inp-file" size="40" type="file" value="" />
</div>

Step 3: Update contact form settings

Scroll down to the "Module settings" section, and enter the following info:

  • Form upload field: file
  • Form upload type: Any File

Final Result

File Upload Form

Was this article useful?

Be notified when this page is updated. Optional.