JotForm Card>>Embed>>Feedback Button: I would like to change the height of this embedding method.

  • Profile Image
    KochavaSupport
    Asked on February 20, 2018 at 01:41 PM
    One last question, I would like to change the size of the iframe that the form is in. How can I increase the size of that iframe? There is no option in the embed page to increase the size of the iframe and I tried implementing the height: and width: code that was in the example which did not work.
  • Profile Image
    BDAVID
    Answered on February 20, 2018 at 01:42 PM

    Did you try increase the height of the Feedback Button embed code? Can you please share the URL of the webpage where you have embedded the form?

  • Profile Image
    KochavaSupport
    Answered on February 20, 2018 at 02:09 PM

    Here is the code:


    <script src="https://form.jotform.com/cardforms/feedbackEmbedButton.min.js"></script> <script> new JF_FeedbackEmbedButton({ buttonText: "Feedback", buttonFontColor: "#FFFFFF", buttonBackgroundColor: "#454545", buttonSide: "Bottom", buttonAlign: "Left", buttonIcon: "rate", formId: 80434912206147 }); </script>


    I can't actually send the URL to you, it is a stage site that cannot be accessed offsite.

  • Profile Image
    BDAVID
    Answered on February 20, 2018 at 02:53 PM

    Can you try this? 

     <script src="https://form.jotform.com/cardforms/feedbackEmbedButton.min.js"></script>

        <script>

          new JF_FeedbackEmbedButton({

            buttonText: "Feedback",

            buttonFontColor: "#FFFFFF",

            buttonBackgroundColor: "#454545",

            buttonSide: "Bottom",

            buttonAlign: "Left",

            buttonIcon: "rate",

            formId: 80434912206147,

    height: 500,

          });

        </script>

  • Profile Image
    BDAVID
    Answered on February 20, 2018 at 02:54 PM

    Note: please remove the comma after "height: 500"

  • Profile Image
    KochavaSupport
    Answered on February 20, 2018 at 03:12 PM

    I tried the code and there is still no change in the height of the iframe.

  • Profile Image
    BDAVID
    Answered on February 20, 2018 at 03:25 PM

    You could ask your website developer to try to increase the height of the div element where you have embedded the script code, through CSS injection.

  • Profile Image
    KochavaSupport
    Answered on February 21, 2018 at 03:02 PM

    The size is being pulled from JotForm:


    <div id="JF_feedback_embed_80434912206147_9315_wrapper" class="jfFeedbackButton-modal isDesktop jFisOpen" style="display: none; height: 325px;"><iframe id="JF_feedback_embed_80434912206147_9315_iframe" src="https://www.jotform.com/80434912206147?feedbackEmbedButton&amp;noToolBar&amp;disableSmartEmbed=1"></iframe></div>


    The size is set at 380 x 325, is there any way to change that?

  • Profile Image
    BDAVID
    Answered on February 21, 2018 at 03:39 PM

    I have forwarded this to our back-end team to see if there is a way to increase the size of the Feedback Button code. You will be updated via this thread.

  • Profile Image
    KochavaSupport
    Answered on February 26, 2018 at 12:31 PM

    I would love to start using this on my site, but cannot until I can increase the size of the form so that the users can see the entire form without scrolling. Has there been any update yet?

  • Profile Image
    Richie_P
    Answered on February 26, 2018 at 01:58 PM

    Unfortunately, we still have no updates on the issue. However, your ticket has been assigned already by our developers and flagged as important.

    We will let you know via this thread if updates are available.

    Thank you.

  • Profile Image
    burak
    Answered on March 14, 2018 at 03:53 AM

    Hello,

    We've implemented the feature you requested. You can define your own width and height preferences simply by adding forceWidth and forceHeight attributes to the code generated from JotForm. 

    For example if you want to override iframe's height by 600px, your code should be like:

    <script src="https://form.jotform.com/cardforms/feedbackEmbedButton.min.js"></script>

    <script>

      new JF_FeedbackEmbedButton({

        buttonText: "Feedback",

        buttonFontColor: "#FFFFFF",

        buttonBackgroundColor: "#454545",

        buttonSide: "Bottom",

        buttonAlign: "Left",

        buttonIcon: "rate",

        formId: 80434912206147,

        forceHeight: 500

      });

    </script>

    Please note the highlighted part. You can also change the width setting similarly.

    Hope this meet your requirements.

    Thanks for reporting