Hello again,
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.
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 http://forum.gravityhelp.com/topic/button-element-rather-than-input-available but it is a very old one. Any news?
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.
Here is an article that discusses the issue, although i'm not sure if this technique will work with Gravity Forms:
http://www.quirksmode.org/dom/inputfile.html
But typically the input type="file" is an element that is difficult to style.
To give an update. I used the jQuery plugin Uniform to style the button - http://pixelmatrixdesign.com/uniform/
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 http://www.ratemypoo.eu (I know, it was a bit of an idea from me and my mates!)
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.
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.
You can always try disabling the ajax submission and see if it works for you that way. I would assume it does.
The ajax setting is part of the shortcode or function call when you embed the form.
[gravityform id=1 name=UntitledForm ajax=true]
you just need to remove the "ajax=true' portion.
Any additional tips / details on how you got Uniform ( http://pixelmatrixdesign.com/uniform/ ) installed configured to work with GF?
Thanks!
Hi 2urn,
Sorry, just got this reply now!
Firstly, download uniform.
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):
function my_init() {
if (!is_admin()) {
wp_deregister_script('jquery');
wp_register_script('jquery', '/wp-includes/js/jquery/jquery.js', false, '1.4.2', true);
wp_enqueue_script('jquery');
wp_enqueue_script('uniform', get_bloginfo('template_url') . '/js/jquery.uniform.min.js', array('jquery'), '1.0', true);
}
}
add_action('init', 'my_init');Next add the stylesheet to the page you want it to appear on.
Then target the elements you want to make pretty with:
jQuery("select, input:file").uniform();
I then set the image with gravity forms for the submit and upload buttons.
I hope this helps. If you have any more questions, please let me know!