Forum

Thread tagged as: Question, Problem, Forms

Form file input

I'm setting up a Perch form and I had it working, but the client requested a change a section of the form to accommodate the upload of a file by the user. My form code looks like this right now:

<perch:form id="careers" method="post" class="no-bottom" app="perch_forms">

    <div class="row">
        <div class="col-sm-6">
            <perch:label for="name" class="sr-only">Name</perch:label>
            <perch:input type="text" class="underline" id="name" required="true" label="Name" placeholder="Your Name" />
            <perch:error for="name" type="required">Please add your name</perch:error>
            <div class="margin-3"></div>
        </div>
        <div class="col-sm-6">
            <perch:label for="email" class="sr-only">Email</perch:label>
            <perch:input type="email" class="underline" id="email" required="true" label="Email" placeholder="Your Email" />
            <perch:error for="email" type="required">Please add your email address</perch:error>
            <perch:error for="email" type="format">Please check your email address</perch:error>
            <div class="margin-3"></div>
        </div>
    </div>

    <perch:label for="linkedin" class="sr-only">LinkedIn Profile, if available</perch:label>
    <perch:input type="url" class="underline" id="linkedin" label="LinkedIn Profile" placeholder="LinkedIn Profile, if available" />

    <perch:label for="url" class="sr-only">Portfolio URL, if applicable</perch:label>
    <perch:input type="url" class="underline" id="url" label="Portfolio URL" placeholder="Portfolio website, if applicable" />

    <perch:label for="position" class="sr-only">Position of Interest</perch:label>
    <perch:input type="text" class="underline" id="position" label="Position of Interest" placeholder="Position you're interested in." />

    <perch:label for="date" class="sr-only">Date Available to Start</perch:label>
    <perch:input type="text" class="underline" id="date" label="Start Availability" placeholder="Date Available to Start" />

    <perch:label for="cover-letter" class="sr-only">Please upload your cover letter. Adobe pdf or Word doc only.</perch:label>
    <perch:input type="file" id="cover-letter" accept="pdf doc" required />

    <perch:label for="resume" class="sr-only">Please upload your resume. Adobe pdf or Word doc only.</perch:label>
    <perch:input type="file" id="resume" accept="pdf doc" required />

    <perch:label for="message" class="sr-only">Additional Message</perch:label>
    <perch:input type="textarea" class="underline" id="message" label="Message" cols="30" rows="5" placeholder="Any additional information you'd like us to consider." />

    <div class="margin-2"></div>
    <perch:input type="submit" id="submit" value="Send" />

</perch:form>

However, when I fill out the form it does not take me to the completion page set up in the Forms App and it does not upload the form contents. When I remove the file form input, it works, so I know that's the problem. I've never had call to use this form element before, can someone tell me what mistake I'm making?

Lindsay Masten

Lindsay Masten 0 points

  • 5 years ago
Rachel Andrew

Rachel Andrew 394 points
Perch Support

You can't just use required. These tags are not HTML. You need to have fully formed Perch tags so required="true".

https://docs.grabaperch.com/docs/templates/attributes/required/

Sorry for the delay in response. I have fixed the tags, but I'm still having trouble with the form's file upload fields. When I remove them, the form works. When they're 'on' the form does not complete correctly and no response is stored in the form app inside Perch.

Here is the snippet of Perch code being used:

<perch:form id="careers" method="post" class="no-bottom" app="perch_forms">

                        <div class="row form">
                            <div class="col-sm-6">
                                <perch:label for="name" class="sr-only">Name</perch:label>
                                <perch:input type="text" class="underline" id="name" required="true" label="Name" placeholder="Your Name" />
                                <perch:error for="name" type="required">Please add your name</perch:error>
                                <div class="margin-3"></div>
                            </div>
                            <div class="col-sm-6">
                                <perch:label for="email" class="sr-only">Email</perch:label>
                                <perch:input type="email" class="underline" id="email" required="true" label="Email" placeholder="Your Email" />
                                <perch:error for="email" type="required">Please add your email address</perch:error>
                                <perch:error for="email" type="format">Please check your email address</perch:error>
                            </div>
                        </div>

                        <perch:label for="linkedin">LinkedIn Profile URL, if available</perch:label>
                        <perch:input type="url" class="underline" id="linkedin" label="LinkedIn Profile" placeholder="https://..." />

                        <perch:label for="url">Portfolio website URL, if applicable</perch:label>
                        <perch:input type="url" class="underline" id="url" label="Portfolio URL" placeholder="https://..." />

                        <perch:label for="position">Position you're interested in.</perch:label>
                        <perch:input type="text" class="underline" id="position" label="Position of Interest" placeholder="Title or area of interest." />

                        <perch:label for="date">Date available to start.</perch:label>
                        <perch:input type="text" class="underline" id="date" label="Start Availability" placeholder="xx/xx/xx" />

                        <perch:label for="cover-letter">Please upload your cover letter. Adobe pdf or Word doc only.</perch:label>
                        <perch:input type="file" id="cover-letter" accept="pdf" />

                        <perch:label for="resume">Please upload your resume. Adobe pdf or Word doc only.</perch:label>
                        <perch:input type="file" id="resume" accept="pdf" />

                        <perch:label for="message">Additional message?</perch:label>
                        <perch:input type="textarea" class="underline" id="message" label="Message" cols="30" rows="5" placeholder="Any additional information you'd like us to consider." />

                        <div class="margin-2"></div>
                        <perch:input type="submit" id="submit" value="Send" />

                    </perch:form>

