Have a burning question or three about your Wufoo forms? Never fear, Kane is here! Kane’s part of the ace customer support team at Wufoo. He moved to the grand United States from Leeds, England so if you’re a weekend early riser and avid soccer (football) fan, don’t be surprised if you run into him madly cheering on the mighty Manchester United.
The floor’s all yours, Kane.
Aren’t names brilliant? We all have them, we often need to know other people’s and we can make great name pun memes on the Internet with them. So while we’re on the subject of names, let’s have a chat about the name field, shall we?
Just have a look at that beauty. So simple and easy going. It just wants to know your name and leave it at that. It doesn’t want to kick up a fuss or be fancy, but sometimes there could be an excuse to change it around a bit. The problem with that is that there isn’t too much customization you can do with the Name field at first look. Yeah, you can change the format from Normal format to a super fancy pants extended format and you can change the language, but after that, you have to think outside the box.
We often get asked if it’s possible to make all the boxes in the name field the same size. It is if you think outside of those boxes. While the name field generally likes to stay calm and carry on, the Single Line Text field takes a bit more after Bear Grylls. With some cheeky use of CSS keywords and a couple of single line text fields, you can ask for a name and have it look like this:
That’s quite nice. How did I do that you ask? Let me show you. First, you’ll want to create your form, add two Single Line Text Fields and give them their respective names–nice and easy.
Hang on a sec. Those fields are on top of each other. That’s not cool. You want them to be next to each other just like in the Name field. Easy. CSS Keyword to the rescue. You can add CSS keywords to any field you’d like and they’re perfect for putting fields next to each other. Let’s say we want to have each field take up half the page. We’ll need to use “leftHalf” for the first name and “rightHalf” for the last name.
Now let’s see how that looks.
A bit too big for your taste? That’s cool too. Let’s change the CSS keyword for each field.
Let’s have another look shall we?
Boom! Looking suave and fancy. What’s that? You’d rather stick with the actual Name field, but still make the boxes the same size? Well, if you insist. For this we’ll need some help from proper CSS. First we’ll need to figure out the ID of that First Name and Last Name section of the Name field. We can just inspect the element when viewing the form to check that out:
Cool. Our ID for the First Name happens to be Field4 and the Last Name is Field5. Yours will most likely be different so definitely check it out. Now we just need to create the simplest of CSS and apply that to our theme.
After creating your own stylesheet like this, you can apply it to your theme using the Theme Designer. Let’s look at the full finished product!
Beautifully simple, right? You can even use more CSS to change other bits like the font size and even the shape of the box. So get out there, collect those gorgeous names of yours and customize, customize away.
Questions for Kane? Leave ’em for him in the Comments below!