Update: 6/8/2018 – I’ve revamped my function to clone the original select and hide it to better work with all Gravity Forms functionality. Including conditional forms. Check it out below or see the gist.
Update: 2/11/15 – I’ve created a short jQuery function that makes the method in this post irrelevant. Rather than edit the ddSlick .js file directly just place the following code in your site’s .js.
This does a few things. First it runs through each Gravity Forms select field and creates a ddSlick select based off of it. It then sets the name for the ddSlick input to that of the Gravity Form select it is replacing. The name attribute is what Gravity Forms uses to pass the data back to WordPress. The other thing about this function is that it makes sure we’re calling ddSlick on each select on a page individually. If we don’t run this in an each and just try to create the ddSlick menus off a class that shows multiple times each list of options will also have the previous ddSlick menus options. It can get pretty crazy. So in my case I had a Country select field that just showed my list of countries as options. Then I had a State select field that showed my list of states as options and the list of countries as well.
Conditional logic within Gravity Forms based on the value that is selected in a drop down won’t work with ddSlick at this time. I’m still seeing if I can come up with a solution for that.
Here’s the original post if you’re interested.
If you have worked with styling dropdown menus you know it is a giant pain. There’s no easy cross-browser fix, and clients all expect to be able to style these objects however they want, even though a lot of the styling is done by the browser. ddSlick is a jQuery plugin that allows you to create beautifully styled dropdowns and even throw in images and descriptions. Go check out all of the features of ddSlick.
Enqueue the plugin’s styles and scripts and call the ddslick function on your .gfield_select class and you’ve got custom styled dropdowns in your Gravity Form. Only issue is it doesn’t send the data to Gravity Forms on submit. That doesn’t do us much good. We obviously want to submit the data from the selected dropdown.
The first thing you’ll need to do is pull down a copy of the plugin. Then you’ll want to beautify the JS so it is easier to edit. There’s online resources such as jsbeautifier.org or if you’re using a coding program such as Coda you can download plugins to add the ability to beautify your minified scripts.
Once you have your script beautified we’re going to add a variable to the variable declarations on lines 81 – 98. To do this you’ll want to add place your cursor between the end of the declaration for variable f and the “;”. Add a comma, press enter, and declare the variable gFormName on line 99. Lines 81 – 99 should now look like this:
var b = {},
c = {
data: [],
keepJSONItemsOnTop: false,
width: 260,
height: null,
background: "#eee",
selectText: "",
defaultSelectedIndex: null,
truncateDescription: true,
imagePosition: "left",
showSelectedHTML: true,
clickOffToClose: true,
onSelected: function() {}
},
d = '<div class="dd-select"><input class="dd-selected-value" type="hidden" /><a class="dd-selected"></a><span class="dd-pointer dd-pointer-down"></span></div>',
e = '<ul class="dd-options"></ul>',
f = '<style id="css-ddslick" type="text/css">' + ".dd-select{ border-radius:2px; border:solid 1px #ccc; position:relative; cursor:pointer;}" + ".dd-desc { color:#aaa; display:block; overflow: hidden; font-weight:normal; line-height: 1.4em; }" + ".dd-selected{ overflow:hidden; display:block; padding:10px; font-weight:bold;}" + ".dd-pointer{ width:0; height:0; position:absolute; right:10px; top:50%; margin-top:-3px;}" + ".dd-pointer-down{ border:solid 5px transparent; border-top:solid 5px #000; }" + ".dd-pointer-up{border:solid 5px transparent !important; border-bottom:solid 5px #000 !important; margin-top:-8px;}" + ".dd-options{ border:solid 1px #ccc; border-top:none; list-style:none; box-shadow:0px 1px 5px #ddd; display:none; position:absolute; z-index:2000; margin:0; padding:0;background:#fff; overflow:auto;}" + ".dd-option{ padding:10px; display:block; border-bottom:solid 1px #ddd; overflow:hidden; text-decoration:none; color:#333; cursor:pointer;-webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out; }" + ".dd-options > li:last-child > .dd-option{ border-bottom:none;}" + ".dd-option:hover{ background:#f3f3f3; color:#000;}" + ".dd-selected-description-truncated { text-overflow: ellipsis; white-space:nowrap; }" + ".dd-option-selected { background:#f6f6f6; }" + ".dd-option-image, .dd-selected-image { vertical-align:middle; float:left; margin-right:5px; max-width:64px;}" + ".dd-image-right { float:right; margin-right:15px; margin-left:5px;}" + ".dd-container{ position:relative;} .dd-selected-text { font-weight:bold}</style>",
gFormName;
Next we’re going to set that variable equal to the “name” attribute from the original Gravity Forms input. The way we’ll do this is by using the c.attr() function ddSlick is already using, and we’ll wrap it in an if statement to make sure it fires only when we have the name attribute. So on lines 126 – 128 you’ll want to throw in this code:
if (c.attr("name")) {
gFormName = c.attr("name");
}
Now is the really dirty part. You’ll notice in the variable declaration above that d is a string. That’s the string that writes out input element that the selected value gets stored to. That’s the element we need to have the name attribute that Gravity Forms uses to submit the data. The way I did this is to replace the class attribute with the class attribute plus the name attribute. Not ideal, but it works in a pinch. So after line 130 you’ll want to add a new line with the following:
d = d.replace('class="dd-selected-value"', 'class="dd-selected-value" name="' + gFormName + '"');
Now you can minify your script again, save it, and your dropdown data should be submitting to your Gravity Forms. It may not be the best fix, but it works when you’re on a tight schedule or just trying to make it work. If you’ve got a better solution for it let me know in the comments. I’m always looking for ways to improve my fixes.
