Example code to help you create your own Caldera Forms add-on. See: https://calderaforms.com/doc/create-field-type-caldera-forms

basics.php

<?php
/**
 * Register new field type
 */
add_filter( 'caldera_forms_get_field_types', function( $fields ){
	//In this example "field_slug" will identify field later, you should change this
	$fields[ 'field_slug'  ]      = array(
		//Change this to the name of your field
		'field'       => __( 'Short Name', 'text-domain' ),
		//Change this to the description of your field
		'description' => __( 'Description', 'text-domain' ),
		//ensure this is the right path for FRONT-END field file
		//This is optional. If empty, generic field file will be used.
		'file'        => plugin_dir_path( __FILE__ ) . 'field/field.php',
		//set category, custom categories are not allowed
		'category'    => __( 'Special', 'caldera-forms' ),
		//this function is called to save the field value
		'handler'     => 'field_slug_handler',
		'setup'       => array(
			//ensure this is the right path for your field configuration file
			'template'      => plugin_dir_path( __FILE__ ) . 'field/config.php',
			//		//ensure this is the right path for your field admin preview file.
			'preview'       => plugin_dir_path( __FILE__ ) . 'fields/preview.php',
			//Optional: Add any default settings -- caption|default|required etc. you do NOT want to be added.,
			'not_supported' => array(

			),
		),
		//Optional add any JavaScript files you want to be loaded when these field type is used
		//NOTE: Use full URL with correct protocol
		'scripts' => array(

		),
		//Optional add any CSS files you want to be loaded when these field type is used
		//NOTE: Use full URL with correct protocol
		'styles' => array(

		)

	);

	return $fields;

});

/**
 * Save field_slug type fields
 *
 * @param mixed $value Field value
 * @param array $field Field config
 * @param array $form Form config
 *
 * @return string|array|WP_Error
 */
function field_slug_handler( $value, $field, $form ){

	//IMPORTANT
	//return array or string to save that value
	//return WP_Error to trigger error
}

change-type-attr-2.php

<?php
/**
 * Change the type HTML attribute of dynamically generated field_slug type fields to hidden and add a class
 *
 * @param array $attrs Field attributes
 * @param array $form Form config
 */
add_filter( 'caldera_forms_field_attributes-field_slug', function( $attrs, $form ){
  //use original type as class
  //note Caldera Forms will implode this array escaping recursively with esc_attr(0 
  $attrs[ 'class' ][] = $attrs[ 'type' ];
  
	//change type to hidden
	$attrs[ 'type' ] = 'hidden';
	return $attrs;

});

change-type-attr.php

<?php
/**
 * Change the type HTML attribute of dynamically generated field_slug type fields to hidden
 *
 * @param array $attrs Field attributes
 * @param array $form Form config
 */
add_filter( 'caldera_forms_field_attributes-field_slug', function( $attrs, $form ){
	//change type to hidden
	$attrs[ 'type' ] = 'hidden';
	return $attrs;

});

field-with-change.js

jQuery( document ).ready( function( $ ){

	//When form state is initialized for a form initialize field_slug fields
	$( document ).on( 'cf.form.init', function( e, obj ){

		/**
		 * obj contains
		 *
		 * idAttr: The id attribute of form
		 * formID: The form ID
		 * state: CFState object for the form
		 * fieldIds: The ids of fields in form
		 */
		var $form = $( '#' + obj.idAttr );

		//find all fields in form with field_slug class
		var $fields = $form.find( '.field_slug' );

		if( $fields.length ){

			var field_slug_change_callback = function (value, idAttr) {
				//value is current value
				//idAttr is field id attribute
			};


			/** {CF_State} */
			var state = obj.state;
			$fields.each( function (i,field) {
				state.events().subscribe( $(field).attr( 'id' ), field_slug_change_callback );
			});
		}

	});

	var field_slug_init = function(){
		//do stuff to make field JavaScript work
	};

	//rerun when page changes, field is added back via conditionals, or form is loaded in modal
	$(document).on('cf.pagenav cf.add cf.modal', field_slug_init );

	field_slug_init();

});

field.js

jQuery( document ).ready( function( $ ){
	var field_slug_init = function(){
		//do stuff to make field JavaScript work
	};

	//rerun when page changes, field is added back via conditionals, or form is loaded in modal
	$(document).on('cf.pagenav cf.add cf.modal', field_slug_init );

	field_slug_init();

});