CSS trick to change the stubborn “Submit Payment” button on Wufoo forms
We’re on a constant quest to build technology at Priority Sock Club and Zockster without an engineering budget or engineers. To power Priority Sock Club, we needed a customer-facing form to collect payment information to send to our Chargify database. Wufoo was the obvious choice; they make awesome forms, integrate with multiple payment processors, and allow complete design customization. Unfortunately, the payment form is one of the least flexible parts of the system, and the default text of “Submit Payment” wasn’t what we wanted to show. We weren’t processing a payment, we were saving a profile. “Submit Payment” seemed like it was going to scare people away, and rightly so.
Usually we could Google and find a solution to something like this. We couldn’t find a way to change the button. It makes sense: The design customization comes through a CSS file connected to the visual theme of the form, and button text is usually defined by HTML (and then styled by CSS). We hacked a bit of CSS to make it work. We’ve used many shared tips and tricks from the web to get our CSS and more to work as we wanted, and hope this helps someone else struggling with the same problem.
The default form
Here’s the form with the default style embedded on our website (that’s the semi-transparent background and photo behind the form).
Inspect
Open up the form in Chrome, right click on the button, and choose “Inspect Element.” You can do this on an embedded form as shown here. It might be easier to use the hosted version. Repeat this process to find the CSS code for any element on a website you’re looking at.
CSS
Inspecting the element opens up the Developer Tools in Chrome. Great for seeing the code behind the website you’re looking at and feeling like a developer, which I enjoy. You’ll see that the “Submit Payment” button has the CSS ID of “submitFormButton” (highlighted in blue below) and a number of style elements from CSS. Important to note that the styles of the button are never from code acting directly on this particular component by ID. We can use this to add some CSS to override the stuff we see here.
CSS Code
Here’s the CSS code we use to (1) add a background image that is the button we want to display instead, and (2) basically hide the existing text on the button. The text that’s cut off on the right is the hosted buttom from Da Button Factory, which specifies the attributes of the button. The important part is here: We define the background-image in CSS as an image hosted at a particular URL. Note: The !important tag in the CSS below is probably terrible coding style. It’s important sometimes to use in the custom CSS for Wufoo forms where you have no control over the HTML, and I end up using it for all of the lines, just to make sure the CSS has the right priority.
We did find a little guidance from chrisburton on css-tricks.com, and used that info as the starting point to identify the right CSS ID of the button.
The result
The payment page button now says “Save Payment Info,” and even matches the rest of the buttons on our page. Now it’s clear that submitting this form is saving info and charging $0.00.
Hope to share more of these discoveries in the future if we can’t find the answer ourselves. This was a natural first one to write about because it was so important and complete lacking a solution based on what we could find given the system limitations. We’re pretty happy with the result.
