Issue Collector custom form scrambled

I downloaded the JIRA 6.1 trial version and came across the Issue Collector concept.
This seemed like a really neat idea to help integrate JIRA creation with any website.
I created an Issue Collector with a custom form containing my custom fields along with some native fields for hte users to fill in, and copied the provided HTML to a Script Editor web part on a page in SharePoint.

This allowed me to request the creation of a JIRA, but the form layout was scrambled, so whilst all of the fields did exist it was hard to see them and enter values - see attached screen shots.
'_1' shows the Summary and Description fields - there is no scroll bar, the field names are seen under the field value boxes.
'_2' shows what happens when I manage eventually to scroll down to the other fields - again the field names are under the field value boxes
'_3' shows another attempt to create an issue and scroll down when it wouldn't let me go past the Environment field, seen at the top above the Summary and Description fields
'_4' shows what I see when I finally give up and submit the issue!

The HTML that I inserted into the Script Editor web part is as follows:

<script type="text/javascript" src="http://localhost:8080/s/d41d8cd98f00b204e9800998ecf8427e/en_GBio9p4o-1988229788/6144/4/1.4.0-m6/_/download/batch/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector.js?collectorId=d881c35c"></script>

Please let me know if you need any more information from me.

When I tried using the standard Issue Collector Feedback form, this worked perfectly using the same method of adding it to the SharePoint page