How do I reposition the whole form?

  • Profile Image
    swadams3
    Asked on March 27, 2021 at 10:17 PM

    How do I reposition the whole form?



    This is a re-post of a comment on Side by side form field positioning

  • Profile Image
    Mike_G
    Answered on March 28, 2021 at 06:11 AM

    We will be glad to help you position the fields on your form. However, in order for us to do so, we may need you to provide us the details of your requirements and the form you are currently working on.

    We will wait for your response.

  • Profile Image
    swadams3
    Answered on March 29, 2021 at 12:56 PM

    The form is at:

    The Easiest Online Form Builder | JotForm

    I don't have any form elements on the page yet, just a background image. I need the form to be below the text and the computer icon.

  • Profile Image
    jonathan
    Answered on March 29, 2021 at 06:46 PM

    I suggest you add the form fields/elements first so that you can make the adjustments to position the fields in the form.

    Example:

    1617057966_606258ae37abe_zzz 2021-03-30

    You can inject the following custom CSS codes on your form after you add the fields/elements.

    .form-all{
      margin-top : 460px !important;
      
    }


  • Profile Image
    swadams3
    Answered on March 29, 2021 at 07:01 PM

    Thanks for the response. I'll give that a try.

  • Profile Image
    jonathan
    Answered on March 29, 2021 at 08:08 PM

    You can use the following link to update us anytime.

    https://www.jotform.com/answers/2998412

  • Profile Image
    swadams3
    Answered on March 29, 2021 at 09:41 PM

    While I was editing the form, I suddenly got the error "Form not found. This form is disabled." I clicked the "Enable" option, but it never finished. It got stuck on "Working". Since I hadn't done much to the form yet, I deleted it and tried to make a new one, only to get a 404 error after choosing "Classic Form".

  • Profile Image
    gerardw
    Answered on March 30, 2021 at 06:04 AM

    We apologize for this inconvenience.

    It seems that your account was auto-suspended by our phishing detector tool.

    I have activated your account now.

  • Profile Image
    swadams3
    Answered on March 30, 2021 at 12:53 PM

    I was working on a password text field when this happened. Does the word "password" trigger the phishing detector tool?

  • Profile Image
    swadams3
    Answered on March 30, 2021 at 02:28 PM

    Now I've recreated the form, and used the CSS you said to inject, but the previews don't look right. In the tablet version, the text fields shift left. In the mobile version, it doesn't scale to the screen size and the text fields shift right and up. What should I do?

  • Profile Image
    Mike_G
    Answered on March 30, 2021 at 06:50 PM

    Please allow me some time to check the issue you are having on my end. I'll get back to you on this ticket with my findings and/or solution as soon as possible.

  • Profile Image
    Mike_G
    Answered on March 30, 2021 at 07:47 PM

    I have checked the only form that is active in your account and here's what I see when I checked it on a screen similar to a tablet.

    1617146456_6063b258330e3_zt210330_191113

    Just to make sure we clearly understand your requirements, may we ask if you want to have the entire field, including the label, to be placed at the center of the page?

    1617146839_6063b3d79cd7b_zt210330_192146

    Or, you only want the input boxes to be centered?

    1617146879_6063b3ffcd3f5_zt210330_192500

    We will wait for your response.

    We will wait for your response.

  • Profile Image
    swadams3
    Answered on March 30, 2021 at 08:47 PM

    I want the input boxes to be centered.

  • Profile Image
    Mike_G
    Answered on March 30, 2021 at 10:18 PM

    Thank you for confirming.

    Kindly inject the custom CSS codes below into your form.

    @media screen and (min-width: 768px) {
    #label_3, #label_4 {
        width: 37% !important;
    }
    #cid_3, #cid_4 {
        width: 61% !important;
    }
    }

    The codes should fix the alignment of the fields on your form when your form is being viewed on a tablet.

    Please give it a try and let us know if you need any further assistance.

  • Profile Image
    swadams3
    Answered on March 30, 2021 at 10:32 PM

    That fixed the tablet problem, but it still doesn't scale for the mobile version in spite of the "meta viewport" tag, and that version still shifts the text fields up and right.

  • Profile Image
    gerardw
    Answered on March 31, 2021 at 11:40 AM

    Sorry for the delay.

    Please try this CSS code:

    @media screen and (max-width: 767px) and (min-width: 480px){

    #label_3, #label_4 {

      width: 37% !important;

    }

    #cid_3, #cid_4 {

      width: 61% !important;

    }

    }