Typeform FULL Page repsonsiveness

Options
Gertm
Gertm Member Posts: 2
in Ask a Question

How do I embed a Typeform as a full page, where it's responsive as per how it works on Typeform, NOT through HTML widget embed, as it doesn't resize with the various screen sizes. I basically want the same responsiveness as on typeform's direct link, BUT just need a custom URL as per our domain's URL.

Best Answer

  • Aj_Cre8
    Aj_Cre8 Member Posts: 651 MVP
    Answer ✓
    Options
    https://community.duda.co/discussion/comment/591#Comment_591

    You are going to need to use Duda Flex..

    1. Create a Grid
    2. Single column
    3. No gap
    4. Full bleed
    5. 100vh

    Add a container and make it fill the entire grid (entire page) then you can add your HTML widget and embed the code.. (just for reference, I already tested this, and it works)

    image.png

    You may need to tweak the design of the container or the grid a tad. Typeform is not the best solution for forms because it was designed as a Standalone solution (on their URL). We always recommend JotForm, PaperForm or the new Formaloo on appsumo.

Answers

  • Aj_Cre8
    Aj_Cre8 Member Posts: 651 MVP
    Options

    You can place the embed code directly into the row. It should be resizing just fine thought. I do not like or use TypeForm so I can not speak on it much but try adding the embed code directly to the Row.

    First start by making the row Full Bleed

    image.png







    Then click the Gear Icon and Click EDIT HTML/CSS

    image.png







    Then you can paste the TypeForm code here

    image.png








    Once you do that, you should be able to adjust the padding and margin of the row from the design tab of the row and that should do it.

  • Gertm
    Gertm Member Posts: 2
    Options

    Already tried that and it doesn't work, it doesn't resize to full screen. This is the experience we want: https://80j3bjc3ck4.typeform.com/sterdts-quote

    And this is the full embed code that we just can't get to replicate above experience:

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Quote Request</title> <style>*{margin:0;padding:0;} html,body,#wrapper{width:100%;height:100%;} iframe{border-radius:0 !important;}</style> </head> <body> <div id="wrapper" data-tf-widget="F876QgTt" data-tf-inline-on-mobile data-tf-medium="snippet" ></div> <script src="//embed.typeform.com/next/embed.js"></script> </body> </html>


Categories