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

  • ralfredo
    Asked 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 

  • KadeJM
    Replied 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

  • ralfredo
    Replied on December 27, 2016 at 4: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]
    ...
  • Elton Support Team Lead
    Replied 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.

  • ralfredo
    Replied on December 28, 2016 at 9: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]
    ...
  • emily
    Replied 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" onDISABLEDload="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.

  • ralfredo
    Replied 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]
    ...
  • Boris
    Replied 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.