Rich Text HTML Fields
Instructions
Code
Filename: gw-rich-text-html-fields.php
<?php
/**
* Gravity Wiz // Gravity Forms // Rich Text HTML Fields
* https://gravitywiz.com/
*
* Instruction Video: https://www.loom.com/share/fc666b9d3e1f48ed9dc21a3fcadef783
*
*/
/*
* @todo
* 1. Add merge tag selector.
* 2. Add support for inserting images.
*/
add_action( 'admin_init', function() {
if ( GFForms::get_page() === 'form_editor' ) {
wp_enqueue_editor();
}
} );
add_action( 'gform_field_standard_settings_200', function() {
?>
<li class="content_setting rich_content_setting field_setting">
<label for="field_content" class="section_label">
<?php esc_html_e( 'Content', 'gravityforms' ); ?>
<?php gform_tooltip( 'form_field_content' ); ?>
</label>
<?php
$id = 'field_rich_content';
$settings = array(
'tinymce' => true,
'textarea_name' => $id,
'editor_height' => 250,
);
wp_editor( '', $id, $settings );
?>
</li>
<style>
.rich_content_setting label {
position: relative;
z-index: 2;
}
#wp-field_rich_content-wrap {
margin-top: -2.7rem;
}
.content_setting:not( .rich_content_setting ) {
display: none !important;
}
</style>
<script>
jQuery( document ).on( 'gform_load_field_settings', function( event, field ) {
var id = 'field_rich_content';
wp.editor.remove( id );
jQuery( '#' + id ).val( field.content );
wp.editor.initialize( id, {
tinymce: {
setup: function( editor ) {
editor.on( 'Paste Change input Undo Redo', function () {
SetFieldProperty( 'content', editor.getContent() );
} );
}
},
quicktags: true
} );
} );
jQuery( document).on( 'tinymce-editor-setup', function ( event, editor ) {
var editorId = 'field_rich_content';
if ( editor.id === editorId ) {
editor.settings.toolbar1 = 'bold,italic,underline,bullist,numlist,alignleft,aligncenter,alignright,link';
// Switch to visual/text mode.
jQuery(`#wp-${editorId}-wrap .switch-tmce, #wp-${editorId}-wrap .switch-html`).on('click', function() {
var mode = jQuery(this).hasClass('switch-tmce') ? 'tmce' : 'html';
window.switchEditors.go(editorId, mode);
});
}
} );
</script>
<?php
} );
Hi, I haven’t thoroughly tested this, but it appears to be working. I asked Gok to modify your code to target the description field within each entry and apply the same rich text capabilities. I thought I would share it with you.
Please note that the formatting works on the front end. You may need to refresh your page to see any wording changes in the backend.
Please feel free to delete this post and the code if it’s not appropriate to attach this kind of information.
All the best, Matt
https://gist.github.com/Matthew-Hibbins/0328a3223df02dc6f5d37fab68114a16
Hi Matt,
This looks awesome, thanks for sharing!
Best,
I would love to see this snippet as a perk with live preview support in the form editor and import media support.
Hi Christopher,
Thanks for the feedback. I will forward your feedback to our Product manager to be logged as a feature request.
Best,
Perfect, thanks!
Hey Nicola,
Glad to hear that you’ve found this helpful!
Cheers,
Hi, I tried snipping but it doesn’t work and also leaving it active no longer allows me to select any form field to see or change the settings, thank you
Hi,
Sorry to see it isn’t working for you, but I haven’t been able to recreate the issue. Can you please submit a support ticket for this, and provide us more information on the issue, preferable a screencast of how it works on your end?
Best,
Hi, now the snipped works :-) fantastic
thank you very much :-)
Brilliant. That’s great to hear!
This same thing is happening to me, too. Snippet was copied/pasted exactly above (using the “Copy” button, removed the opening php tag) and put into Code Snippets Pro and activated. Now, I cannot select and field or change any field’s settings when working with a form.
Is this something that is a quick fix, or do I need to go submit a support ticket for this, too?
Hi Matt,
Sorry about the issue you’re having. However, the snippet works as expected for me and I still can’t recreate the issue. It could be a conflict with another plugin or code on our website, so we’ll have to troubleshoot this on your end. Can you please submit a support ticket so we can take a closer look at your setup.
Best,
In case anyone else has a similar issue, please check to confirm that, the “No Conflict Mode” setting on the Gravity Forms settings page is disabled.
Best,