.... and here is the code that's being generated in the browser:

<form id="form1_careers" class="no-bottom" action="/culture/careers" method="post" enctype="multipart/form-data">

                        <div class="row form">
                            <div class="col-sm-6">
                                <label class="sr-only" for="form1_name">Name</label>
                                <input id="form1_name" name="name" class="underline" value="okay go" placeholder="Your Name" type="text" required="required">

                                <div class="margin-3"></div>
                            </div>
                            <div class="col-sm-6">
                                <label class="sr-only" for="form1_email">Email</label>
                                <input id="form1_email" name="email" class="underline" value="not@not.com" placeholder="Your Email" type="email" required="required">


                            </div>
                        </div>

                        <label for="form1_linkedin">LinkedIn Profile URL, if available</label>
                        <input id="form1_linkedin" name="linkedin" class="underline" value="https://linkedin.com" placeholder="https://..." type="url">

                        <label for="form1_url">Portfolio website URL, if applicable</label>
                        <input id="form1_url" name="url" class="underline" value="https://hellojuice.com" placeholder="https://..." type="url">

                        <label for="form1_position">Position you're interested in.</label>
                        <input id="form1_position" name="position" class="underline" value="not" placeholder="Title or area of interest." type="text">

                        <label for="form1_date">Date available to start.</label>
                        <input id="form1_date" name="date" class="underline" value="030405" placeholder="xx/xx/xx" type="text">

                        <label for="form1_cover-letter">Please upload your cover letter. Adobe pdf or Word doc only.</label>
                        <input id="form1_cover-letter" name="cover-letter" accept="pdf" type="file">

                        <label for="form1_resume">Please upload your resume. Adobe pdf or Word doc only.</label>
                        <input id="form1_resume" name="resume" accept="pdf" type="file">

                        <label for="form1_message">Additional message?</label>
                        <textarea id="form1_message" name="message" class="underline" cols="30" rows="5" placeholder="Any additional information you'd like us to consider."></textarea>

                        <div class="margin-2"></div>
                        <input id="form1_submit" name="submit" value="Send" type="submit"><input type="hidden" name="cms-form" value="Y2FyZWVyczpwZXJjaF9mb3JtczovdGVtcGxhdGVzL2NvbnRlbnQvY2FyZWVyc19mb3JtLmh0bWw6MTQ1NzM1MzU0Nw==">

                    </form>

I have set up a folder outside the website on the server to house the file uploads at /home/taysf/form, and made that folder writeable. I entered that upload location into the forms app here:

form setup

Thanks for your help, this has me pulling my hair out.

Drew McLellan

Drew McLellan 2638 points
Perch Support

You've got accept="pdf doc" - are pdf and doc defined in your filetypes.ini file?

Hi Drew,

They are now, and I've also tried (in the file originally) richtext, office, and narrowing it down to pdf only as a test. :-/ No luck so far.

Drew McLellan

Drew McLellan 2638 points
Perch Support

If you remove that attribute, does it work?

When I remove the file input items the form works as expected.

Drew McLellan

Drew McLellan 2638 points
Perch Support

Do you have the FileInfo extension installed on your server?

Hi Drew, it looks like I don't, or more accurately, it's disabled. I called my host since there doesn't seem to be a a straightforward way to turn it on. You wouldn't know a general way to get that done, would you?

(My understanding of how to enable FileInfo is through EasyApache, but I don't see it in the host I have to use.)

Drew McLellan

Drew McLellan 2638 points
Perch Support

If you have access to the php.ini file you should be able to find it in there.