How to integrate form in Duda

  • Profile Image
    matzick
    Asked on November 03, 2016 at 11:16 AM

    I'm looking to use your form services and integrate with Duda. https://www.dudamobile.com/

    Duda does not allow for scripts, and I need form to be responsive. Is there HTML5 code available I'm missing?

    Duda is very similar to SquareSpace, which I see you have partnered with. should I use this source code to embed form or do you have a different idea?

    Thanks,

    AJ

  • Profile Image
    Kevin_G
    Answered on November 03, 2016 at 01:24 PM

    Unfortunately we do not have a current integration with the service you're mentioning, but the embed method used in Squarespace is the iFrame method, so as you're not allowed to add custom scripts I think getting the iFrame code of your form should help you, this will load all the resources withing the iFrame so you do not need to add any other code to your form. 

    Here's the guide that will help you to get the iFrame code of your form: Getting-the-form-iFrame-code

    Also, the iFrame code has a JavaScript code that automatically calculates the height of the form, this code may be removed when embedding the form, but you could still set up manually the height value so the form displays properly in your webpage, here is a sample iFrame code that you may use to embed in your webpage:

        <iframe

          id="JotFormIFrame"

          onload="window.parent.scrollTo(0,0)"

          allowtransparency="true"

          src="https://form.jotform.com/FormID"

          frameborder="0"

          style="width:100%;

          height:2190px;

          border:none;"

          scrolling="no">

        </iframe>

    The highlighted part is where you will need to change the height. 

    Regarding to responsiveness, all of our forms are responsive by default, but if you would like there is a widget that helps to make a form mobile responsive too, here is the link: https://widgets.jotform.com/widget/mobile_responsive 

    Here's a guide about how to add a widget to your form: How-to-Add-a-Widget-to-your-Form

    And if you would need to customize your form layout you could also inject your custom code by following this guide: How-to-Inject-Custom-CSS-Codes

    So if some fields or elements in your form do not display properly on mobile devices you could also customize the layout by injecting your custom CSS code. 

    Hope this helps.