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 can I create a form with a picture on the left and move the form fields?

    Asked by cloudyzebra on September 26, 2016 at 02:32 PM

    I have tried to move the padding of the form questions but that messes with the lay out completely. Is there a way with JotForm to make a form similar to this? I want this but with a different picture and the social sites aren't needed. I tried to clone the form but it isn't a form on the website I see this on, it's a jpeg but the form is there.

    Screenshot
    create a form picture create move
  • Profile Image
    JotForm Support

    Answered by Jan on September 26, 2016 at 04:44 PM

    You can insert this custom CSS code to achieve that:

    .jotform-form {
    margin-left: 35% !important;
    padding-top: 90px !important;
    }

    .form-all {
    width: 560px !important;
    }

    Here's a guide on How-to-Inject-Custom-CSS-Codes. Here's the result:

    Hope that helps. Let us know if you need further help. Thank you.

  • Profile Image

    Answered by cloudyzebra on September 26, 2016 at 05:17 PM

    Thank you that is a big help! Now using what you have provided I have made some alterations. Problem now is it looks how I want it in the "Form Builder" but when I embed it on my site it isn't like the preview. AM I missing something?

    Form Builder:

    Embed on site looks like:

     

     

  • Profile Image

    Answered by cloudyzebra on September 26, 2016 at 05:20 PM

    I'm sorry I am only referring to the image and form fields, the button color is set to rose on purpose and I also understand powered by jetform will be on embed and no in building mode.

  • Profile Image
    JotForm Support

    Answered by liyam on September 26, 2016 at 08:57 PM

    Hello,

    It looks like you were able to resolve the issue already.

    But may I recommend also to remove the box shadow within the form to make it look like the image is together with the form. You can add this CSS code in order to achieve this:

    .supernova .form-all {
        box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;

        -webkit-box-shadow : 0 0 0 rgba(0, 0, 0, 0) !important;
        -moz-box-shadow : 0 0 0 rgba(0, 0, 0, 0) !important;
    }

    Feel free to let us know if you have questions.

    Thanks.