Hey There!
I am new to PHP, and this is my first time customizing Gravity Forms, so I apologize in advance for anything that doesn’t make sense, or is just plain wrong. Anyways, I am having trouble getting my custom field type to save correctly. I created a custom field type which extends Gravity Forms Select field, so that I could take advantage of the Select2 library (to add inline images in my drop-down menus). Not sure if this the best way by any means, but this was my first idea since I had done something similar with a different WordPress plugin called MetaBox in the past. I will attach a photo of what this field looks like on the front-end for reference.
Before I added this custom field type, I was using Gravity Forms basic select field to make sure I had everything “plumbed” correctly, so that on submission of this form, a new row would be added in my custom database table. All of that is working like it should, (besides this field not getting populated for new rows).
My code to create the custom field type is as follows:
// Create A custom "Alert Type" field that uses the Select2 Library
class GF_Field_Alert_Type extends GF_Field_Select {
// Set the new field type
public $type = 'alert_type';
// Set the field title in the back-end form editor
public function get_form_editor_field_title() {
return esc_attr__( 'Alert Type', 'gravityforms' );
}
// Set the location of where this field option can be found
public function get_form_editor_button() {
return array(
'group' => 'standard_fields',
'text' => $this->get_form_editor_field_title()
);
}
// Customizes the the way this field looks / acts
public function get_field_input( $form, $value = '', $entry = null ) {
ob_start(); ?>
<div>
<head>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<link rel="stylesheet" href="/wp-content/themes/Divi Child Theme/style.css" />
</head>
<body>
<select id="alert_type" name="alert_type">
<option value="Low" data-img_src="/wp-content/uploads/2022/12/Low.png">Low</option>
<option value="High" data-img_src="/wp-content/uploads/2022/12/High.png">High</option>
<option value="Usage" data-img_src="/wp-content/uploads/2022/12/Usage.png">Usage</option>
<option value="Non-Usage" data-img_src="/wp-content/uploads/2022/12/NonUsage.png">Non-Usage</option>
</select>
<script type="text/javascript">
function custom_template(obj){
var data = $(obj.element).data();
var text = $(obj.element).text();
if(data && data['img_src']){
img_src = data['img_src'];
template = $("<div><img src=\" "+ img_src +" \"> <p> "+ text +" </p> </div>");
return template;
}
}
var options = {
/** Adds image to selected option **/
'templateSelection': custom_template,
/** Adds image to list of available options **/
//'templateResult': custom_template,
}
$('#alert_type').select2(options);
$('#alert_type').on('select2:select', function (e) {
var data = e.params.data.id;
console.log(data);
});
</script>
</body>
</div>
<?php $input = ob_get_clean();
// End of HTML block, grab everything and assign it to a variable that we can return
return sprintf($input);
}
}
GF_Fields::register( new GF_Field_Alert_Type() );
Like I mentioned earlier, all of this is pretty new to me, so I would really appreciate any guidance I can get, on what I may be forgetting / doing wrong. Or, if there is an a easier way to acheive the same result I am looking for, I would love to hear it as well! Thanks!
