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