<cf_jpBSField>

Last Updated 12/19/2023

A ColdFusion custom tag that combines HTML5 form fields with Bootstrap and CFML into one powerful tool. Increase productivity and bring your applications and sites into the modern era.

So what is this thing? No doubt, if you know me or work with me you've heard me talk about this tag. In a nutshell, I have taken the layout difficulties out of creating forms in your apps by combining Bootstrap's layout grid and every HTML5 form field into one tag. Combined with the power of CFML, this tag allows you to create input forms in a minutes rather than hours and update forms are as simple as copy and paste in most cases.

Let's look at an example of the tag.

	
	<cf_jpBSfield size="12" ID="Foo" name="Foo" type="text" label="Your Name" placeholder="enter your name" required="true" requiredtext="Please enter your name" value="">

Every tag functions as a column (col-xl-*) in a Bootstrap grid. Each of these columns contains a y-axis margin of 2 (my-2). In Bootstrap, within a grid row, you can actually have as many columns as you like and Bootstrap will rack and stack them within the 12-column grid. So, using this tag, you can simply create a fluid container with one row and then add your fields...one after another. Organizing them is as simple as setting the size attribute to the desired column width (1-12). Here's a simple example:


	<form action="" method="post" novalidate class="needs-validation">
		<div class="container">
			<div class="row">

				<cf_jpBSfield size="4" ID="email" name="email" type="email" label="Your e-mail address" placeholder="" required="true" requiredtext="Please enter a valid e-mail address" value="">
					
				<cf_jpBSfield size="4" ID="Pass" name="Pass" type="password" label="Your password" placeholder="" required="true" requiredtext="Please enter your password" value="">
					
				<cf_jpBSfield name="sb" id="sb" type="submit" value="Submit Form" size="4">
		
			</div>
		</div>
	</form>

If you wanted to take advantage of the grid to stack these fields, you could do it like so:


	<form action="" method="post" novalidate class="needs-validation">
		<div class="container">
			<div class="row justify-content-center">

				<cf_jpBSfield size="4" ID="email" name="email" type="email" label="Your e-mail address" placeholder="" required="true" requiredtext="Please enter a valid e-mail address" value="">
				
				<div class="w-100"></div>
					
				<cf_jpBSfield size="4" ID="Pass" name="Pass" type="password" label="Your password" placeholder="" required="true" requiredtext="Please enter your password" value="">
				
				<div class="w-100"></div>
					
				<cf_jpBSfield name="sb" id="sb" type="submit" value="Submit Form" size="4" block="yes">
		
			</div>
		</div>
	</form>

Which gives us this layout:

Attributes

