AUI form on workflow configuration page

Jira Development Jira Server
1

Hi all
I’m quite new with jira add-on development.
I created a custom post function which works fine. However the configuration page was a simple, ugly form and I’m trygin to improve this.

I was curious about using AUI on my form so I checked this page Forms - AUI Documentation

Somehow I run intro troubles:
My aui-select items get those weird borders and the alignment of the elements is messed-up.
I was able to solve this by adding an empty </form> element at the top of my velocity template and surrounding my form elements in <form class="aui"> But now when I submit the form it fails because it doesn’t find the input parameters.
The working form I had was not surrounded with form tags on my velocity template.

Am I not supposed to use AUI on a workflow configuration screen?

Here’s a simplified version of my .vm template:

$webResourceManager.requireResource("com.atlassian.auiplugin:aui-select")

</form> <!-- The form looks good when adding this empty tag but is not functional -->
<form class="aui">
    <div class="field-group">
      <label for="newIssueSummary">Summary</label>
      <input name="newIssueSummary" id="newIssueSummary" value="$newIssueSummary" class="text long-field"/>
      <div class="aui-help aui-help-text">
          <p class="aui-help-content">
             Some help text
          </p>
      </div>
    </div>
    <div class="field-group">
        <label for="issueLinkTypes">Link Type:</label>
        <aui-select name="issueLinkTypes" id="issueLinkTypes" placeholder="Select link type">
	        <aui-option>Link 1</aui-option>
	        <aui-option>Link 2</aui-option>
        </aui-select>
    </div>
</form>
2

You can add the missing aui class to the enclosing form element with jQuery:

<textarea id="myElement" name="myElement" type="text"></textarea>
<script>
    AJS.toInit(function(){
        // add the missing aui style to the form element
        $('#myElement').closest('form').addClass('aui');
    });
</script>