Gravity Support Forums Topic: Custom Browse AND Submit buttons

Gravity Support Forums Topic: Custom Browse AND Submit buttons https://legacy.forums.gravityhelp.com/topic/custom-browse-and-submit-buttons Gravity Support Forums Topic: Custom Browse AND Submit buttons en-US Wed, 22 Apr 2026 03:09:53 +0000 http://bbpress.org/?v=1.0.1 <![CDATA[Search]]> q https://legacy.forums.gravityhelp.com/search.php Chris Hajer on "Custom Browse AND Submit buttons" https://legacy.forums.gravityhelp.com/topic/custom-browse-and-submit-buttons#post-45672 Thu, 05 Jan 2012 21:49:31 +0000 Chris Hajer 45672@https://legacy.forums.gravityhelp.com/ Thanks once again sunil. I'm sure your words will help someone in the future. sunil on "Custom Browse AND Submit buttons" https://legacy.forums.gravityhelp.com/topic/custom-browse-and-submit-buttons#post-45654 Thu, 05 Jan 2012 20:54:38 +0000 sunil 45654@https://legacy.forums.gravityhelp.com/ 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: <a href="http://imgur.com/ajkQ0" rel="nofollow">http://imgur.com/ajkQ0</a> Chris Hajer on "Custom Browse AND Submit buttons" https://legacy.forums.gravityhelp.com/topic/custom-browse-and-submit-buttons#post-45500 Wed, 04 Jan 2012 18:53:02 +0000 Chris Hajer 45500@https://legacy.forums.gravityhelp.com/ Thank you for posting that code sunil. sunil on "Custom Browse AND Submit buttons" https://legacy.forums.gravityhelp.com/topic/custom-browse-and-submit-buttons#post-45412 Wed, 04 Jan 2012 02:00:14 +0000 sunil 45412@https://legacy.forums.gravityhelp.com/ 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 <a href="http://the-echoplex.net/log/how-to-style-a-html-file-upload-control-using-css-and-javascript" rel="nofollow">http://the-echoplex.net/log/how-to-style-a-html-file-upload-control-using-css-and-javascript</a> 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? Maybe.... We get our input wrapped inside an oddball , 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: <pre><code>#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")</code></pre> 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: <pre><code>// insert a div and exploit it's presence var displayDiv = "<div id=\"file-display\"></div> " ; $("#field_1_12").append(displayDiv) ;</code></pre> Now we need to make sure that the display div show shows the selected file. <pre><code>var target = $("#field_1_12 input") ; target.change(function(){ var fileDisplay = $("#file-display p") ; fileDisplay.empty() ; fileDisplay.append( $("#field_1_12 input").val()) ; }) ;</code></pre> 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. sunil on "Custom Browse AND Submit buttons" https://legacy.forums.gravityhelp.com/topic/custom-browse-and-submit-buttons#post-45385 Tue, 03 Jan 2012 19:50:45 +0000 sunil 45385@https://legacy.forums.gravityhelp.com/ 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: <a href="http://uniformjs.com/" rel="nofollow">http://uniformjs.com/</a> 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. sunil on "Custom Browse AND Submit buttons" https://legacy.forums.gravityhelp.com/topic/custom-browse-and-submit-buttons#post-45383 Tue, 03 Jan 2012 19:29:36 +0000 sunil 45383@https://legacy.forums.gravityhelp.com/ 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: <a href="http://imgur.com/3aZNN" rel="nofollow">http://imgur.com/3aZNN</a> 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. Chris Hajer on "Custom Browse AND Submit buttons" https://legacy.forums.gravityhelp.com/topic/custom-browse-and-submit-buttons#post-44473 Tue, 20 Dec 2011 00:25:29 +0000 Chris Hajer 44473@https://legacy.forums.gravityhelp.com/ sunil, do you have a page where we can see this in use? Thank you. sunil on "Custom Browse AND Submit buttons" https://legacy.forums.gravityhelp.com/topic/custom-browse-and-submit-buttons#post-44426 Mon, 19 Dec 2011 18:30:11 +0000 sunil 44426@https://legacy.forums.gravityhelp.com/ 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: <pre><code>[css] .ginput_full 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</code></pre> Chris Hajer on "Custom Browse AND Submit buttons" https://legacy.forums.gravityhelp.com/topic/custom-browse-and-submit-buttons#post-43680 Sun, 11 Dec 2011 00:51:32 +0000 Chris Hajer 43680@https://legacy.forums.gravityhelp.com/ 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 "<a href="http://www.google.com/search?gcx=w&ix=c1&sourceid=chrome&ie=UTF-8&q=styling+the+file+upload+button" rel="nofollow">styling the file upload button</a>" you will get a lot of explanations and a lot of work arounds. This one seemed interesting: <a href="http://the-echoplex.net/log/how-to-style-a-html-file-upload-control-using-css-and-javascript" rel="nofollow">http://the-echoplex.net/log/how-to-style-a-html-file-upload-control-using-css-and-javascript</a> cshaffstall on "Custom Browse AND Submit buttons" https://legacy.forums.gravityhelp.com/topic/custom-browse-and-submit-buttons#post-43661 Sat, 10 Dec 2011 17:50:41 +0000 cshaffstall 43661@https://legacy.forums.gravityhelp.com/ 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.