Please Note: We are no longer using forums to facilitate standard support. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Custom Browse AND Submit buttons

  1. I have modified the default settings for the submit button to use a custom image, but the submit button appears on a form where I also have file upload (with a browse button). I would like to use a custom image for the browse button as well and I suspect that I can set this through the style sheets, but cannot figure out how.

    Posted 3 years ago on Saturday December 10, 2011 | Permalink
  2. The file upload control is built-in browser functionality and is different in every browser and OS. It's not something you can accomplish within Gravity Forms.

    If you Google a bit for "styling the file upload button" you will get a lot of explanations and a lot of work arounds. This one seemed interesting:

    Posted 3 years ago on Sunday December 11, 2011 | Permalink
  3. I'm testing this a simplified variation of this technique with the file upload input from gravity forms. Its working.

    I'm not bothering with the lazy-loading the css. Just having the image I want in place is fine.

    Here is my sass:

      position: relative
      display: inline-block
      overflow: hidden
      width: 356px  // set to whatever the width of the form is
      opacity: 0
    .gform_fields li#field_1_12.gfield label.gfield_label
      background-color: #DDD //setting background colour for testing
      position: absolute
      width: 356px // set to width of form
      height: 50px
      background-image: url("/img/upload.png")  // image to replace the input
    Posted 3 years ago on Monday December 19, 2011 | Permalink
  4. sunil, do you have a page where we can see this in use? Thank you.

    Posted 3 years ago on Tuesday December 20, 2011 | Permalink
  5. Hi Chris.
    Sorry for the delay in my reply.

    I'm afraid I don't have this code on a live server. If displaying this would be valuable, I could set something up later today.

    (Thing is, I only have a single site license for gravity forms. The site for which I have purchased a license for is not live yet.
    If I showcase the technique using a GF instance on a demo site, how would this effect licensing?)

    There is a problem in my current implimentation of this technique:

    Using just styling rules that I have above, I replace the input with my own image. The image is a blank input form, styled the way I want it to look:

    The problem is, that once the file for upload is selected, the user sees no text. In an unstyled version, the user would see text, showing the path of the file. So, my implimentation violates the users expectations.

    I'll be experimenting further over the next few hours. I'll keep you posted on my progress.

    Posted 3 years ago on Tuesday January 3, 2012 | Permalink
  6. Just another quick note that might save people some time:

    There is a cool js tool that can be really useful for styling upload forms:

    However, my attempts to get this to work with gravity forms a couple of weeks ago failed.
    I'm afraid I don't remember why. All I have in my notes is that uniform.js doesn't work with GF. This might have something to assumptions that uniform makes about the markup that it will be applied to: it requires the markup to be structered in a particular way, and GF doesn't follow the expected structure.

    Posted 3 years ago on Tuesday January 3, 2012 | Permalink
  7. Ok, I got something to work. Here are the notes that I created as I went. They might be a little messy.
    I'm basing my technique on Pete Boere's method, at

    Notes follow:
    Step one:
    * Wrap target input in an element that we can give these styles to:
    display: inline-block
    overflow: hidden

    Peter uses 'label'. Can we do that?

    We get our input wrapped inside an oddball <span>, which is nested
    inside a div. This span seems weirdly resistant to styling.

    Let's try and treat the div that way that he treats the label

    The innermost wrapping element, .ginput_full seems to be utterly
    resistant to resizing.
    So, I'm targeting '#field_1_12", which is the list item.
    Ok... we can do that. Kewl. So far, so good.

    Next, we hide the actual input.
    Yup, we can do that. That was easy. But now we want to add our visual
    "browse" button.

    In order to do this, I target this element.
    #field_1_12 .gfield_label
    I give it these rules:

    #field_1_12 .gfield_label
      position: absolute
      background-color: #7a7a7a
      right: -290px
      top: 2px
      width: 70px
      height: 30px
      -webkit-border-radius: 8px
      -moz-border-radius: 8px
      border-radius: 8px
      background-image: url("/img/browse.png")

    Ok, the user can still click on it, and get the file selection
    dialogue. Cool.

    So, now we need to give the user feedback. User wants to have their
    expectation of feedback met - we have to let them know that we know
    which file they have selected.

    At this point, we need to throw away our sense of integrity when it
    comes to such aloof concerns as "seperation of content". *sigh

    We use jquery to keep a div within the form to display the name of the
    file. I inject with js:

    // insert a div and exploit it's presence
    	var displayDiv = "<div id=\"file-display\"><p></p></div> " ;
    	$("#field_1_12").append(displayDiv) ;

    Now we need to make sure that the display div show shows the selected file.

    var target = $("#field_1_12 input") ;
    	   var fileDisplay =  $("#file-display p") ;
    	    fileDisplay.empty() ;
    	    fileDisplay.append( $("#field_1_12 input").val()) ;
    	}) ;

    And, we are done.
    This works for me.

    I have, however, not thoroughly tested it yet across browsers. I
    expect that the behaviours will work just fine.

    Posted 3 years ago on Wednesday January 4, 2012 | Permalink
  8. Thank you for posting that code sunil.

    Posted 3 years ago on Wednesday January 4, 2012 | Permalink
  9. No problem Chris.

    Reading my notes now, I can see they are indeed pretty messy. So, just to clarify a couple of things for people who want to style their upload inputs:

    * I use Peter's basic tecnique for hiding the input, replacing it, and emulating it's behaviour.

    * However, my the end goal for me was not to re-create the end result that he produces in his demo, but to give the appearance of what you would expect if you actually could style an upload input.

    My end result looks like this:

    Posted 3 years ago on Friday January 6, 2012 | Permalink
  10. Thanks once again sunil. I'm sure your words will help someone in the future.

    Posted 3 years ago on Friday January 6, 2012 | Permalink


Support Tickets

Open A New Support Ticket
 Open A New Priority Support Ticket *

* Developer license holders only