Hello @stephenboluwatife1
Thank you very much for using our plugin.
Our plugin generates and renders the forms on the client side, and third-party shortcodes are replaced by custom tags and scripts. Therefore, we cannot guarantee that third-party shortcodes will not break form structures. For this reason, we do not support third-party shortcodes in forms.
An alternative would be to insert the third-party shortcodes into the content of the page where the form is, and then move the resulting tags to the form after rendering it.
For example, you can insert a div tag into the page’s content with the shortcode as follows:
<div class="my-shortcode" style="display:none;">[shortcode-here]</div>
And then, insert an “HTML Content” field in the form with the following piece of code as its content:
<div class="shortcode-container"></div>
<script>
fbuilderjQuery(document).one('showHideDevEvent', function(){
fbuilderjQuery('.shortcode-container').html(fbuilderjQuery('.my-shortcode').html());
});
</script>
Best regards.
<div class=”my-shortcode” style=”display:none;”>[shortcode-here]</div>
I want to add the code in the div tag and I put the shotcode in the part your said I should put it shortcode here it is compulsory to add the div tag and html contect or only the div tag because I don’t want it to show the shotcode I want to add it is elementor shortcode so I don’t want user to edit it only view it
Hello @stephenboluwatife1
The div tag is used only to identify the HTML tags generated by the shortcode to be moved to the form after rendering:
fbuilderjQuery('.shortcode-container').html(fbuilderjQuery('.my-shortcode').html());
});
If you can identify the HTML structure generated by the shortcode without using the div tag, you can remove it. But please, keep in mind that you cannot insert third-party shortcodes directly inside the form.
Best regards.
I add this to div tag <div class=”my-shortcode” style=”display:none;”>[woo-balance]</div>
And add this code to html fbuilderjQuery(‘.shortcode-container’).html(fbuilderjQuery(‘.woo-balance’).html());
});
But it did not display anything and again I don’t want user to edit the shortcode only to view and read it only
Hello @stephenboluwatife1,
In the “HTML Content” field the code would be:
<div class="shortcode-container"></div>
<script>
fbuilderjQuery(document).one('showHideDevEvent', function(){
fbuilderjQuery('.shortcode-container').html(fbuilderjQuery('.my-shortcode').html());
});
</script>
If you don’t want to allow users edit the shortcodes you can insert them in an Elementor template and not directly into the page content.
Best regards.
The reason am putting it in page content us because I have like 30 different page and the elementor design is only one I can create multiple elementor page and add it there that why am looking for a way to add the elementor design shotcode to each form.
The div tag is correct right <div class=”my-shortcode” style=”display:none;”>[woo-balance]</div>
And hope user can’t edit only view and read it
I hope you understand 🙂
Hello @stephenboluwatife1
Yes, I understand the process, but the shortcode cannot be inserted into the form’s structure because our plugin would not replace it.
Best regards.
Oh okay so it not possible to install the shortcode there 😢
Hello @stephenboluwatife1
No, sorry. You must insert the shortcode into the page content and then move the resulting HTML tags to the form using code.
Best regards.
