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

    Form looks different in WIX website

    Asked by momsbesty on May 20, 2015 at 08:33 PM

    Form looks great on the builder, but when inserted in the Wix HTML application box, it looks completely different. 

    Please help!

    Page URL:
    http://www.jotform.com//?formID=51396598280669

    Screenshot
    builder different in
  • Profile Image

    Answered by Syed on May 20, 2015 at 08:45 PM

    Hi there;

          Could you provide the web page link of your WIX Website, it will help us to look through the problem thoroughly. It may some iFrame issues, but without form actual page we can't do some tests. Looking forward to hearing from you.

     

    Thankyou,

  • Profile Image

    Answered by momsbesty on May 20, 2015 at 09:08 PM

    Thank you! 

     

    This is the Wix URL:

    http://valentina613.wix.com/valentina#!lifetime-product-guarantee/c21yz

  • Profile Image

    Answered by Syed on May 20, 2015 at 09:28 PM

    Hi there;

           Thankyou for the link of web page! I have checked the issue, could you please try to remove the following code block from "Preferences->Form Styles->Inject Custom CSS", which was forcing to change some text box styles, it is working fine now.

    http://www.jotformpro.com/form/51397951173967

    Code Block need to remove:

    @media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape) {

    .jotform-form {

    padding: 0;

    }

    .form-all {

    border: 0;

    width: 100%;

    max-width: initial;

    }

    .form-sub-label-container {

    width: 100%;

    margin: 0;

    }

    .form-input {

    width: 100%;

    }

    .form-label {

    width: 100%!important;

    }

    .form-line {

    padding: 2% 5%;

    -moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    }

    input[type=text],

    input[type=email],

    input[type=tel],

    textarea {

    width: 100%;

    -moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    max-width: initial !important;

    }

    .form-input,

    .form-input-wide,

    .form-textarea,

    .form-textbox,

    .form-dropdown {

    max-width: initial !important;

    }

    div.form-header-group {

    padding: 24px 0px !important;

    margin: 0 12px 2% !important;

    margin-left: 5% !important;

    margin-right: 5% !important;

    -moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    }

    [data-type="control_button"] {

    margin-bottom: 0 !important;

    }

    .form-buttons-wrapper {

    margin: 0!important;

    }

    .form-buttons-wrapper button {

    width: 100%;

    }

    table {

    width: 100%!important;

    max-width: initial !important;

    }

    table td + td {

    padding-left: 3%;

    }

    .form-checkbox-item input,

    .form-radio-item input {

    width: auto;

    }

    .form-collapse-table {

    margin: 0 5%;

    }

    }

    I hope this helps. Please let us know if you need further assistance, we would be happy to assist you.

     

    Thankyou,

  • Profile Image

    Answered by momsbesty on May 20, 2015 at 10:34 PM

    Sorry, it doesn't seem to be working at all. Even saved, tested it again, followed your instructions and it just looks terrible on the Wix site. How can I make it look just like it looks on the form builder?

  • Profile Image

    Answered by Syed on May 21, 2015 at 12:50 AM

    Hi there;

             Sorry for the delay, could so replace some CSS Code to work look like on form builder, please try to use the following code instead of old one. Review the following screenshot.

    @media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape) {

    .jotform-form {padding: 0;}

    .form-all {border: 0;width: 100%;max-width: initial;}

    .form-sub-label-container {width: 50%;margin: 0;}

    .form-input {}

    .form-label {}

    .form-line {padding: 2% 5%;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}

    input[type=text], input[type=email], input[type=tel], textarea {width: 100%;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;max-width: initial !important;}

    .form-input,.form-input-wide,.form-textarea,.form-textbox,.form-dropdown {max-width: initial !important;}

    div.form-header-group {padding: 24px 0px !important;margin: 0 12px 2% !important;margin-left: 5% !important;margin-right: 5% !important;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}

    [data-type="control_button"] {margin-bottom: 0 !important;}

    .form-buttons-wrapper {margin: 0!important;}

    .form-buttons-wrapper button {width: 100%;}

    table {width: 100%!important;max-width: initial !important;}

    table td + td {padding-left: 3%;}

    .form-checkbox-item input,.form-radio-item input {width: auto;}

    .form-collapse-table {margin: 0 5%;}

    }

    Let us know how it goes. We would be happy to assist you further.

     

    Thankyou,

  • Profile Image

    Answered by momsbesty on May 21, 2015 at 12:55 AM

    The code you are asking me to copy/paste is resetting my form. When I try to insert this new code, all of my form settings are wiped clean. The whole purpose is to keep the form looking the same way in the Wix editor and Jotform builder. I do not want to remove the design, I want to keep this design. 

    Is this issue not able to be fixed?

  • Profile Image

    Answered by momsbesty on May 21, 2015 at 12:56 AM

     

  • Profile Image

    Answered by momsbesty on May 21, 2015 at 12:58 AM

    Notice how the form looks very nice and neat in the Jotform builder? How can I use this form on Wix, and have it look exactly the same? When I place it into Wix, it looks very ugly. The CSS codes you have sent me, are not fixing this. The CSS codes are resetting my Jotform design. :[

  • Profile Image

    Answered by momsbesty on May 21, 2015 at 02:15 AM

    I believe I have found my own solution. Thank you for your time.