Last active
August 10, 2020 08:27
-
-
Save Shelob9/624b8fb0a22d389190ddd54f866cc3ac to your computer and use it in GitHub Desktop.
Example code to help you create your own Caldera Forms add-on. See: https://calderaforms.com/doc/create-field-type-caldera-forms
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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 | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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; | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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; | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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(); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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(); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment