What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Make form mobile responsive

    Asked by milladesignmaccom on April 04, 2017 at 06: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"

          onload="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>

    Page URL:
    http://elisabethtalen.no/bestillingskjema.html#bestilling-privat

  • Profile Image

    Answered by Sven on April 04, 2017 at 07: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.

  • Profile Image

    Answered by milladesignmaccom on April 04, 2017 at 08: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 ...

  • Profile Image
    JotForm Support

    Answered by ashwin_d on April 04, 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!

  • Profile Image

    Answered by Camilla Jakobsen  on April 04, 2017 at 11:29 AM

    Yes thats right

  • Profile Image
    JotForm Support

    Answered by BJoanna on April 04, 2017 at 01: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.

    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. 

  • Profile Image

    Answered by milladesignmaccom on April 05, 2017 at 01: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.
  • Profile Image
    JotForm Support

    Answered by ashwin_d on April 05, 2017 at 03: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:

     

    Thank you!

  • Profile Image

    Answered by milladesignmaccom on April 05, 2017 at 03:21 AM

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

  • Profile Image
    JotForm Support

    Answered by Charlie on April 05, 2017 at 06:10 AM

    Hi,

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

     

    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: 

     

    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. 

  • Profile Image

    Answered by milladesignmaccom on April 05, 2017 at 06: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...

  • Profile Image
    JotForm Support

    Answered by Mike_G on April 05, 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:

    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:

    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.

  • Profile Image

    Answered by milladesignmaccom on April 05, 2017 at 04:26 PM

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

  • Profile Image
    JotForm Support

    Answered by BDAVID on April 05, 2017 at 07: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:

    Let us know if you need more help.

  • Profile Image

    Answered by milladesignmaccom on April 06, 2017 at 01: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.

  • Profile Image
    JotForm Support

    Answered by Charlie on April 06, 2017 at 04: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. 

  • Profile Image

    Answered by milladesignmaccom on April 06, 2017 at 04: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

  • Profile Image
    JotForm Support

    Answered by Charlie on April 06, 2017 at 06: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. 

     

    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.