Share your tricks or tips for WEB FORM BUILDER (HTML VERSION) Tips & Tricks with others!

This thread is for tricks and tips only - please no problem questions.

Have a problem or question then post in the Software Discussion threads, not here, so your question does not get overlooked.

Subscribe to this thread if you like to get emails on tips and Tricks people post

Solution for pre-checked radio buttons.

Open the HTML file and find the code for the radio buttons. One will have "checked type="radio"", the rest will just have, "type="radio"". Delete the word "checked" and no more pre-checked radio button!

ADDING RESET (AND MAYBE OTHER) BUTTONS MANUALLY IN CODE

Adding this as it took me forever today to find it lol. Thanks again Philatgr8!

Changing your form field attributes with CSS
I originally posted this under a different thread but thought more people might be able to take advantage of it here.
A lot of people seem to want to be able to change the way the field boxes look and work, myself included. I created a very simple form with no theme for testing. This is what I've played with so far:

Open the folder that contains your form files and go to: theme>default>css>default.css and open it in your editor of choice. Make a backup copy so you can restore if things go bad. Apologies to you experienced coders, I'm hoping to help the less knowledgeable if I can.

Find the green text: /*Form Elements. This rule is common to all inputs boxes*/
Add this: background-color: your pick of color;
to the element and you'll change the all input box field colors. your pick of color formats seem to work with all the common types, HEX, RGB and HTML names. You can change the input box padding here as well if you want.

Go to the green: /* Rule for the input-boxes */
If you change: color: your pick of color; it will change to color of the font the user types into the field. You can change the color of the box lines here, change the width of the box lines here, change the radius to round the field boxes, and also the type and style of font (font family). You can get away from the tiny default font the user sees.

One thing I do is to add notes (comments) to myself inside the /* */ so I know what I've done and what the rule does. I also copy the CSS file so that it can be re-applied to the form if I have to go back and edit the form in WFB since it will be overwritten when saved.
You can easily see that the majority of the styling rules are here and you can play around. A fully documented and commented list would be great and hopefully others will pitch in here and add the styling tips they've found..

Add a print button or link to your form

For a simple text style link that will print your form add this line of code to the HTML form page located in your form folder.
<a href="#" onclick="window.print();return false;">print</a>
Change the last print to anything you want - print this form, print me, etc.
Look for the lines of code that should say something like div id="fb-submit-button-div" and find the last <div>. This is normally where your Submit Button is. If you add the code just above this the link will appear in the footer with the Submit Button. You can of course put it anwhere on the page you want or add it to your form container page. Clicking on it will print the page.

If you want a button it's a little more complicated. First you need to create a new button as is outlined in the excellent posts above. Instead of Reset label the new button Print. Then add this line of code: <input TYPE="button" VALUE="Print" onClick="window.print();"> in the footer <div>.
Now you need to style your button.
Example:
<input id="fb-print-button" type="button" style="border-width: 2px; BACKGROUND-COLOR: #ffffff; FONT-FAMILY: comic sans ms; COLOR: #000000; width: 150px;" class="fb-button-special non-standard" VALUE="Print This Form" onClick="window.print();" name="print">
Change the attributes as you like.
Here's a really ugly test form I'm using just to play with the different CSS and HTML:http://rookenterprizes.com/rook-enterprizes/sandbox/form_testing/basic_test_form_for_formatting.html

Thank you for all the helpful tips. I agree that a fully documented and commented list of the css file would be great! Perhaps Scott could have one of the program developers provide one?
Searching through hundreds of lines of coding in the default.css file can be a little daunting, and very time consuming.

Richard

This might be embedded somewhere here BUT !

Accidentally found this.

First the form must have a width EXAMPLE: 600
Leave FORM item width set to 100%

Add an item, set its Width to 33%

Click on item Press the "good Ole Ctrl-C" Press "its sister Ctrl-V" twice
and you will have 3 horizontal columns. May have to adjust padding a bit.

I previewed and it displayed and data entry worked fine.

DID NOT try live ?

Hope this is a whoopee thingy....
Quick and dirty little demo...Primarily for picture not too classy.

I'm not certain if you call this tip, trick, or hack, but I really needed to get my form results into an Outlook contact, and multiple copy & pastes / retyping is for the birds. I started looking into Outlook's VCard format and found that it's just basically a structured text file saved with the extension .VCF. I could figure out how to create the attachment outright, but I could format the text like I wanted on my form results e-mail. I added the following additional stylesheet so it wouldn't print (because I keep a printed copy of the e-mail results):



And then just above the </body> tag (under Configure Email Message) I added the code for my VCF file:



The contact name, phone, address, email, etc all go into the proper fields. The rest of the form data gets dumped into the "Notes" section. The only thing to watch out here is that each note line needs to end with a "=" to signal to the file that the notes are continuing. The "=0D=0A" signifies a line feed. When a form submission comes in, I just copy from the BEGIN to the END, paste it into Notepad and save as "whatever.vcf". Double-click it and it will open in Outlook. Click "Save and Close" and it's now in Outlook. It's not as easy as I would like for it to be, but it definitely saves me A LOT of typing time. Hope this helps someone looking to do the same thing.

I posted this in the "Help with Inserting an Alternative Captcha Script" thread.
Oh thank, you thank, thank you CoffeeCup!
I'll post this in the "Tips" section as well. I'm also of the belief that Captchas are an abysmal way to fight spam. Too hard to use and some overhead for processing as well. With the addition of the Regular Expression field in the update you've fixed it for the majority of us users just looking for a simple to implement method.
I haven't explored much with the Regular Expression field but try this:
1) Add a Regular Expression field and give it a Label name, say Spam Fighter
2) Go to properties and select RegEx: Custom ( you can of course use the pre-selects )
3) Fill in something, I used “Spamfree" between the / / (There is a good explanation of many other things you can do in the Help file)
4) Set the Max. Length in this case 8 characters and Field Options: Required
5) Enter directions in the "Friendly Hint" such as - "Help us fight SPAM! Enter "Spamfree" here"
6) Save and publish
The form will not validate and send without the user filling in exactly what you've put between the //s.
Wonderful!

Thanks Hazy, very nice tip,

Might I also add that if you create an image with the text on it that you want typed in it will be even more undetectable by the bots as bots cannot read images, but they may learn how to detect your typed text at some point. Also if you alternate them out periodically and change them, even better