Embed method in website to adjust the size

  • StratumForms
    Asked on August 21, 2018 at 8:48 AM

    Hello,

    We would like to use this single answer form in our sites header as a navigation form. Is there a way to shrink, or remove the background? right now it is almost full screen which ruins our header size. Thanks in advance.

    Adam

     

  • roneet
    Replied on August 21, 2018 at 10:37 AM

    I have found the form on your web page and can see that it is embedded using script code, what can be in conflict with your other page content. I would suggest you use the iFrame method of embedding your form.

    Getting-the-Form-iFrame-Code

    Let us know if this worked.

    Thanks.

  • StratumForms
    Replied on August 22, 2018 at 9:51 AM

    Thank Roneet,

     

    Unfortunately this does not answer my question. I hope I was clear and will try to do so in now.

     

    I have created a form using the single answer method.

     

    The form is on a large background I would like to remove or make smaller. I have taken the time to create an illustration to demonstrate the offending area.

     

    Thank you.

  • roneet
    Replied on August 22, 2018 at 11:26 AM

    The reason why I suggested using iFrame code is that the normal embed code is using script code to get the form to appear on your website. While the iframe code uses the iframe element, here you can customize height and width styles too.

    I checked your page and on adjusting the height to 280px and width to 1px, you can minimize the background like I did on my browser console here.

    Embed method in website to adjust the size Image 10

    You can replace the Script code that you have embedded with the following iFrame code.

    <iframe
          id="JotFormIFrame-82314309591153"
          onDISABLEDload="window.parent.scrollTo(0,0)"
          allowtransparency="true"
          allowfullscreen="true"
          allow="geolocation; microphone; camera"
          src="https://form.jotform.com/82314309591153"
          frameborder="0"
          style="width: 1px;
          min-width: 100%;
          height:539px;
          border:none;"
          scrolling="no"
        >
        </iframe>

    If the above code does not work then try changing the height: 280px !important; this will minimize the background size. You can play with the height attribute according to your needs.

    Let us know if the suggested workaround does not work. We will be happy to help.

    Thanks



  • StratumForms
    Replied on August 22, 2018 at 4:57 PM

    Thank you Ronneet,

    This did answer my questions.

    Regards,


    A