Form width is not correct after editing in Form Designer

  • Profile Image
    JoMarVisions
    Asked on October 28, 2014 at 04:01 PM

    I made some changes to the form and ever since i got on the form designer, the width is all messed up. Shows up fine on the main preview but when using the direct link, it's not showing it properly at all.

    Can you please help? Not sure what to do. I tried everything. I think there's a glitch somewhere.

    Here is the link and how it looks. http://form.jotform.us/form/40565720247150?

    I'd like to use the direct link instead of embedding the form but it's not showing correctly. Any help I would really appreciate it.


    Jo

  • Profile Image
    Ben
    Answered on October 28, 2014 at 05:42 PM

    Hi Jo,

    I see what you mean. Can you tell me if this is how you wanted it to look like?

    http://form.jotformpro.com/form/43006236366955

    If it is, you can clone it to your account How to Clone an Existing Form from a URL

    or you can just inject this CSS code to your account:

    .supernova  div.form-all{
      width:290px;
    }
    .form-checkbox-item > input {
        width: 10px;
    }
    label.form-label.form-label-left.form-label-auto, div.form-input > input.form-upload {
        width: 218px !important;
    }
    div.form-buttons-wrapper > button.form-submit-button {
        border-radius: 8px;
        box-shadow: 0 1px #fff inset, 0 1px #ddd;
        padding: 0;
    }
    div.form-header-group {
        margin: 0 0 0 10px;
    }

    Do let us know how it goes and if you have any further questions.

    Best Regards,
    Ben

  • Profile Image
    JoMarVisions
    Answered on October 29, 2014 at 06:27 PM

    Hi Ben! I substituted what was on the CSS code. Now the form is all purple no limits which is fine, but the title appears in a white box instead of the purple background. Not sure how to fix that. I tried.

    Thanks,
    Jo

  • Profile Image
    Welvin
    Answered on October 29, 2014 at 07:30 PM

    Hi Jo,

    You shouldn't remove the existing codes and just add the ones given by my colleague. Anyway, you can just grab and clone back this form: http://form.jotformpro.com/form/43006236366955 by following this guide: http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL.

    Thank you!