I have inherited an institutional Wordpress site containing a form that takes users to search results on a separate (non-Wordpress) site. I recently made a change to a separate part of the page that contains the form, and discovered that any time I publish the page, Wordpress alters the code by removing the <form> and <input> elements, and in so doing breaks the form.
I didn't write the HTML for this form, and am hardly proficient in HTML, but from what I can tell the code isn't badly formed. I can preview the HTML as I enter it and it looks good until I publish it. And if I edit the HTML on the published page to restore the elements that were removed during publication, the form also looks correct and works as expected.
Here's the code I have entered in a custom HTML block in the editor:
<div style="padding: 1em; text-align: center; background-color: #eee;">
<form id="dbSearchForm" method="get" accept-charset="UTF-8" action="https://externaldb.oursite.com/index.php">
<input type="hidden" value="core/search" name="p">
<label for="db_search_query">
<svg class="searchIcon" style="height:0.8em;" version="1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 444 455" xml:space="preserve"><path fill="currentColor" d="M444 393l-62 62L267 340c-62 34-140 28-197-15C15 282-11 210 4 142 18 75 72 21 138 5c68-16 141 9 184 64 47 60 52 147 9 211L444 393zM58 181c0 52 33 98 82 116 48 17 103 0 135-39 69-85-6-215-114-198C102 69 58 122 58 181z"></path></svg>
Search the External Database</label>
<input id="db_search_query" type="text" name="q" maxlength="150" size="25">
<input class="button" type="submit" title="Search" value="Search">
<input type="hidden" value="1" name="content">
</form>
</div>
When I publish the page, the HTML changes to this:
<div style="padding: 1em;text-align: center;background-color: #eee">
<label for="db_search_query">
<svg class="searchIcon" style="height:0.8em" version="1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" xml:space="preserve"><path fill="currentColor" d="M444 393l-62 62L267 340c-62 34-140 28-197-15C15 282-11 210 4 142 18 75 72 21 138 5c68-16 141 9 184 64 47 60 52 147 9 211L444 393zM58 181c0 52 33 98 82 116 48 17 103 0 135-39 69-85-6-215-114-198C102 69 58 122 58 181z"></path></svg>
Search the External Database</label>
</div>
If I return to the editor, I find the altered code in the HTML block, and the <form> and <input> elements are replaced with line breaks. Like I said, I am not an expert at HTML, or WordPress for that matter, so I can't quite tell what the culprit might be. If the code isn't badly formed, should I assume my institution's security policy is blocking the creation of a form on the webpage?