<cf_jpBSField>

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.

With the use of CFFORM discouraged - and yes, it should be avoided unless absolutely necessary - this custom tag is a great replacement. It does everything CFFORM does (did) and tons more.

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) by default. In Bootstrap, within a grid row, you can actually have as many columns as you like and Bootstrap will rack and stack them within a row of 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

• 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.  While it is optional, it is recommended that you specify the name yourself.  This will grant you control over the name of the field - which is required for data manipulation.
  

• Value any optional default: blank value

• The default value of the field. The value is blank by default. Note: the value acts as a cfoutput tag.  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.

• 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 ID as the tag will generate new names each time the form is loaded. Typically the NAME and ID of the field should match.

• 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.

• margin string optional default: my-2

• Controls the spacing of the fields using Bootstrap margins. It is recommended that you use the Y-axis margins and not all-around or X-axis margins.

• Type string required default: text

• Tells the tag which type of field to render.  Any of these values are valid.

  1. button
  2. checkbox
  3. color
  4. date
  5. email
  6. file
  7. hidden
  8. honeypot
  9. modal
  10. number
  11. password
  12. radio
  13. range
  14. recap
  15. reset
  16. search
  17. searchselect
  18. select
  19. submit
  20. switch
  21. tel
  22. text
  23. textarea
  24. textline
  25. time
  26. url
  27. chainedselect
  28. autocomplete
      
• Label string required default: Field Label Here

• Adds the label tag that should accompany each field requiring user input.

• Hidelabel boolean optional default: false

• Allows you to hide the label, which acts as a block element.  This is useful for stand-alone search fields or using a placeholder in place of the label.  Hiding is done using the bootstrap d-none class.

• Placeholder string optional default: Field Name Here

• Adds a muted text description within a text-based field. Useful for showing users how to format the requested data.

• Required boolean optional default: false

• Specifies whether or not a given field is required for the user to complete.
  

• 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.

• Helptext string optional default: blank value

• Text that will appear beneath the form field typically to detail instructions about the field's use.

• 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">.

• Summernote boolean optional default: false

• Converts a textarea to the rich-text WYSIWYG editor, Summernote. Only used on textarea type fields. Note: Requires calls to Sumemrnote CSS, JS, and other files.
  

• 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.

• 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 values that will appear as the visible item next to radios and checkboxes and select boxes.

• FieldGroupName string required default: mygroup

• For fields of the type fieldgroup, this attribute names the group collectively.
  

• FieldCount numeric required default: 3

• Tells a FieldGroup how many fields to generate within the group.
  

• FieldLengths list required default: 3,3,4

• For FieldGroup type fields, this is a comma separated list that depicts the number of characters to allow per field.  For instance, the default of 3, 3, 4 is the basic pattern for a US phone number - therefore, allow three characters in the first field, three in the second, and four in the third.
  

• FieldTypes list required default: number, number, number
• You can specify the type of each field by providing a list containing the type of fields, left to right, within the group.
  
• parentselect string optional default: blank

• When using the type "chainedselect" this is the ID of the parent select box.
  

• 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.

• 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 boolean optional default: no

• Sets the Bootstrap btn-block class on submit, button, and reset fields.
  

• center boolean optional default: false

• Sets the Bootstrap text-center class on submit, button, and reset fields.

• large boolean optional default: false

• Sets the Bootstrap btn-lg class on submit, button, and reset fields.

• small boolean optional default: false

• Sets the size of a button element to small.
  

• 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.

• onChange string optional default: blank value

• Allows you to run javascript commands when a select box selection changes.
  

• 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.

• minlength numeric optional default: blank value

• Allows you to specify a minimum length to a field.
  

• Values list optional default: blank

• The values attribute is only used for FieldGroup type fields.  This is a comma separated list of values.  In most cases you will probably store the combined values from a FieldGroup as one value.  It is advised that you split the values up - using a method similar to the one in the example, and then use them to create your list.
  

• 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.  The default size in Bootstrap is medium or md.  Leaving this attribute off loads the default size.
  

• 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.

• modalbutton boolean optional default: true

• Creates a button that will open your modal window when clicked.
  

• datatoggle string optional default: blank value

• Sets the data-toggle option for modal windows.
  

• datatarget string optional default: blank value

• Sets the data-target option for modal windows.

• datadismiss string optional default: blank value

• Sets the data-dismiss option for modal windows.

• 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.

