Stream to Paragraph Field
Stream OpenAI responses from the OpenAI Stream field to a Paragraph (or Single Line Text) field instead. Useful when wanting to provide a starting point for users while allowing them to edit the final result.
Instructions
Install this snippet with our free Custom JavaScript plugin. https://gravitywiz.com/gravity-forms-custom-javascript/
Update the variables to match your own field IDs.
Code
Filename: gcoai-stream-to-paragraph-field.js
/**
* Gravity Connect // OpenAI // Stream to Paragraph Field
* https://gravitywiz.com/documentation/gravity-connect-openai/
*
* Stream OpenAI responses from the OpenAI Stream field to a Paragraph (or Single Line Text)
* field instead. Useful when wanting to provide a starting point for users while allowing them
* to edit the final result.
*
* Instruction Video: https://www.loom.com/share/f793319da7e449a8b01e5a8c077e24c7
*
* Instructions:
*
* 1. Install this snippet with our free Custom JavaScript plugin.
* https://gravitywiz.com/gravity-forms-custom-javascript/
*
* 2. Update the variables to match your own field IDs.
*/
var streamFieldId = 3;
var promptFieldId = 1;
var responseFieldId = 4;
var appendButtonFieldId = responseFieldId;
var $streamFieldInput = $( `#input_GFFORMID_${streamFieldId}` );
var $streamButton = $streamFieldInput.closest( '.gfield' ).find( '.gcoai-trigger' );
$streamFieldInput.on( 'change', function() {
$input = $( `#input_GFFORMID_${responseFieldId}` );
var inputValue = this.value;
// Get HTML from response field if TinyMCE is available.
if (window.tinyMCE) {
var html = $streamFieldInput.closest( '.gfield' ).find('.gcoai-output').html();
// Set HTML content in TinyMCE.
var tiny = tinyMCE.get( $input.attr( 'id' ) );
if (tiny) {
tiny.setContent( html );
}
} else {
// If TinyMCE is not available, use plain text.
$input.val( inputValue );
}
});
let $newButton = $streamButton
.clone()
.attr( 'style', 'margin-top: var(--gf-label-space-primary, 8px);' )
.on( 'click', function() {
$streamButton.trigger( 'click' );
} )
.insertAfter( $( `#input_GFFORMID_${appendButtonFieldId}` ) );
$wpEditor = $newButton.parents( '.wp-editor-container' );
if ( $wpEditor.length ) {
$newButton.insertAfter( $wpEditor );
}
$( `#input_GFFORMID_${promptFieldId}` ).on( 'blur', function() {
$streamButton.trigger( 'click' );
} );
$wpEditor = $newButton.parents('.wp-editor-container');
if ($wpEditor.length) {
$newButton.insertAfter($wpEditor);
}
$( `#input_GFFORMID_${promptFieldId}` ).on('blur', function() {
$streamButton.trigger('click');
});
Love this feature! I’ve implemented on a form on my website but I’m looking to use multiple instances of “generate” on the form. For example, I would like to generate multiple prompts throughout the form. Is this possible with the same JS?
Hi Nathan,
Glad to know, you love the snippet. The snippet, as it is now, won’t work with multiple instances of “generate” on the form. I’ll suggest you open a support ticket for this and submit this as a feature request, and provide us some additional information on your use case, to help us better understand how you want it to work.
Best,
Hi, can you tell me where to find the openai stream field? I have installed the free openai plugin, but I cannot find it.
I found it and upgraded my Gravity Connect 😁
Hi,
Glad you were able to figure it out. Enjoy Gravity Connect.
Best,