You can paste that combined url into your Wufoo theme settings. If you’re using Dropbox to host the CSS file, copy the link to your file and then add ?dl=1 to the end of the link. You’ll need to either host it on an SSL-enabled server, or you’ll need to turn off SSL on your form. Many modern browsers will not load your CSS file over http if the page itself (your form) is using https/SSL. Make sure that if your form is loading over SSL, then the CSS file is as well. } Watch out for these issues when using custom CSS We’re on our way, but we want to make the Address field smaller too. Let’s start with the padding for the text fields, and we’ll also use right-aligned labels, which is a standard option in the Form Settings. But if we want to reduce the spacing between the fields, we’ll need to use CSS. We could certainly change the font size in the Theme Designer, which would also make the fields smaller. What if we wanted to reduce the height of our form? How about a fancy gradient background instead? We’ll leave the default background color for older browsers which don’t support the CSS3 gradient function.īackground: #99ccff /*fallback color for browsers that don't support gradients*/īackground-image: -webkit-linear-gradient(to bottom, #FFF7C0, #99ccff) īackground-image: -moz-linear-gradient(to bottom, #FFF7C0, #99ccff) īackground-image: -ms-linear-gradient(to bottom, #FFF7C0, #99ccff) īackground-image: linear-gradient(to bottom, #FFF7C0, #99ccff) First, we can inspect the element to see what should change. Reload one more time, and we’ve got our new borders.įor our next example, let’s change the background color of the running total box. Let’s add the dropdown field into our selector, so that the Country field matches the rest. Now we reload the form, and we’re almost there. Using these CSS rules, we can set the border to dark gray, and the background to plain white. We can see here that we’ll need to set the border and background properties. (You could also use Firefox’s Developer Tools or Safari’s Web Inspector.) Using Chrome’s Developer Tools, we can inspect the element. Instead of the faux-shadow, let’s try a thin dark gray border. Let’s look at some examples of what you can do with custom CSS. That has a step-by-step video explanation and a cool chart that shows the html/css anatomy of how Wufoo forms are laid out. To use your own CSS, create a theme in the Theme Designer and in the Advanced properties, include a url that points to your stylesheet out on the web.Ĭheck out our Form Anatomy blog post by Chris Coyier to see more details about how to set this up. You can easily change your form’s background colors, typography, logo and more, all without writing any code.īut what if you want to go beyond those built-in options? If you’re comfortable with creating your own CSS rules, you can include your own stylesheet and override any of the default Wufoo styles. If you want to customize your Wufoo form, the Theme Designer has lots of built-in options. Customize Your Form With CSS: Examples! | Wufoo An arrow pointing left An arrow pointing right An arrow pointing left A magnifying glass The Twitter logo The Facebook logo The LinkedIn logo The Google Plus logo The RSS feed symbol The Wufoo by SurveyMonkey Logo The Wufoo by SurveyMonkey Logo A credit card A tray with an upwards pointing arrow A diamond with two arrows leading to different boxes Two bars in a chart Two pages A painter's palette A question mark in a circle A website layout A signpost A speech bubble Two interlinked arrows A bar chart with a magnifying glass near it A climbing graph in a magnifying glass A lock A certificate A shopping bag A graduation cap A pair of hands holding up a heart An open envelope with a note inside A ribbon An apple A hand dragging an item between two others A paper airplane An arrow pointing downwards into a tray A bar chart with a magnifying glass near it Two bars in a graph Two pages Two arrows circling into each other A credit card A trophy with a star on it Two people Two hands holding a heart Two hands holding money Two hands holding a party popper checkmark custom branding ssl notification payment data fortress captcha data report workflow integration custom report theme gallery pricing notifications pricing security pricing form template gallery pricing analytics reporting pricing theme designer pricing rest api pricing mobile pricing customer support pricing social sharing pricing field validation pricing custom responses Skip to the main content
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |