Rich Text HTML Fields
Instructions
Code
Filename: gw-rich-text-html-fields.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<?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.
*/
add_action( 'admin_init', function() {
if ( GFForms::get_page() === 'form_editor' ) {
wp_enqueue_editor();
wp_enqueue_media(); // Required for media uploads
}
} );
add_action( 'gform_field_standard_settings', function( $position ) {
if ( $position !== 200 ) {
return;
}
?>
<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 {
/* Display the label above the editor without overlapping the Visual/Code tabs. */
display: inline-block !important;
position: relative;
z-index: 2;
}
#wp-field_rich_content-wrap {
margin-top: -2.7rem;
}
.content_setting:not( .rich_content_setting ) {
display: none !important;
}
.rich_content_setting i.mce-i-image {
font-size: 20px;
}
</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,image';
// Handle image insertion from media library
editor.addButton( 'image', {
icon: 'image',
tooltip: 'Insert Image',
onclick: function() {
var frame = wp.media({
title: 'Insert Media',
button: { text: 'Insert into HTML Field' },
multiple: false,
library: { type: 'image' }
} );
frame.on('select', function() {
var selection = frame.state().get('selection').first();
if (!selection) {
return;
}
var attachment = selection.toJSON();
var url = attachment.url.replace(/"/g, '"');
var alt = (attachment.alt || '').replace(/"/g, '"');
editor.insertContent('<img src="' + url + '" alt="' + alt + '" />');
} );
frame.open();
}
} );
// 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
} );
THANK YOU!!!!
I can’t believe this isn’t a default option in Gravity Forms.
My clients (ordinary people with no programming knowledge) are shocked when I have to explain that they have to put HTML tags in the fields of a form.
When will this option be added as a default to Gravity Forms? I’ve seen it have been proposed several times over many years, and they’ve never listened…
Hey Jambro,
No problem! We’re glad to hear that this has been helpful to you and your clients.
Now, just based on their roadmap, it doesn’t look like they have this feature under consideration currently for core, but it never hurts to send another request. You can directly submit a feature request for Gravity Forms here.
Fingers crossed, but for now, I’m glad to hear that the snippet is working out for you!
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,