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

    How to right align the form embedded in a website?

    Asked by olgashik on November 01, 2016 at 03:01 PM
    I would like to reduce it so the form would be aligned more towards right side
    righ align website embedded form CSS style inject CSS
  • Profile Image
    JotForm Support

    Answered by Kiran on November 01, 2016 at 03:06 PM

    If you need move the form to the right on the web page, please change the CSS on your web page for the classes displayed as shown below:

    The form should be displaying as shown in the screenshot below after making the changes.

    Let us know if you are referring something different. We will be happy to help. 

  • Profile Image

    Answered by olgashik on November 02, 2016 at 10:03 AM

    Unfortunately your suggestion did not work. I now returned some visibility to the background so you could see yourself that the background is larger than the form, while I want to reduce it to the size of the form:

  • Profile Image
    JotForm Support

    Answered by Kiran on November 02, 2016 at 12:49 PM

    The adjustment mentioned above should be placing the form aligned top the navigation menu. The background should not be changing with the above changes. However, please inject the following CSS code to the form to make the form background transparent.

    .supernova {

        background: transparent;

    }

    Also, please try changing the CSS code of your website (not JotForm) as mentioned in my earlier post in this thread to align the form.

    Hope this information helps! 

  • Profile Image

    Answered by olgashik on November 03, 2016 at 05:52 AM

    Unfortunately this solution does not work.

    If i change table ratio into 60:40 the background does shrink to the size of the form. However, all labels jump above input fields again:

     

    If I change ratio to 59:41 I get background back:

  • Profile Image
    JotForm Support

    Answered by olivia on November 03, 2016 at 10:26 AM

    I have checked your form.

    Current view of your form is:

    If I understood you correctly, you want to remove upper background and move your form to the right like in the following image. 

    To do that, please inject the following CSS to your form:

    .supernova {

        background : transparent;

    }

    .form-all {

        margin-left : 50px;

    }

    If you need any other details about how to inject CSS, please follow this guide: How-to-Inject-Custom-CSS-Codes

    If you need any other support, please feel free to let us know.

    Thank you for your asking.

     

     

  • Profile Image

    Answered by olgashik on November 04, 2016 at 06:27 AM

    Guys

    I start feeling very frustrated here now. I keep asking the same question, you cut something out of my thread and create a new thread while the initial question disappears. I now try to resolve it for 4 days going in circles!!! Really frustrating!

    The last suggestion did not work!

    I have now ended up with adding following to my CSS under your recommendations:

    iframe#62874755377371 {

        border-radius: 20px;

    }

    .supernova {

        background: transparent;

    }

    .form-all {

        margin-left : 50px;

    }

     

    I STILL DID NOT GET WHAT I WAS ASKING ABOUT.  SO I START AGAIN.

    I can make background transparent, than you, and this is not my question. Currently I built a form which is 432px wide. However, the background is 517px wide. I cannot see any tools to reduce this background and I cannot remove it. If I make this background transparent I still end up with the form slightly shifted towards the center, while Im trying to align it right.

    So,  I do not want any advice on how to make this background transparent. I want it of the size of form I have created. Why is it bigger and why there is no control over it????

    Please help asap as I am running out of time now.

  • Profile Image
    JotForm Support

    Answered by Mike_G on November 04, 2016 at 09:26 AM

    Thank you for the clarification. However, when you embed your form to your website, it will be placed, normally, at the center of the div where it is placed. So in your website's case, it will be at the center of the td that has the class equal to .right.

    Now, since the form doesn't have the same size of the "right" td, it will just make the form at its center and that makes your form pushed to the center a little bit. You will notice that the size of the background is the size of the "right" td on your website.

    However, if you want to move the form on the right-most side of your website, then, you can use the CSS codes below.

    .supernova{

    float: right !important;

    }

    The codes above will move the form on the right side of the website, however, the background will remain in its original position. You can make the background transparent as suggested by my colleagues to get rid of it.

    .supernova{

    float: right !important;

    background: none !important;

    }

    I hope this helps. If you need any further assistance, please feel free to contact us anytime. Thank you.

  • Profile Image

    Answered by olgashik on November 04, 2016 at 11:57 AM

    this does not help:

  • Profile Image
    JotForm Support

    Answered by Kiran on November 04, 2016 at 02:26 PM

    We are sorry for the confusion. I understand that you want to remove the page background so that only form will be displayed. Could you check the form on your web page now. I have now added the following code to match the page background width to the form background since the page is already made transparent.

    .supernova {

    width: 434px;

    }

    Let us know if you are referring to something different. We will be happy to help.