https://legacy.forums.gravityhelp.com/topic/change-the-post-image-upload-from-input-to-button Gravity Support Forums Topic: Change the post image upload from input to button en-US Wed, 22 Apr 2026 09:21:42 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/change-the-post-image-upload-from-input-to-button#post-19383 Fri, 25 Feb 2011 05:44:40 +0000 fraggy 19383@https://legacy.forums.gravityhelp.com/ <p>Hi 2urn,</p> <p>Sorry, just got this reply now!</p> <p>Firstly, download uniform.</p> <p>Upload it to your theme's JS folder and call it. I use enqueue_script like this (this also removes jQuery from the header of the site and moves it to the bottom):</p> <pre><code>function my_init() { if (!is_admin()) { wp_deregister_script(&#39;jquery&#39;); wp_register_script(&#39;jquery&#39;, &#39;/wp-includes/js/jquery/jquery.js&#39;, false, &#39;1.4.2&#39;, true); wp_enqueue_script(&#39;jquery&#39;); wp_enqueue_script(&#39;uniform&#39;, get_bloginfo(&#39;template_url&#39;) . &#39;/js/jquery.uniform.min.js&#39;, array(&#39;jquery&#39;), &#39;1.0&#39;, true); } } add_action(&#39;init&#39;, &#39;my_init&#39;);</code></pre> <p>Next add the stylesheet to the page you want it to appear on.</p> <p>Then target the elements you want to make pretty with:</p> <p><code>jQuery(&quot;select, input:file&quot;).uniform();</code></p> <p>I then set the image with gravity forms for the submit and upload buttons.</p> <p>I hope this helps. If you have any more questions, please let me know! </p> https://legacy.forums.gravityhelp.com/topic/change-the-post-image-upload-from-input-to-button#post-15286 Sun, 02 Jan 2011 01:44:20 +0000 2urn 15286@https://legacy.forums.gravityhelp.com/ <p>Any additional tips / details on how you got Uniform ( <a href="http://pixelmatrixdesign.com/uniform/" rel="nofollow">http://pixelmatrixdesign.com/uniform/</a> ) installed configured to work with GF?</p> <p>Thanks! </p> https://legacy.forums.gravityhelp.com/topic/change-the-post-image-upload-from-input-to-button#post-13783 Thu, 02 Dec 2010 10:23:22 +0000 fraggy 13783@https://legacy.forums.gravityhelp.com/ <p>Aha! Well that worked a treat! Shame I can't make it work with ajax. but that will do I suppose. </p> https://legacy.forums.gravityhelp.com/topic/change-the-post-image-upload-from-input-to-button#post-13782 Thu, 02 Dec 2010 10:00:03 +0000 Kevin Flahaut 13782@https://legacy.forums.gravityhelp.com/ <p>The ajax setting is part of the shortcode or function call when you embed the form.</p> <p><code>[gravityform id=1 name=UntitledForm ajax=true]</code></p> <p>you just need to remove the "ajax=true' portion. </p> https://legacy.forums.gravityhelp.com/topic/change-the-post-image-upload-from-input-to-button#post-13781 Thu, 02 Dec 2010 09:53:22 +0000 fraggy 13781@https://legacy.forums.gravityhelp.com/ <p>Excuse my ignorance, where is the disable ajax option on the submission? I can't find it? </p> https://legacy.forums.gravityhelp.com/topic/change-the-post-image-upload-from-input-to-button#post-13780 Thu, 02 Dec 2010 09:44:54 +0000 Kevin Flahaut 13780@https://legacy.forums.gravityhelp.com/ <p>The script is most likely applying properties to the button/input elements on the body or window load. When you submit the form via ajax, there is no-reloading so any subsequent buttons or inputs won't receive the dynamic styling.</p> <p>I'm not that familiar with this script. You may need to browse their documentation, forums, etc. to find out how to get the script to work with ajax-submitted forms.</p> <p>You can always try disabling the ajax submission and see if it works for you that way. I would assume it does. </p> https://legacy.forums.gravityhelp.com/topic/change-the-post-image-upload-from-input-to-button#post-13779 Thu, 02 Dec 2010 08:58:45 +0000 fraggy 13779@https://legacy.forums.gravityhelp.com/ <p>To give an update. I used the jQuery plugin Uniform to style the button - <a href="http://pixelmatrixdesign.com/uniform/" rel="nofollow">http://pixelmatrixdesign.com/uniform/</a></p> <p>It works good, but the only thing is that the validation fails on the form, the styling breaks. From looking at it, it looks like the jQuery isn't applied when the validation passes. And unluckily for me, I'm not an expert on the jQuery. So any help would be greatly appreciated. My form is here <a href="http://www.ratemypoo.eu" rel="nofollow">http://www.ratemypoo.eu</a> (I know, it was a bit of an idea from me and my mates!) </p> https://legacy.forums.gravityhelp.com/topic/change-the-post-image-upload-from-input-to-button#post-13751 Wed, 01 Dec 2010 18:53:36 +0000 fraggy 13751@https://legacy.forums.gravityhelp.com/ <p>Thank you, </p> <p>I think I'll just have to leave it as it is then.</p> <p>Unless, can I use the HTML field to make an upload button that attaches itself to the new post? I'm using the form to create new posts. </p> https://legacy.forums.gravityhelp.com/topic/change-the-post-image-upload-from-input-to-button#post-13750 Wed, 01 Dec 2010 18:35:59 +0000 Carl Hancock 13750@https://legacy.forums.gravityhelp.com/ <p>I don't believe it is possible to do this with CSS alone. Every browser handles the file upload form element differently, and I do not believe there is a universal way to use an image for the button on the file upload element with CSS alone. You may have to use Javascript. </p> <p>Here is an article that discusses the issue, although i'm not sure if this technique will work with Gravity Forms:</p> <p><a href="http://www.quirksmode.org/dom/inputfile.html" rel="nofollow">http://www.quirksmode.org/dom/inputfile.html</a></p> <p>But typically the input type="file" is an element that is difficult to style. </p> https://legacy.forums.gravityhelp.com/topic/change-the-post-image-upload-from-input-to-button#post-13748 Wed, 01 Dec 2010 18:29:04 +0000 fraggy 13748@https://legacy.forums.gravityhelp.com/ <p>Hello again,</p> <p>I am having trouble styling the input for the upload input. I've tried with jQuery and I have it working on FF and Chrome on the Mac but not Safari. Need to test in IE.</p> <p>Is it possible to change it to a button so that I can have more control over it? I have read the other post here <a href="http://forum.gravityhelp.com/topic/button-element-rather-than-input-available" rel="nofollow">http://forum.gravityhelp.com/topic/button-element-rather-than-input-available</a> but it is a very old one. Any news? </p>