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

    Is there a way to make 2 columns instead of 1 and then drop to one for mobile?

    Asked by ralfredo on December 27, 2016 at 11:11 AM

    I am trying to make the form 2 columns on desktop so it isn't so long and then drop down to one column with mobile.

     

    I tried using the source code of my form, but I lost style and also javascript functionality and even lost the functionality of the Date picker box. 

     

    To see page click first link below... Then click the second.

     

    https://www.svsound.com/?preview_theme_id=159564748 

    https://www.svsound.com/pages/us-dealers 

    Page URL:
    https://www.svsound.com/?preview_theme_id=159564748

  • Profile Image

    Answered by KadeJM on December 27, 2016 at 11:19 AM

    If I understand you correctly it seems to me that you want a dynamically styled form that shows up on desktop as two columns but changes to one column when viewed on mobile so that it is responsive on mobile, correct?

    It's possible to create a two-column layout with your form and shrunken fields. Please see the very last section here https://www.jotform.com/help/75-Customize-Your-Form-Using-Custom-CSS-Codes.

    Also, once you are done with that you can try making form mobile responsive

  • Profile Image

    Answered by ralfredo on December 27, 2016 at 04:45 PM
    Thank you! Any reason when I grab the source and stick it on the page that I lose all styling, date picker functionality, and also lose the ability to show errors right on the page. Instead they show up in another tab telling me to go back and fix the form.
    Ryan Alfredo
    E-commerce Web Developer
    SVS | Specialty Technologies
    330.301.3747 (mobile)
    ryana@svsound.com
    www.svsound.com
    [SVSlogo]
    ...
  • Profile Image
    JotForm Support

    Answered by EltonCris on December 27, 2016 at 10:29 PM

    Hi Ryan,

    Is it the form on this page you're referring https://www.svsound.com/pages/us-dealers?

    It seems displayed properly, the same when you view the standalone form URL.

    If you're having issues with the default embed code, you can try the iframe embed code. This might help.

  • Profile Image

    Answered by ralfredo on December 28, 2016 at 09:45 AM
    That page you have there is for the version I have embedded. This version works great.
    Here is a link to the other page I have it on which I am trying to use the source code for. There are some javascript errors happening in the console as well. But the date picker and inline javascript error messages are not working. Click first link to activate theme. Then click second link to go to the page.
    https://www.svsound.com/?preview_theme_id=159564748
    https://www.svsound.com/pages/international-dealers
    Ryan Alfredo
    E-commerce Web Developer
    SVS | Specialty Technologies
    330.301.3747 (mobile)
    ryana@svsound.com
    www.svsound.com
    [SVSlogo]
    ...
  • Profile Image
    JotForm Support

    Answered by emily on December 28, 2016 at 10:12 AM

    Hi Ryan,

    Kindly embed the iFrame code below to your website. This might provide a solution to the problem that has been arised from javascript conflict

    <iframe id="JotFormIFrame-62994344499171" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.com/62994344499171" frameborder="0" style="width:100%; height:540px; border:none;" scrolling="no"> </iframe>

    Hope this helps. Kindly try this solution and see if it works for you. If the problem still persists, let us know.

    https://www.jotform.com/help/148-Getting-the-form-iFrame-code 

    Waiting for your reply.

    Thank you.

  • Profile Image

    Answered by ralfredo on December 28, 2016 at 10:45 AM
    Thank you but I’d rather not use an I-Frame as I cannot put analytics on anything to track. That’s why using the source makes a lot of sense in my case. I am not able to target anything in the I-Frame from my site.
    Ryan Alfredo
    E-commerce Web Developer
    SVS | Specialty Technologies
    330.301.3747 (mobile)
    ryana@svsound.com
    www.svsound.com
    [SVSlogo]
    ...
  • Profile Image

    Answered by Boris on December 28, 2016 at 11:45 AM

    For any scripting conflicts when using the source code version of your form, I'm afraid it is up to your web developer to code the remaining of the site in a way so that it doesn't conflict with the scripts of the form.

    For example, if jQuery is being used on your site, your site must use it in its noConflict mode:

    https://api.jquery.com/jquery.noconflict/

    The easiest way to prevent the conflicts is to simply use your form's iFrame embed codes. If you still want to use the source code for its power to extend it with your own custom functionality, you will also need to resolve any scripting conflicts on your end.

    If you were not aware, you can utilize tracking directly within your form even in iFrame embed mode, either by using one of our tracking and analytics widgets, or by using our very own Form Analytics feature:

    https://www.jotform.com/blog/150-Introducing-Form-Analytics

    https://widgets.jotform.com/search/analytics

    https://www.jotform.com/help/252-How-to-Add-a-Widget-to-your-Form

    Thank you.