How can I create a form with a picture on the left and move the form fields?

  • Profile Image
    cloudyzebra
    Asked 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.

  • Profile Image
    Jan
    Answered 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
    cloudyzebra
    Answered 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
    cloudyzebra
    Answered 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
    liyam
    Answered 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.