What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Replace upload field with a custom upload button image

    Asked by emilevdende on November 03, 2014 at 08:18 AM

    Custom File upload (input type=file) button

    Hi!

    I have been fiddling with getting the file upload component (not the multiple file upload) to be showing a custom button (because I don't like the standard browser button).

    Found a very simple piece of html/css to make this work. It actually works pretty well when I set this up in a test environment, no Jotform whatsoever.

    Now, as soon as I try to incorporate this into my Jotform, I have trouble making sure that the button is actually clickable. I can get it to work a bit, but clicking on the button image itself does not do anything, some area around it triggers the actual action. I obviously would like the button image to be clickable only, not the area around it.

    Can you help me out getting this to work? This does not need to be a perfect cross-browser solution, I will only use the form in webkit browsers. I don't actually need a written label, the button is enough.

    Thanks in advance!!

    Kind regards,

    Emile

     

    =======================

    <body>

    <style type="text/css">

    .image-upload > input

    {

        display: none;

    }

    style>

     

    <div class="image-upload">

        <label for="file-input">

            <img src="button.png"/>

        label>

        <input id="file-input" type="file"/>

    div>

     

    body>

     

    Page URL:
    http://form.jotformpro.com/form/43063497580965

    single upload upload button image upload button
  • Profile Image

    Answered by jedcadorna on November 03, 2014 at 08:58 AM

    Please try the area tag and use some coordinates to target a certain area of the image to be clickable. Check this guide http://www.w3schools.com/tags/tag_area.asp.

    You can view the sample in here http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap. As you can see that when hovering over a planet makes it clickable. Try it and let us know if it still unable to resolve your problem.

  • Profile Image

    Answered by emilevdende on November 03, 2014 at 02:21 PM

    Hi Jedcadorna,

     

    Thank you for your reply. This is not exactly what I'm looking for.

    My interest goes out to making sure that my full image is clickable, not a part of it.

    But I pretty much fixed it myself, I made a typo in the label for element. Now it works like a charm, really an easy way to set your own file upload button instead of ugly browser controls!

     

    Thanks again!

    Emile

  • Profile Image
    JotForm Support

    Answered by Mike_T on November 03, 2014 at 03:47 PM

    We are glad to hear that you have found a way to work around it.

    Thank you for sharing your code example.