Hello,
Thanks for the feedback. The problem is that you’re already in a global <form> tag in the “Post Edit” screen (which contain <input>: Title, content, ACF fields etc…).
When you use the Gravity Forms shortcode in your Flexible Content Preview, it prints an another <form> and <input> inside that form, that are not related to the current post or ACF. This mix breaks the native “Post Edit” Update form. This behavior is not limited to Gravity Forms, it’s the same thing for all forms ouput in Layouts Preview Mode (ie: ACF Extended Forms).
The solution is to not print the Gravity Forms shortcode HTML (or any other forms) in the Preview Mode of the Flexible Content, and instead, print a grey <div> with a text like “Form” for example.
You can disable a specific shortcode in a layout in the preview mode, using the following method. Here is a usage example within the Layout template.php file:
// Check if we're in Preview Mode (Admin preview)
if($is_preview){
// Rewrite the shortcode to print a simple text
add_shortcode('gravity_form', function(){
echo '<div style="padding:50px 0; text-align:center; background:#f4f4f4;">Gravity Form</div>';
});
}
// Normal templating part
$my_sub_field = get_sub_field('my_sub_field');
// ...
You can also disable the shortcode globally in all previews, in case you have multiple WYSIWYG editors in different layouts, by using this hook:
add_action('acfe/flexible/render/before_template', 'flexible_content_disable_gravity_forms_shortcode', 10, 3);
function flexible_content_disable_gravity_forms_shortcode($field, $layout, $is_preview){
if($is_preview){
// Rewrite the shortcode to print a simple text
add_shortcode('gravity_form', function(){
echo '<div style="padding:50px 0; text-align:center; background:#f4f4f4;">Gravity Form</div>';
});
}
}
Hope it helps!
Regards.
I figured that was the reason. I just didn’t know if you had a workaround that still allowed rendering of the form. But I understand why that is not the case with the “form inside a form” issue.
We are using multiple WYSIWYG inputs, so I will have to handle it that way. But I appreciate offering both solutions.
Thanks,
Ian
Hello,
There’s maybe a possible solution with Javascript which consist to automatically transform the <form> tag output, and disable any form input. But I still have to dig in see if I can find an universal & automatic solution.
Regards.
That would be appreciated if there is a JS solution that could eliminate the form tags, so that the form will render as expected, but without any functionality when inside the Admin.
I’ll use the workaround you provided for now, but would love to see such a feature added in the future.
Thanks,
Ian
Just a small note to anyone who comes across this code snippet – there is a small type in the code. The section to modify the Gravity Forms shortcode should be “gravityform”, not “gravity_form”.
add_shortcode('gravityform', function(){
echo '<div style="padding:50px 0; text-align:center; background:#f4f4f4;">Gravity Form</div>';
});
Otherwise the solution is working well for me.
Hello,
Yeah, I didn’t know about the shortcode name (I don’t use Gravity Forms), so I just invented that one.
For the JS solution, it could leads to some style issue if I delete/transform the <form> tag, since some CSS rules can target form .field. Anyways, I’ll try to find some time to work on it, see what I do.
Regards.
