Forums

add extra file upload field to existing form

maxone 31 Aug, 2011
Hi,

We had a web agency design our site and they created a form using chrono form.

http://visionmodels.co.uk/join-us.html

I simply want to edit the form and have a decent understanding of html myself.

At the moment the form only allows for one photo to be uploaded but we want 5 photos.

How would I go about editing this?

Also the form seems to be using the multi page plug in. I can see which page has the relevant form code: it's form_1 (don't think that's important but just sayin)

Anyway the code is:


<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Age</label>
    <input class="cf_inputbox" maxlength="150" size="30" title="" id="text_3" name="age" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_fileupload">
    <label class="cf_label" style="width: 150px;">Upload Picture</label>
    <input class="cf_fileinput cf_inputbox" title="" size="20" id="file_4" name="file" type="file" />
    
  </div>
  <div class="cfclear"> </div>
</div>


I had a go duplicating it but not sure what exactly to change?

Thanks
GreyHead 31 Aug, 2011
Hi Maxone,

I suggest that you first make a copy of the form using the Copy icon in the Forms Manager Toolbar. Just in case something goes wrong. Open the new copy by clicking the Name link and change the form name t something like form_1a.

Click the plug-ins tab and see if any Plug-ins are enabled - they should have a green bar if they are. Let us know here if the image resize plug-in is being used - that will only work with a single file upload.

Close the form check the box by the name and click the Wizard Edit icon in the toolbar. Hopefully it will open with a warning message. Close the message.

Drag a second File elements into the form; click on it and change the properties to set the input name and label.

Save from the Wizard by clicking the disk icon.

Open the Form Editor again and go to the Upload Files tab. You'll need to edit the 'Field names/allowed Extensions/sizes(KB)' box to add the second upload input.

Check that the form works.

Repeat as necessary; you can add more than one input at a time when you've got the hang of it.

Bob
maxone 31 Aug, 2011
Thanks for getting back to me.

"Click the plug-ins tab and see if any Plug-ins are enabled - they should have a green bar if they are. Let us know here if the image resize plug-in is being used - that will only work with a single file upload."

This plug in is not enabled

"Close the form check the box by the name and click the Wizard Edit icon in the toolbar. Hopefully it will open with a warning message. Close the message."

No warning appeared. And no edit wizard appeared. i can only update the form using HTML now it has been crated i believe.

Also I made a copy but the styling is all messed up because the original form was styled using css that i presume doesn't relate to the copied form.

Can I not duplicate the code and just give it a new ID? ie id="file_5"?

Then, because the forms are emailed won't i have to add the new field to the email template? This is just my theory, I don't actually know exactly how to do it.

Thanks so much for help, i am getting pretty frustrated🙂
GreyHead 31 Aug, 2011
Hi maxone,

Yes you can edit the Form HTML copy the block with the file upload and give it both a new id and a new name.
<div class="form_item">
  <div class="form_element cf_fileupload">
    <label class="cf_label" style="width: 150px;">Upload Picture</label>
    <input class="cf_fileinput cf_inputbox" title="" size="20" id="file_5" name="file_5" type="file" />
  </div>
  <div class="cfclear"> </div>
</div>


The new attachments should automatically be sent with the email.

Bob
maxone 31 Aug, 2011
Hi,

Well the new box has appeared... however now when I choose the file, it seems that it uploads, but when I hit next (relating to the multipage plug in i believe) the page just seems to refresh and it doesn't take me to the next page?

**OK that i think is to do with trying to select the same image over and over again in my tests. when i try a new image from a new folder it does upload**

But only the one image is attaching itself to the email. IS there a fix for this?

I'm getting upset😟

Thanks so much again for helping, if we get this resolved i will "buy you a beer" i promise🙂
GreyHead 31 Aug, 2011
Hi maxone,

Did you update the File Uploads tab entry to include the new file inputs - see my earlier post?

Bob
maxone 31 Aug, 2011
Hi,

I looked at that box but to be honest wasn't sure what to change?

file:doc|docx|ppt|pptx|zip|rar|jpg|jpeg|gif|png{30000-10}

It looks like it's just asking what type of files are allowed to me... not sure what to add?

Have added screen grab

GreyHead 31 Aug, 2011
Hi maxone,

You need a similar entry for each file input. If you have named them file, file_1, file_2, file_3, file_4 then it will look like this:
file:doc|docx|ppt|pptx|zip|rar|jpg|jpeg|gif|png{30000-10},file_1:doc|docx|ppt|pptx|zip|rar|jpg|jpeg|gif|png{30000-10},file_2:doc|docx|ppt|pptx|zip|rar|jpg|jpeg|gif|png{30000-10},file_3:doc|docx|ppt|pptx|zip|rar|jpg|jpeg|gif|png{30000-10},file_4:doc|docx|ppt|pptx|zip|rar|jpg|jpeg|gif|png{30000-10}

If you are expecting image uploads then you can probably shorten the file-types list to something like this:
jpg|png|pdf


Bob
maxone 31 Aug, 2011
Hmmm...

Still not working. I PMed you about doing this for me on a payment basis?

Did you get my PM? If not PM me to discuss.

Thanks,
Max
This topic is locked and no more replies can be posted.