Size numeric optional default: 12
Defines the number of columns within the Bootstrap grid that the specified field will take up. Because the Bootstrap grid system uses a 12 column grid, values should be 1-12.
Name string optional default: generated by the tag
The name of the specified field. While the tag will name fields for you, it is advisable that you specify your own name as the tag will generate new names each time the form is loaded.
ID string optional default: generated by the tag
The ID of the specified field. While the tag will apply an ID for you, it is advisable that you specify your own as the tag will generate new names each time the form is loaded. Typically the NAME and ID of the field should match.
Type string required default: text
Any of these values are valid.
1. range
2. color
3. switch
4. button
5. reset
6. submit
7. textline
8. tel
9. text
10. password
11. time
12. url
13. date
14. email
15. checkbox
16. radio
17. hidden
18. file
19. number
20. textarea
21. select
22. recap
23. search
24. modal
25. searchselect
Accept String optional default: *.*
Restricts the allowed file uploads when using type=file. Functioning strings are file_extension|audio/*|video/*|image/*|media_type. Example: type=*.pdf or type=image/* or type=text/xml. You can also leave this attribute out and deal with the file upload using <cffile action="upload">.
Label Required default: Field Label Here
Adds the label tag that should accompany each field requiring user input.
Placeholder optional default: Field Name Here
Adds a muted text description within a text-based field. Use this to show users how to format the requested data.
Required boolean optional default: false
Requiredtext string optional default: Please complete this field
Text that will appear should a user fail to complete a required field. Note: this attributes requires that you use Bootstrap form validation.
Value any optional default: blank value
The default value of the field. The value is blank by default. Simply feed in a ColdFusion variable name surrounded by ## and that will become the value of the field. Example: If you have a query named GetUser that returns a column named email_address, you would simply add #getUser.email_address# as the value of the field.
helptext string optional default: blank value
Text that will appear beneath the form field typically to detail instructions about the field's use.
Summernote boolean optional default: false
Converts textarea to rich-text WYSIWYG editor, Summernote. Only used on textarea type fields. Note: Requires Sumemrnote CSS, JS, and other files. Contact Jack for help with this.
Rows numeric optional default: 3
Sets the number of visible rows for a textarea.
step numeric optional default: 1
Used for number type fields only. Sets the step between numbers in the number scroller.
min numeric optional default: 0
Sets the minimum number in number type field scroller.
max numeric optional default: 100
Sets the maximum number in number type field scroller.
grouplabel string required default: Label Here
Sets the overall label for a group of checkboxes or radio buttons.
flow string optional default: stack
Used to set the flow of radio and checkbox fields to either stack or inline options.
listvalues list required default: 1,2,3
A list of values that will appear as the value of radio, checkbox, and select boxes.
listlabels list required default: Item 1, Item 2, Item 3
A list of value that will appear as the visible item next to radios and checkboxes and select boxes.
delim string optional default: ,
The delimiter for lists fed into radio, checkbox, and select boxes.
multiple boolean optional default: no
Sets the multiple select option on or off when using select boxes.
listsize numeric optional default: 1
Sets the visible items in a multiple-select box.
defaultselect string optional default: Select One
Sets the text on the first select value in a required select field.
onblur string optional default: blank
Allows you to call a javascript function when a field is moved away from.
onclick string optional default: blank
Allows you to call a javascript function when a field is clicked on.
disabled boolean optional default: false
Sets the field to disabled. Disabled fields do not submit via GET or POST.
readonly boolean optional default: false
Sets the field to readonly. Use to submit fields via GET or POST operations.
pattern string optional default: blank value
Allows the inclusion of REGEX or other pattern for text fields.
hidelabel boolean optional default: false
Hides the label of the field. This is done using the bootstrap d-none class.
bold boolean optional default: false
For textline fields this will set the text to bold.
fontsize numeric optional default: 0
For textline fields allows you to specify the font size 1-4 which will set the HTML h1-h4 tags. Default of 0 will ignore this option.
block numeric optional default: 0
Sets the Bootstrap btn-block class on submit, button, and reset fields. Valid input is 1 for yes and 0 for no.
center numeric optional default: 0
Sets the Bootstrap text-center class on submit, button, and reset fields. Valid input is 1 for yes and 0 for no.
large numeric optional default: 0
Sets the Bootstrap btn-lg class on submit, button, and reset fields. Valid input is 1 for yes and 0 for no.
color string optional default: primary
Sets the Bootstrap bg-* class on submit, button, and reset fields. Valid inputs are primary, secondary, success, danger, info, warning, light, dark.
switchstate numeric optional default: 0
Sets the starting state of a switch type field. Valid input is 1 for on and 0 for off.
offwords string optional default: Off
Words that appear when a switch type field is set to the off state.
onwords string optional default: On
Words that appear when a switch type field is set to the on state.
defaultwords string optional default: On
Words that appear when a switch type field is loaded for the first time.
onkeypress string optional default: blank value
Use this to call javascript functions as the user types.
onkeyup string optional default: blank value
Use this to call javascript functions as the user types.
maxlength numeric optional default: blank value
Use this to restrict the length of input a user can enter into a textarea or text type field.
linkbutton boolean optional default: false
Use this when creating a button to convert it into a hyperlink button instead of a form button.
link string optional default: blank value
Use this when creating a linkbutton to specify the link for the button.
modalcontent string optional default: Boilerplate Text
This is the content of your modal window. Tip: You can use <cfsavecontent> to store complex info like forms and layout and then feed the variable into this attribute.
modalsize string optional default: blank value
Use this to set the size of the modal dialog box. Possible options are sm, lg, and xl.
modaltitle string optional default: blank value
Displays at the top of the modal window.
modalheadercolor string optional default: blank value
Provide the name of a Bootstrap color to change the color of the modal window header. Options are primary, danger, warning, info, secondary, success, dark.
tooltip boolean optional default: false

turns the tooltip on or off for a specific field. Note: If applying a tooltip to a button, which you can do, make sure you set the proper size and set block=true.

Note: Tooltips require Fontawesome 5.x and the Bootstrap 4 tooltip script.

	<link href="https://www.jackpoe.com/scripts/fa/css/all.min.css" rel="stylesheet">

    OR

    <link href="https://scripts.afit.edu/fontawesome/all.min.css" rel="stylesheet">

    <script>
    $(function () {
      $('[data-toggle="tooltip"]').tooltip()
    })
    </script>

tooltiplocation string optional default: top
Tells the browser which direction the tip should open on. Possible are top, right, bottom, and left.
tooltipcontent string optional default: blank value
Provide the contents to appear within the tooltip.
tooltip boolean optional default: false
Enables tooltip questionmark icon. Note: requires Fontawesome
tooltiplocation string optional default: top
Tells the tag where to place the tooltip will appear. Options are top, right, bottom, left.
tooltipcontent string optional default: blank value
The contents to appear in the tooltip pop-up.
passlength numeric optional default: 6
Allows you to specify the length of the code to type. Mo more than 8 is recommended.
allcaps boolean optional default: false
Allows you to choose whether or not the letters in the captcha will be all uppercase.
usespecial boolean optional default: true
Allows you to choose whether or not the captcha will contain special characters.
numbersonly boolean optional default: false
Allows you to choose whether or not the captcha will contain numbers only.
boxcolor string optional default: ffcc33
Provide an HTML color code without the leading pound sign.
textcolor string optional default: 666688
Provide an HTML color code without the leading pound sign.
code string required default: [empty value]
Name of the returned value containing the captcha code.
encrypt boolean required default: true
For better security the value of true should always be used.
key string required default: [empty value]
Either a handmade string of characters (for CFMX_COMPAT) or a ColdFusion generated encryption key.
algorithm string required default: CFMX_COMPAT
The corresponding encryption algorithm for the provided key. Allowed values are AES,DES,DESEDE,RC2,RC4,RC5,BLOWFISH which require generated encryption keys and CFMX_COMPAT which requires a string of characters as a key. Note that CFMX_COMPAT is the least secure and, while it can be used for this kind of thing, it is recommended that you use one of the more secure algorithms. Secret keys for them can be generated using the generateSecretKey() function.

Examples

Button

Creates a simple Bootstrap button.

	<cf_jpBSfield size="2" name="test" id="test" type="button" value="Test Me" color="danger" onclick="alert('This works')"> 

submit

Creates a simple Bootstrap submit button.

	<cf_jpBSfield size="2" name="testSB" id="testSB" type="button" value="Submit Form" color="primary"> 

reset

Creates a simple Bootstrap reset button.

	<cf_jpBSfield size="2" name="testRB" id="testRB" type="button" value="Reset Form" color="outline-secondary"> 

text

Creates a standard text field.

* Your Name

Please enter your name

	<cf_jpBSfield size="12" ID="Foo" name="Foo" type="text" label="Your Name" placeholder="enter your name" required="true" requiredtext="Please enter your name" value=""> 

Field with Tooltip

Example of a text field with a tooltip enabled.

* Your Name

Please enter your name

	<cf_jpBSfield size="12" ID="Foo" name="Foo" type="text" label="Your Name" placeholder="enter your name" required="true" requiredtext="Please enter your name" value="" tooltip="yes" tooltiplocation="left" tooltipcontent="This is where you enter your name."> 
    
    Note: You also need to initalize tooltips with this script
    
    <script>
        $(function () {
          $('[data-toggle="tooltip"]').tooltip()
        })
    </script>

date

Creates a standard date field that opens a datepicker when clicked.

* A date

Please enter a date

	<cf_jpBSfield size="12" ID="date" name="date" type="date" label="A date" placeholder="" required="true" requiredtext="Please enter a date" value=""> 

email

Creates a standard text field that validates email entry.

* e-mail address

Please enter a valid e-mail address

	<cf_jpBSfield size="12" ID="email" name="email" type="email" label="e-mail address" placeholder="" required="true" requiredtext="Please enter a valid e-mail address" value=""> 

file

Creates a custom Bootstrap file field. Note: You will want to use the included script to make the field work correctly.

Your document

Choose file

Please upload a file

	<cf_jpBSfield size="12" ID="MyFile" name="MyFile" type="file" label="Your document" placeholder="" required="false" requiredtext="Please upload a file" value=""> 



	


<script>
    $('#MyFile').on('change',function(){
        //get the file name
        var fileName = $(this).val();
        var cleanFileName = fileName.replace('C:\\fakepath\\', " ");
        //replace the "Choose a file" label
        $(this).next('.custom-file-label').html(cleanFileName);
    })
</script>

hidden

Creates a standard hidden field. This field contains no Bootstrap column.

Hidden fields are....hidden.


	<cf_jpBSfield ID="hid" name="hid" type="hidden" value="ABCDEFG">

number

Creates a number field that includes a spinner.

* Select Your Age

Please enter your age

	<cf_jpBSfield size="12" ID="yourage" name="yourage" type="number" label="Select Your Age" placeholder="" required="true" requiredtext="Please enter your age" value="" min="1" max="100" step="1"> 

password

Creates a standard password field. You can use constraint validation or other methods (using the onblur and onclick attributes) to check for password strenth, requirements, and/or matches.

* Your Password

Please enter your password

	<cf_jpBSfield size="12" ID="Pass" name="Pass" type="password" label="Your Password" placeholder="" required="true" requiredtext="Please enter your password" value=""> 

range

Creates a range slider.

	<cf_jpBSfield size="12" ID="yourage" name="yourage" type="range" label="Pick Your Age" placeholder="" required="true" requiredtext="Please pick your age" value="1" min="0" max="100" step="1"> 

switch

Creates a Bootstrap toggle switch field. Switched function like a checkbox and only exist if they are on.

Would you like to receive our newsletter?

I do not want the newsletter

	<cf_jpBSfield size="12" ID="News" name="News" type="switch" label="Would you like to receive our newsletter?" placeholder="" required="false" requiredtext="" value="" switchstate="0" onwords="Send me the newsletter" offwords="I do not want the newsletter"> 

telephone

Creates a standard tel field that validates phone number entry. You can use the included script (or any script you like) to auto-format the phone number.

* A telephone number

Please enter a telephone number

	<cf_jpBSfield size="12" ID="Thetel" name="Thetel" type="tel" label="A telephone number" placeholder="999-999-9999" required="true" requiredtext="Please enter a telephone number" value=""> 



	


	<script>
	function autoformat(){
		var inputValue = document.getElementById("Thetel").value;
		var inputValueLength = inputValue.length;
		if(inputValueLength == 3 || inputValueLength == 7){
			document.getElementById("Thetel").value = inputValue+"-"; 
		}
	}
	</script>

textarea

Creates a standard textarea field. You can include a counter with the attached Bootstrap badge and jQuery script.

* Notes

Please enter your notes

	<cf_jpBSfield size="12" ID="Notes" name="Notes" type="textarea" label="Notes" placeholder="" required="true" requiredtext="Please enter your notes" value="" maxlength="200" rows="5">

	<span class="badge badge-primary ml-3" id="count_message"></span>

	<script>
		var text_max = 200;
		$('#count_message').html('0 / ' + text_max + ' Characters');

		$('#Notes').keyup(function() {
		  var text_length = $('#Notes').val().length;
		  var text_remaining = text_max - text_length;

		  $('#count_message').html(text_length + ' / ' + text_max + ' Characters');
		});
	</script>

time

Creates a standard time entry field that validates time entry.

* A time

Please enter a time

	<cf_jpBSfield size="12" ID="time" name="time" type="time" label="A time" placeholder="" required="true" requiredtext="Please enter a time" value=""> 

url

Creates a standard URL field that validates URL entry.

* A url

Please enter a url

	<cf_jpBSfield size="12" ID="urla" name="urla" type="url" label="A url" placeholder="" required="true" requiredtext="Please enter a url" value=""> 

color

Creates an HTML5 color picker field.

* Your color

Please enter your name

	<cf_jpBSfield size="2" ID="MyColor" name="MyColor" type="color" label="Your color" placeholder="enter your color" required="true" requiredtext="Please enter your name" value="##FFCC00"> 

checkbox

Creates a standard checkbox or checkbox grouping. Use the included script to make sure at least one checkbox is selected.

	<cf_jpBSfield size="6" ID="favs" name="favs" type="checkbox" listlabels="Beef,Cheese,Olives,Bread" listvalues="1,2,3,4" required="true" requiredtext="Please select your favorites" label="Select your favorites" flow="stack" value="2,3"> 



	


	<script>
		// sets the checkboxes in a group to required or not required on page load.
		// change the value .favs to the name of your checkbox field
		jQuery(function($) {
		  var requiredCheckboxes = $('.favs :checkbox[required]');
		  requiredCheckboxes.on('change', function(e) {
			var checkboxGroup = requiredCheckboxes.filter('[name="' + $(this).attr('name') + '"]');
			var isChecked = checkboxGroup.is(':checked');
			checkboxGroup.prop('required', !isChecked);
		  });
		  requiredCheckboxes.trigger('change');
		});    
	</script>

radios

Creates a standard radio button or radio button grouping.

* Select your favorite captain

Kirk

Picard

Sisko

Janeway

Archer

Please select your favorite captain

	<cf_jpBSfield size="6" ID="favsCap" name="favsCap" type="radio" listlabels="Kirk,Picard,Sisko,Janeway,Archer" listvalues="1,2,3,4,5" required="true" requiredtext="Please select your favorite captain" label="Select your favorite captain" flow="stack" value="0"> 

select box

Creates a standard select dropdown field. This example shows how to use a ColdFusion list to create the values.

* Favorite Star Trek series

Please select your favorite series

	<cfset shows = "The Original Series,Next Generation,Deep Space Nine, Voyager,Enterprise,Discovery,Picard,Lower Decks,Strange New Worlds">
	<cfset abbrs = "TOS,TNG,DS9,VOY,ENT,DSC,PIC,LOW,SNW">

	<cf_jpBSfield ID="BestSeries" name="BestSeries" size="6" label="Favorite Star Trek series" type="select" listlabels="#shows#" listvalues="#abbrs#" required="true" requiredtext="Please select your favorite series" value="TNG"> 

select box (multiple)

Creates a multiple select field. This example shows how to use a ColdFusion list to create the values.

* Favorite Star Trek shows Hold your CTRL button to select multiple items

Please select your favorite shows

	<cfset shows = "The Original Series,Next Generation,Deep Space Nine, Voyager,Enterprise,Discovery,Picard,Lower Decks,Strange New Worlds">
	<cfset abbrs = "TOS,TNG,DS9,VOY,ENT,DSC,PIC,LOW,SNW">

	<cf_jpBSfield ID="BestSeries" multiple="1" listsize="#listLen(abbrs)#" name="BestSeries" size="6" label="Favorite Star Trek series" type="select" listlabels="#shows#" listvalues="#abbrs#" required="true" requiredtext="Please select your favorite series" value="TNG"> 

textline

Inserts a line of text - not a form field. Useful for breaking up forms with instructions or other information.

This is a simple line of text - not a field

	<cf_jpBSfield size="12" ID="tl" name="tl" type="textline" value="This is a simple line of text - not a field" bold="true" fontsize="0"> 

recap

Inserts a captcha image and field to help keep forms from being resumbitted by spammers. Requires the companion tag jpBSCaptcha

Enter this code below confirm code

Please enter the code

	<cf_jpBSfield size="3" ID="ccode" name="ccode" type="recap" label="Enter this code below" requiredtext="Please enter the code" passlength="6" allcaps="yes" usespecial="no" boxcolor="f0f0f0" textcolor="666666" code="foo" key="@ThisIsMyKey" encrypt="true" algorithm="CFMX_COMPAT">
    
    <!--- set cookies using the returned and encrypted code --->
    <cfcookie name="captchaCookie" value="" expires="NOW"> 
    <cfcookie name="captchaCookie" value="#foo#">
    
    <!--- On your action page you will need to use the following companion tag --->
    
    <cf_jpBSCaptcha cookie="captchaCookie" key="@ThisIsMyKey" algorithm="CFMX_COMPAT">
        
    <cfif captchaStatus IS 1>
    Do your stuff    
    <cfelse>
    <cfoutput>#captchaError# #captchaErrorDetails#</cfoutput>
    </cfif>
    

search

Creates a standard search field with a clear button.

	<cf_jpBSfield size="12" ID="k" name="k" type="search" label="" hidelabel="true" placeholder="Search for..." required="false" value=""> 

modal

Creates a modal window with launch button.

Note the inclusion of the color attribute. This is the color of the button that activates the modal. The button text can be specified using the value attribute.

    <cfsavecontent variable="sampleContents">
    Mr. and Mrs. Dursley, of number four, <a href="https://www.jackpoe.com">Privet Drive</a>, were proud to say that they were perfectly normal, thank you very much. They were the last people you'd expect to be involved in anything strange or mysterious, because they just didn't hold with such nonsense. Mr. Dursley was the director of a firm called Grunnings, which made drills. He was a big, beefy man with hardly any neck, although he did have a very large mustache. Mrs. Dursley was thin and blonde and had nearly twice the usual amount of neck, which came in very useful as she spent so much of her time craning over garden fences, spying on the neighbors. The Dursleys had a small son called Dudley and in their opinion there was no finer boy anywhere. The Dursleys had everything they wanted, but they also had a secret, and their greatest fear was that somebody would discover it.
    </cfsavecontent>

	<cf_jpBSfield name="modalTest" id="modalTest" type="modal" value="Open Test Modal" color="danger" modalcontent="#sampleContents#" size="3" modalsize="lg" modalheadercolor="danger" modaltitle="Example modal" modalbutton="true"> 

searchselect

Creates a searchable select box.

* Favorite Character

Please select your favorite character


	<cf_jpBSfield ID="favoriteCharacter" name="favoriteCharacter" size="12" label="Favorite Character" type="searchselect" listlabels="#stchars#" listvalues="#stchars#" required="true" requiredtext="Please select your favorite character" value="" delim=",">

This field also requires two additional files



You may use...
<link href="https://scripts.afit.edu/css/searchSelect.css" rel="stylesheet" />
<script src="https://scripts.afit.edu/js/searchSelect.js"></script>
    
Or these...
<link href="https://www.jackpoe.com/scripts/css/searchSelect.css" rel="stylesheet" />
<script src="https://www.jackpoe.com/scripts/js/searchSelect.js"></script>

Initialize the field with this...
<script>
    $('.select2').select2();
</script>

Usage

Using the tag requires a basic knowledge of Bootstrap 4, HTML forms, and ColdFusion.

Basic form

Here is a sample form using standard fields.

* Your first name

Please enter your first name

* Your last name

Please enter your last name

* Your address

Please enter your address

* Your city

Please enter your city

* Your state

Please select your state

* Your zipcode

Please enter your zipcode

* Your e-mail address

Please enter a valid e-mail address

* I agree to the terms and conditions

I agree!

Please agree to the terms and conditions

	<form action="" method="post" novalidate class="needs-validation">
	<div class="container">
    <div class="row">
    	
		<cf_jpBSfield size="6" ID="fName" name="fName" type="text" label="Your first name" placeholder="enter your first name" required="true" requiredtext="Please enter your first name" value="" tooltip="true" tooltiplocation="top" tooltipcontent="Tooltip info here">
			
		<cf_jpBSfield size="6" ID="lName" name="lName" type="text" label="Your last name" placeholder="enter your Last name" required="true" requiredtext="Please enter your last name" value="">
			
		<cf_jpBSfield size="12" ID="address" name="address" type="text" label="Your address" placeholder="enter your address" required="true" requiredtext="Please enter your address" value="">
			
		<cf_jpBSfield size="3" ID="City" name="City" type="text" label="Your city" placeholder="enter your city" required="true" requiredtext="Please enter your city" value="">
			
		<cfset states = 'AL,AK,AZ,AR,CA,CO,CT,DE,FL,GA,HI,ID,IL,IN,IA,KS,KY,LA,ME,MD,MA,MI,MN,MS,MO,MT,NE,NV,NH,NJ,NM,NY,NC,ND,OH,OK,OR,PA,RI,SC,SD,TN,TX,UT,VT,VA,WA,WV,WI,WY'>
    
		<cf_jpBSfield ID="state" name="state" size="2" label="Your state" type="select" listlabels="#states#" listvalues="#states#" required="true" requiredtext="Please select your state" value="">
	
		<cf_jpBSfield size="2" ID="zip" name="zip" type="text" label="Your zipcode" placeholder="enter your zipcode" required="true" requiredtext="Please enter your zipcode" value="">
			
		<cf_jpBSfield size="5" ID="email" name="email" type="email" label="Your e-mail address" placeholder="example:name@site.com" required="true" requiredtext="Please enter a valid e-mail address" value="">
			
		<cf_jpBSfield size="6" ID="agree" name="agree" type="checkbox" listlabels="I agree!" listvalues="1" required="true" requiredtext="Please agree to the terms and conditions" label="I agree to the terms and conditions" flow="inline" value="">
			
		<cf_jpBSfield name="sb" id="sb" type="submit" value="Submit Form" size="3" block="yes">
		<cf_jpBSfield name="rs" id="rs" type="reset" value="Reset Form" size="3" block="yes"> 
		
    </div>
	</div>
	</form>