JavaScript Reference

Embedding Form

Include Snippet

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>

flyingformsRender.renderForm Options

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