Textarea field escape issue with theme + advanced layout builder

Product Support
1

Your software
mautic 3.1.1-rc
php 7.3.22

Your problem
as soon as I use a textarea field in a form, the whole thing get’s escaped in the website editor. Can someone give me a hint what to look for or how to fix this?

Here is the HTML code from the form with only one field the textareafield

<style type="text/css" scoped>
.mauticform_wrapper { max-width: 600px; margin: 10px auto; }
.mauticform-innerform {}
.mauticform-post-success {}
.mauticform-name { font-weight: bold; font-size: 1.5em; margin-bottom: 3px; }
.mauticform-description { margin-top: 2px; margin-bottom: 10px; }
.mauticform-error { margin-bottom: 10px; color: red; }
.mauticform-message { margin-bottom: 10px;color: green; }
.mauticform-row { display: block; margin-bottom: 20px; }
.mauticform-label { font-size: 1.1em; display: block; font-weight: bold; margin-bottom: 5px; }
.mauticform-row.mauticform-required .mauticform-label:after { color: #e32; content: " *"; display: inline; }
.mauticform-helpmessage { display: block; font-size: 0.9em; margin-bottom: 3px; }
.mauticform-errormsg { display: block; color: red; margin-top: 2px; }
.mauticform-selectbox, .mauticform-input, .mauticform-textarea { width: 100%; padding: 0.5em 0.5em; border: 1px solid #CCC; background: #fff; box-shadow: 0px 0px 0px #fff inset; border-radius: 4px; box-sizing: border-box; }
.mauticform-checkboxgrp-row {}
.mauticform-checkboxgrp-label { font-weight: normal; }
.mauticform-checkboxgrp-checkbox {}
.mauticform-radiogrp-row {}
.mauticform-radiogrp-label { font-weight: normal; }
.mauticform-radiogrp-radio {}
.mauticform-button-wrapper .mauticform-button.btn-default, .mauticform-pagebreak-wrapper .mauticform-pagebreak.btn-default { color: #5d6c7c;background-color: #ffffff;border-color: #dddddd;}
.mauticform-button-wrapper .mauticform-button, .mauticform-pagebreak-wrapper .mauticform-pagebreak { display: inline-block;margin-bottom: 0;font-weight: 600;text-align: center;vertical-align: middle;cursor: pointer;background-image: none;border: 1px solid transparent;white-space: nowrap;padding: 6px 12px;font-size: 13px;line-height: 1.3856;border-radius: 3px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
.mauticform-button-wrapper .mauticform-button.btn-default[disabled], .mauticform-pagebreak-wrapper .mauticform-pagebreak.btn-default[disabled] { background-color: #ffffff; border-color: #dddddd; opacity: 0.75; cursor: not-allowed; }
.mauticform-pagebreak-wrapper .mauticform-button-wrapper {  display: inline; }
</style>
<div id="mauticform_wrapper_testing" class="mauticform_wrapper">
<form autocomplete="false" role="form" method="post" action="https://hyperion.maracuja.email/form/submit?formId=3" id="mauticform_testing" data-mautic-form="testing" enctype="multipart/form-data">
    <div class="mauticform-error" id="mauticform_testing_error"></div>
    <div class="mauticform-message" id="mauticform_testing_message"></div>
    <div class="mauticform-innerform">

        
      <div class="mauticform-page-wrapper mauticform-page-1" data-mautic-form-page="1">

        <div id="mauticform_testing_f_message" class="mauticform-row mauticform-text mauticform-field-1">
            <label id="mauticform_label_testing_f_message" for="mauticform_input_testing_f_message" class="mauticform-label">Message</label>
            <textarea id="mauticform_input_testing_f_message" name="mauticform[f_message]" class="mauticform-textarea"></textarea>
            <span class="mauticform-errormsg" style="display: none;"></span>
        </div>

        <div id="mauticform_testing_submit" class="mauticform-row mauticform-button-wrapper mauticform-field-2">
            <button type="submit" name="mauticform[submit]" id="mauticform_input_testing_submit" value="" class="mauticform-button btn btn-default">Submit</button>
        </div>
        </div>
    </div>

    <input type="hidden" name="mauticform[formId]" id="mauticform_testing_id" value="3">
    <input type="hidden" name="mauticform[return]" id="mauticform_testing_return" value="">
    <input type="hidden" name="mauticform[formName]" id="mauticform_testing_name" value="testing">

    </form>
</div>
2

looks like the the word “textarea” is conflicting with my theme/layout builder (avia layout builder) and causing the escape problem. How can I rename those textarea id? If i just rename it in the HTML code snippet the form does not work.

            <textarea id="mauticform_input_contactformbands_f_message" name="mauticform[f_message]" class="mauticform-textarea"></textarea>