• tooltiphtml boolean optional default: false

• Enables HTML content within the tooltipcontent attribute. Note: You will want to use single quotes within the attribute.

• tooltipcolor string optional default: 000000

• Sets the default color of the tooltip bubble and arrow. Use HTML color notation without the #.

• tooltipfontcolor string optional default: FFFFFF

• Sets the default color of the tooltip text. Use HTML color notation without the #.

• tooltipwidth string optional default: 100%

• Sets the width of the tooltip to allow wider content.  This is particularly useful when inserting images into tooltips with HTML.
  

• tooltiptextalign string optional default: left

• Sets the alignment of the text within the tooltip. Possible options are Left, Right, and Center.

• tooltipopacity string optional default: 1.0

• Sets the opacity of the tooltip. By default the tooltips in Bootstrap are slightly transparent. This attribute allow you to override that behavior using standard CSS opacity decimals like 0.75 or 0.9. 1.0 is 100% opaque.

• tooltipfontsize string optional default: 0.875rem

• Allows you to override the default font size within the tooltip using CSS syntax. You can enter strings like 2.0rem or 12pt or even 15px.

• 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: false

• 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 to set the color of the captcha image box.
  

• textcolor string optional default: 666688

• Provide an HTML color code without the leading pound sign to set the text color of the captcha code.
  

• 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.  This passes the value of the captcha as an encrypted string.
  

• key string required default: empty value

• Either a handmade string of characters (for CFMX_COMPAT) or a ColdFusion generated encryption key.  Generate encryption keys for specific algorithms by using the generateSecretKey() function.
  

• 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.

• bsclasses string optional default: blank value

• Allows you to pass extra Bootstrap classes into the class attribute of buttons.
  

• autocompletelist list required default: Apples,Oranges,Bananas,Grapes,Peaches,Pears

• A comma-separated list of items that will be suggested to the user as they type. 
  

• autocompletelistQualify boolean required default: true

• In order for the autocomplete to work, the list elements must be surrounded by double quotes.  Setting this to true will take a list like Apples,Oranges,Bananas,Grapes,Peaches,Pears and turn it into "Apples","Oranges","Bananas","Grapes","Peaches","Pears"
  

• autocompleteitems string required default: theAutoCompleteItems

• The name of the qualified list returned by the tag.  This variable will contain the list you will feed into the simple jQuery script that makes the autocomplete function.  TIP: You can see the returned variable by using the CFDUMP tag on the #variables# scope.
  

Examples

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

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

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

 

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

	<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 initialize tooltips with this script
    
    <script>
        $(function () {
          $('[data-toggle="tooltip"]').tooltip()
        })
    </script>

 

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

	<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="">  

	<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> 

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

	<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"> 

 

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

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

	<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"> 

	<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="" onKeyup="autoformat()">

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

	<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>


 

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

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

 

	<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"> 

	<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> 

	<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"> 

 

	<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">  

	<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"> 
 

	<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"> 

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

	

    <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"> 
 

	<cfset stchars = "Captain Kirk,Spock,Dr. McCoy,Scotty,Sulu,Chekov,Uhura,Picard,Riker,Data,Geordi,Worf,Wesley,Dr. Crusher">
<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=","> 

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>

 

	<cf_jpBSfield name="supervisor_name" id="supervisor_name" type="honeypot" value="" required="false"> 
	
	<!--- Once the form has been submitted, check to see if the honeypot field has been filled in.  If it has, the submission was done by a bot and the form should not be processed.  If it is still empty then you know the user is real so process the form. --->
	
	<cfif form.supervisor_name IS NOT ''>
		<!--- This is a BOT.  Do not process the form --->
	<cfelse>
		<!--- Place your code to process the form here --->
	</cfif> 

Captcha

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

Enter this code below

Please enter the code

4 Wrong code input by user

	<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> 

	


	<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="stack" 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>

<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
</script> 

	<cfset data1 = "Chevrolet,Dodge">
<cfset data2 = "Chevrolet:Camaro,Chevrolet:Corvette,Dodge:Charger,Dodge:Challenger">
<cfset data3 = "Camaro:RS,Camaro:SS,Corvette:Stingray,Corvette:Z06,Charger:RT,Charger:Hellcat,Challenger:RT,Challenger:Hellcat">
    
<cf_jpBSfield ID="brandSelect" bsclasses="select-relations" name="brandSelect" size="6" label="Brand" type="select" listlabels="#data1#" listvalues="#data1#" required="true" requiredtext="Please select a brand" value="">	
			
