Make form mobile responsive

  • milladesignmaccom
    Asked on April 4, 2017 at 6:36 AM

    Hi.

     

    I Have an order form for a customer that I have used in Adobe Muse. What I would like is for the products to be more responsive, so that when you use a big screen the products is spread over the page in 4 columns and as you increase the page size the columns increase to three, two and then one in the mobileversion. Is that possible with jot form?

     

     

    This is the code that I have in the muse site:

     

        <iframe

          id="JotFormIFrame"

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

          allowtransparency="true"

          src="https://form.jotformeu.com/60761421462349"

          frameborder="0"

          style="width:100%;

          height:539px;

          border:none;"

          scrolling="no">

        </iframe>

        <script type="text/javascript">

          window.handleIFrameMessage = function(e) {

            var args = e.data.split(":");

            var iframe = document.getElementById("JotFormIFrame");

            if (!iframe)

              return;

            switch (args[0]) {

              case "scrollIntoView":

                iframe.scrollIntoView();

                break;

              case "setHeight":

                iframe.style.height = args[1] + "px";

                break;

              case "collapseErrorPage":

                if (iframe.clientHeight > window.innerHeight) {

                  iframe.style.height = window.innerHeight + "px";

                }

                break;

              case "reloadPage":

                window.location.reload();

                break;

            }

            var isJotForm = (e.origin.indexOf("jotform") > -1) ? true : false;

            if(isJotForm && "contentWindow" in iframe && "postMessage" in iframe.contentWindow) {

              var urls = {"docurl":encodeURIComponent(document.URL),"referrer":encodeURIComponent(document.referrer)};

              iframe.contentWindow.postMessage(JSON.stringify({"type":"urls","value":urls}), "*");

            }

          };

          if (window.addEventListener) {

            window.addEventListener("message", handleIFrameMessage, false);

          } else if (window.attachEvent) {

            window.attachEvent("onmessage", handleIFrameMessage);

          }

          if(window.location.href && window.location.href.indexOf("?") > -1) {

            var ifr = document.getElementById("JotFormIFrame");

            var get = window.location.href.substr(window.location.href.indexOf("?") + 1);

            if(ifr && get.length > 0) {

              var src = ifr.src;

              src = src.indexOf("?") > -1 ? src + "&" + get : src  + "?" + get;

              ifr.src = src;

            }

          }

          </script>

  • Sven
    Replied on April 4, 2017 at 7:55 AM

    We have an option in the form designer to make your form responsive, please follow this guide:

    How to make forms mobile responsive

     

    You can also make use of Mobile Responsive widget to align your fields in the way you described. 

     

    Thank you.

  • milladesignmaccom
    Replied on April 4, 2017 at 8:11 AM

    well I have that one on already, but I have it on two columns ... I Want i t to go from 4 columns on big screens and down to one column on mobile ...

  • Ashwin JotForm Support
    Replied on April 4, 2017 at 11:00 AM

    Hello milladesignmaccom,

    I am not sure if I have understood your question correctly. 

    I did check your form and found that your products are displayed in two columns and when it is displayed in mobile devices, it is displayed in two columns. Do you mean to say that you want to display your products in 4 column in computer and then 1 column in mobile devices?

    Please confirm and we will see if that is possible.

    We will wait for your response.

    Thank you!

  • Camilla Jakobsen
    Replied on April 4, 2017 at 11:29 AM

    Yes thats right

  • BJoanna
    Replied on April 4, 2017 at 1:58 PM

    To achieve that you will have to increase width of your form. You can increase it to 1299px on Form Designer page.

    On Designer page open Form Layout tab and change the width.

    Make form mobile responsive Image 1 Screenshot 20

    Here is my demo form: https://form.jotformpro.com/70935520379966 

    Feel free to test it and clone it.

    Hope this will help. Let us know if you need further assistance. 

  • milladesignmaccom
    Replied on April 5, 2017 at 1:59 AM

    ok, I have done this now. And in Muse I have set the form entered and with responsive with (not "stretch to browser with"). But in the mobile view now it shows only white - no form and in the computer view you can not drag it to a smaller size because the the for disappears. I hope you can help me with this?

     

    And another thing, I'm trying to edit a text and delete a text in the form, but each time I get thrown out. I've changed browser to Chrome from Safari but it does not help.
  • Ashwin JotForm Support
    Replied on April 5, 2017 at 3:16 AM

    Hello Camilla,

    Please let us know the webpage URL where you have embedded your form and we will take a look. I did check the URL which you shared earlier and it shows 404 Not Found error message. Please check the screenshot below:

    Make form mobile responsive Image 1 Screenshot 20

     

    Thank you!

  • milladesignmaccom
    Replied on April 5, 2017 at 3:21 AM

    the url: http://elisabethtalen.no/bestill.html

  • Charlie
    Replied on April 5, 2017 at 6:10 AM

    Hi,

    I see that the form is showing in your website but in three columns. 

    Make form mobile responsive Image 1 Screenshot 30

     

    Unfortunately, this is more related on how you embed your form to your website using Adobe Muse, it is also dependent on the parent element where the form is placed. Note that the parent element <div> in your case has a width of 72%, the width of the form to occupy 4 columns needs a wider width. I don't have access on your Adobe Muse but here are some suggestions:

    1. First, try re-embedding the form using the iFrame embed code instead: https://www.jotform.com/help/148-Getting-the-form-iFrame-code.

    2. Now the width of the iFrame embed code is set to 100%, it will be based on the parent element's actual width. 

    3. Make sure that the parent element has enough width to display the 4 column product field. In my case, when I set your parent element with class name "Bestillingskjema grpelem shared_content" or id "u33846" to 80% width, I can view the 4 column product field: 

    Make form mobile responsive Image 2 Screenshot 41

     

    I presume you'll need a minimum of 1,200px width for the parent element. 

    For the issue regarding the text element not being editable, I opened a separate thread for it. Please refer to this link instead for that issue: https://www.jotform.com/answers/1111721

    I hope that helps. 

  • milladesignmaccom
    Replied on April 5, 2017 at 6:33 AM

    Thank you it seems to be more right now. Is it possible to let the form be in center position not to the right? Could not find where to do that. And also the spacing between Antall: and the numbers you can choose from is way to small...

  • Mike_G JotForm Support
    Replied on April 5, 2017 at 10:21 AM

    Your form doesn't look like centered on your website because the products are not centered in the form. You can center the alignment of the products (or the content of the form) if the form width resizes automatically on screen width change.

    Adding CSS codes to your form should fix this issue. I have created a clone version of your form and added the necessary CSS codes to it.

    Here's how the form looks like before I added the CSS codes:

    Make form mobile responsive Image 1 Screenshot 30

    Notice the wide blank space on the right of the screen as I resize the web browser.

    And here's how the form looks like after adding the CSS codes:

    Make form mobile responsive Image 2 Screenshot 41

    Notice that in the screenshot above, the white blank space on the right is already equal to the space on the left.

    Below is the CSS codes I have injected to the clone version of your form to make it look like the one in the second screenshot above.

    span.form-product-item.hover-product-item {

        margin-right: 5px !important;

        margin-left: 5px !important;

    }

    @media (min-width : 1467px) and (max-width: 1920px){

    .form-all {

        width: 1450px !important;

    }

    }

    @media (min-width : 1184px) and (max-width: 1466px){

    .form-all {

        width: 1167px !important;

    }

    }

    @media (min-width : 902px) and (max-width: 1183px){

    .form-all {

        width: 885px !important;

    }

    }

    @media (min-width : 619px) and (max-width: 901px){

    .form-all {

        width: 602px !important;

    }

    }

    @media (min-width : 481px) and (max-width: 618px){

    .form-all {

        width: 462px !important;

    }

    span.form-product-item.hover-product-item {

        margin-right: 81.5px !important;

        margin-left: 81.5px !important;

    }

    }

    As for the space between "Antall" and its input field (drop-down), the additional CSS codes below should help.

    label[for^="input_1_quantity_10"] {

        margin-right: 5px !important;

    }

    I hope this helps. If you have any further questions regarding this, please feel free to contact us again anytime.

    Thank you.

  • milladesignmaccom
    Replied on April 5, 2017 at 4:26 PM

    hmmm I have done this now, but it still is not centered....is it some css I've been missing?

  • David JotForm Support Manager
    Replied on April 5, 2017 at 7:02 PM

    Please try injecting the following code: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    .form-all{

        margin-left: 5% !important;

        box-shadow: none !important;

    }

    Result:

    Make form mobile responsive Image 1 Screenshot 20

    Let us know if you need more help.

  • milladesignmaccom
    Replied on April 6, 2017 at 1:49 AM

    Hi, It's still not entered on the page... even not when I preview it in Jotform, so I don't think it has anything to do with Muse.

  • Charlie
    Replied on April 6, 2017 at 4:12 AM

    Hi,

    The problem is that the content is responsive and the columns adjust based on the current screen size, it would be hard to actually position all of them in a center. 

    The closest that I got is this one: 

    #cid_1 {

     text-align: center !important;

    }

    That should align the product fields in the center. However, form fields at the bottom of the form will not behave the same way. See what it looks like here in my cloned form: https://form.jotformpro.com/70952088120958

    I also suggest cleaning up your CSS code as there seems to be a lot of repeated codes and others are already overlapping the style. 

    I hope that helps. 

  • milladesignmaccom
    Replied on April 6, 2017 at 4:40 AM

    ok this did not do it, the text got aligned and thats not what I wanted I want the hole form to always be placed in the center of the page...

    I would like to clean up the css but I'm not sure what I can remove...

     

    what about this can one edit this in some way:

    .jotform-form.form-all

    .form-section.page-section

  • Charlie
    Replied on April 6, 2017 at 6:26 AM

    The only way that we can center the form is by identifying the actual width you want and setting the margin to auto. Below is a screenshot of what I meant, the form itself can be centered, but if you are looking for the product items to be somewhat aligned evenly and on center then that would be a different case. 

    Make form mobile responsive Image 1 Screenshot 20

     

    You can see that the form itself can be centered, but the products total width does not reach the end of the form's width, that's why it looks like it is aligned left. Example, the total width of the 4 product columns is 900px, but the current width of the parent element is 1296px, the whole form is centered but the content is subject to its position relative to its parent element. 

    Here's a sample CSS code that you can use if you want to just center align the whole form:

    .jotform-form {

    width: 90vw !important;

    margin: 1em auto;

    }

    .form-all {

    width: 100% !important;

    }

    In my CSS code, I'm telling the browser that the width of the element .jotform-form should be 90% of the viewport width of the device viewing the form or website. Then the margin left and right is set to auto which will center the whole form. You can also adjust the 90vw with what you prefer.

    Where in this code:

    #cid_1 {

    text-align: center !important;

    }

    Simply aligns the positioning of the product fields. 

    Here's my cloned form: https://form.jotformpro.com/70953116620956. You can clone it and see if it works on your website. My form has the combination of CSS codes I mentioned above. 

    For the cleanup of your CSS, I suggest you clone your form. Then on your clone form you can edit the CSS code using the Advanced Form Designer Tool. You can experiment with the clone form without breaking your main form. You can try removing the repeated codes and fixing some of the @media rules that were not properly setup or were repeatedly added. 

    I hope that helps.