Plugin Form View changes form

Form’s appearance changed when displayed by the “Content Plugin Form View”.

You have integrated a form into an article using the Content Plugin - Visforms Form View.
You have added a plugin string to the article:

{vfformview}{"formid":"4", "show_page_heading":"false"}{/vfformview}

Now the form appears strangely formatted:

• The font is in red color everywhere.
• Font size is smaller than expected.

Reason

The HTML code contains an additional HTML code element.
The additional HTML code element wraps the entire form.

<div class="visforms visforms-form visforms-form-form plg-vfformview bt5 visform">
     <code>
         <div class="alert alert-danger error-note" style="display: none;"></div>
         <script type="text/javascript"> ... </script>
         <form ...>
         </form>
     </code>
</div>

The HTML code element applies the following Bootstrap CSS and sets the font size and font color for the entire form.

code {
     font-size: .875em;
     color: var(--bs-code-color);
     word-wrap: break-word;
}

Cause

This additional HTML code element is not generated by Visforms. The HTML code element was most likely created by copying and pasting the plugin string. If you copy the plugin string as a template from the documentation and copy it into the article, it may happen that the HTML code element from the documentation is also copied.

If you copy and paste the documentation into the article, the following incorrect plugin string can result:

<code>{vfformview}{"formid":"4", "show_page_heading":"false"}{/vfformview}<code>

The HTML code element is part of the documentation and causes highlighted formatting for code parts in the documentation. Depending on how you select the plugin string in the documentation, it may happen

• that the web browser not only reads the actual text,
• but also the HTML code element is copied.

Note: In the article, remove the HTML code element that encloses the plugin string.