The following snippet must be integrated in the markup:
<script src="https://flyingforms.io/Forms/FormRenderer/JavaScript"></script>
<script type="text/javascript">
flyingformsRender.renderForm({
host: "https://flyingforms.io",
formId: "UUID",
formVersionId: "UUID",
stylesheet: false,
approved: false
});
</script>
click to copy
The form will be rendered at the position, where the renderForm method is called. The form will rendered in the dom with native form element tags. An example output:
<div class="flyingforms">
<form method="post" action="https://flyingforms.io/Forms/Submission/Submit" class="flyingforms__form">
<input type="hidden" name="sys_formVersionId" value="...">
<input type="hidden" name="sys_formId" value="...">
<input type="hidden" name="sys_approved" value="false">
<div class="flyingforms__row " data-id="b91de729-91c6-4185-876b-4cf5a9dd7e9c">
<div class="flyingforms__col flyingforms__col--12 flyingforms__row__content" style="display: block;">
<div class="flyingforms__field flyingforms__type--text">
<label class="flyingforms__label flyingforms--w-100">First Name</label>
<div class="flyingforms__input" data-border-target=".flyingforms__input > input">
<input type="text" class="flyingforms--w-100" data-id="03b9d3a4-3468-468f-8601-42bf06228d43" aria-label=""
name="field_firstname" id="firstname" placeholder="" aria-autocomplete="both"
aria-multiline="false" aria-placeholder="" value=""></div>
</div>
<div class="flyingforms__field flyingforms__type--text">
<label class="flyingforms__label flyingforms--w-100">Last Name</label>
<div class="flyingforms__input" data-border-target=".flyingforms__input > input">
<input type="text" class="flyingforms--w-100" data-id="45321c8e-ff53-4632-934a-681e2501bf9e" aria-label=""
name="field_lastname" id="lastname" placeholder="" aria-autocomplete="both"
aria-multiline="false" aria-placeholder="" value=""></div>
</div>
<div class="flyingforms__field flyingforms__type--textarea">
<label class="flyingforms__label flyingforms--w-100">Message</label>
<div class="flyingforms__input" data-border-target=".flyingforms__input > textarea">
<textarea class="flyingforms--w-100" data-id="c8e13417-c919-4654-9d42-063e4d6eebc7" aria-label=""
name="field_message" id="message" placeholder="" aria-autocomplete="both"
aria-multiline="true" aria-placeholder="" value=""></textarea></div>
</div>
<div class="flyingforms__field">
<input type="submit" class="" data-id="c4001b45-70b1-4867-827b-274325e0eba7" value="Send"></div>
</div>
</div>
</form>
<div class="flyingforms__send-message"></div>
</div>
Key | Type | Description | Required |
host | Uri format | The uri will be used when the form is submitted. | Required |
formId | UUID | The form id is used to fetch the latest form definition. | Required |
formVersionId | UUID | Choose a specific form version. The approved state will be ignored | Optional |
stylesheet | boolean | The assigned on your form will be loaded. | Optional |
approved | boolean | Use state specific latest form version. | Optional |