<cf_jpBSfield ID="modelSelect" name="modelSelect" bsclasses="select-relations" parentselect="brandSelect" size="6" label="Size" type="chainedselect" listlabels="#data2#" listvalues="#data2#" required="true" requiredtext="Please select a model" value="">
	
<cf_jpBSfield ID="selectTrim" name="selectTrim" bsclasses="select-relations" parentselect="modelSelect" size="6" label="Trim" type="chainedselect" listlabels="#data3#" listvalues="#data3#" required="true" requiredtext="Please select a size" value="">


<!--- Include the following below your jQuery call. --->

<script src="https://scripts.afit.edu/js/select-relations.min.js"></script>
<!--- OR --->
<script src="https://www.jackpoe.com/scripts/js/select-relations.min.js"></script> 

	<!--- If you intend on using number fields you can apply this CSS to remove the  --->
<style>
	/* Chrome, Safari, Edge, Opera */
	.fgrinputs::-webkit-outer-spin-button,
	.fgrinputs::-webkit-inner-spin-button {
	  -webkit-appearance: none;
	  margin: 0;
	}

	/* Firefox */
	.fgrinputs[type=number] {
	  -moz-appearance: textfield;
	}
</style>




<!--- This illustrates a method to break up a phone number into the three fields --->
<cfset theValue = "9375551212">
<cfset v1 = left(theValue,3)>	
<cfset v2 = mid(theValue,4,3)>
<cfset v3 = right(theValue,4)>
<cfset theValues = "#v1#,#v2#,#v3#">
		
		
<cf_jpBSfield size="6" fieldgroupname="cellPhone" type="fieldgroup" label="Your cell number" required="true" requiredtext="Please enter your numbers" values="#theValues#" fieldcount="3" fieldlengths="3,3,4" fieldtypes="number,number,number" placeholder="" helptext="Enter a phone number.  The fields will automatically advance.">

<cf_jpBSfield size="6" fieldgroupname="cellPhoneAlt" type="fieldgroup" label="Your alt number" required="true" requiredtext="Please enter your numbers" values="" fieldcount="3" fieldlengths="3,3,4" fieldtypes="number,number,number" placeholder="" helptext="Enter a phone number.  The fields will automatically advance.">


<!--- the auto-tab feature requires this script --->
<script>
	$(document).ready(function(){
		$(".fgrinputs").keyup(function () { //the tag automatically adds the fgrinputs class, which drives the feature
			if (this.value.length == this.maxLength) {
			  var $next = $(this).next('.fgrinputs');
			  if ($next.length)
				  $(this).next('.fgrinputs').focus();
			  else
				  $(this).blur();
			}
		});
	});
</script> 

	<cfset StateList = "Alabama,Alaska,Arizona,Arkansas,California,Colorado,Connecticut,Delaware,Florida,Georgia,Hawaii,Idaho,Illinois,Indiana,Iowa,Kansas,Kentucky,Louisiana,Maine,Maryland,Massachusetts,Michigan,Minnesota,Mississippi,Missouri,Montana,Nebraska,Nevada,New Hampshire,New Jersey,New Mexico,New York,North Carolina,North Dakota,Ohio,Oklahoma,Oregon,Pennsylvania,Rhode Island,South Carolina,South Dakota,Tennessee,Texas,Utah,Vermont,Virginia,Washington,West Virginia,Wisconsin,Wyoming">

<cf_jpBSfield size="12" ID="DreamState" name="DreamState" type="autocomplete" label="Which state would you like to live in most?" placeholder="Start typing the name of a US state..." required="true" requiredtext="Please enter your dream state" value="" autocompletelist="#StateList#" autocompletelistQualify="true" theAutoCompleteItems="TheItems">

<!--- You need to include this scripts --->
	<script src="https://scripts.afit.edu/js/autocomplete.js"></script>
	<!--- OR --->
	<script src="https://jackpoe.com/scripts/js/autocomplete.js"></script>
	
	<!--- include this script to activate the autocomplete.  
			Change the ID selector to the ID of your field.
			Change the variable to the name specified in the theAutoCompleteItems attribute.
    --->
	<script>
		$(document).ready(function()
		{
		  var option_list = [<cfoutput>#theItems#</cfoutput>];

		  $("#DreamState").autocompleter(option_list, {});
		});
	</script>