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 change the layout of my form?

    Asked by ipbr21054 on March 08, 2017 at 07:35 AM

    Hi,

    Is it possible to use my form on this site but then use php of which you control.

    Did i explain that correctly ?

     

    Basically i have my own form & php but i am not always receiving the forms as i think my host is the problem.

     

    Please advise.

     

    Thanks very much.

  • Profile Image
    JotForm Support

    Answered by Nik_C on March 08, 2017 at 09:12 AM

    I'm not sure what exactly you are trying to achieve.

    There are certain ways where you can use PHP. 

    For example:

    - Webhooks: https://www.jotform.com/help/245-How-to-Setup-a-Webhook-with-JotForm

    - Post submission data to Thank you Page: https://www.jotform.com/help/51-How-to-Post-Submission-Data-to-Thank-You-Page

    - Sending your submissions to MYSQL database: https://www.jotform.com/help/126-How-to-send-Submissions-to-Your-MySQL-Database-Using-PHP

    Let us know if that helps or if you have any further questions.

    Thank you!

  • Profile Image

    Answered by ipbr21054 on March 08, 2017 at 09:43 AM

    Hi,

    This is my contact form that we have written etc

    http://www.theremotedoctor.co.uk/contact-form.html

     

    I think my host site"Site5" has problems with php because many forms do not enter my email inbox.

     

    Can i use my own form on your site or must i use your templates ?

  • Profile Image
    JotForm Support

    Answered by Nik_C on March 08, 2017 at 09:52 AM

    Thank you for additional information provided.

    You will have to create that form with our tools in order to use it. And you don't need to use any PHP, you will just create a new form with our Form Builder.

    You can check this guide on how to start: https://www.jotform.com/help/2-How-to-create-your-first-web-form

    If you need any assistance please let us know, our Support is 24/7.

    Thank you!

  • Profile Image

    Answered by ipbr21054 on March 08, 2017 at 09:58 AM

    To be honest i made this form with some help because your way of using the code was different and not easy.

    Some days i would check my form and the picture would be missing etc.

     

    This is why i decided to make my own form.

    Do you advise any way so i can get it to look like the link i sent you but with your builder as theis like i say is why i went my own way.

  • Profile Image
    JotForm Support

    Answered by Nik_C on March 08, 2017 at 11:26 AM

    You're referring to this form:

    It can be created with our Form Builder:

    Here is my test form: https://www.jotform.com/70664275965973 so feel free to check it.

    Fields can be adjusted of course and aligned. 

    I'm not sure about the code you used before, but this is one of the easy ways to do it.

    If I somehow misunderstood please let us know.

    Thank you!

  • Profile Image

    Answered by ipbr21054 on March 09, 2017 at 04:36 AM

    Morning,

    I dont find this form builder easy to use at all.

    Looking at my form 70671537117355 i am trying to get the fields aligned to the page like the WEB CONTACT FORM "blue one above"

    I find the builder so hard to navigate.

     

    I am trying without luck to center the fields equal to the page left / right.

    Center the field title center to its field below.

     

  • Profile Image
    JotForm Support

    Answered by Nik_C on March 09, 2017 at 09:23 AM

    Please check this guide, it's quite simple, I just changed the width of each field so they align properly:

    Here is my clone of your form https://form.jotform.com/70673691178971 feel free to check it out.

    And here is how it looks like:

    I understood that that is what you had in mind.

    If you need any further assistance please let us know.

    Thank you!

  • Profile Image

    Answered by ipbr21054 on March 09, 2017 at 12:01 PM

    Maybe i didnt explain correctly.

    Its the position on the text & text box below.

    See example below.

    All the text names as shown by Red Arrow needs to be centered to the text box below,so it will be where the Blue arrow is pointing.

     

    The right hand text boxes Black arrow need to be inline with the edge of the message box Green arrow.

     

     

  • Profile Image
    JotForm Support

    Answered by Nik_C on March 09, 2017 at 04:09 PM

    I understand.

    Here is the CSS Code for the left-hand side field labels:

    #label_4{

    margin-left:65px;

    }

    #label_6 {

    margin-left:75px

    }

    #label_8 {

    margin-left:30px

    }

    #label_10{

    margin-left:45px

    }

    You can copy and paste it in your Custom CSS Field. And here is code for the right-hand side alignment:

    #id_5, #id_7, #id_9,#id_13 {

    margin-left:75px;

    }

    Here is how it looks like:

     

    You can adjust more by changing the numbers in the code above.

    And I did those changes on the same form: https://form.jotform.com/70673691178971

    If you have any further questions please let us know.

    Thank you!

     

  • Profile Image

    Answered by ipbr21054 on March 09, 2017 at 04:32 PM

    Great 

     I will now need to also put the right side text Center to its text box. 

    How did you find out the name etc 

    labrl 10 ?

  • Profile Image
    JotForm Support

    Answered by Nik_C on March 10, 2017 at 03:25 AM

    Here is how to find the field ID so you can apply the CSS:

    And here is the CSS for the right-hand labels:

    #label_5{

    margin-left:65px;

    }

    #label_7{

      margin-left:30px;

    }

    #label_9{

      margin-left:50px;

    }

    #label_13 {

    margin-left:65px;

    }

    Here is how it looks like:

    And it is the same URL so you can check it out: https://form.jotform.com/70673691178971

    If you need further adjustments please let us know.

    Thank you!

  • Profile Image

    Answered by ipbr21054 on March 10, 2017 at 03:26 AM

    Morning,

    I have just switched on the pc but what i see on my screen is nothing like your example above.

  • Profile Image
    JotForm Support

    Answered by Nik_C on March 10, 2017 at 04:41 AM

    I see. In which Browser are you viewing the form? It could be related to screen resolution as well.

    Because I used fixed values for margins, it can happen that in smaller resolution fields will be disordered.

    If that's the case please let us know so we can try to adjust it further. By the way, the form is still showing fine for me in my Browser (I'm on Chrome).

    We'll wait for your response.

    Thank you!

  • Profile Image

    Answered by ipbr21054 on March 10, 2017 at 04:45 AM

    I am using windows 7 Chrome but also the same look on the iphone 6

     

    Yure example,the very first one was spot on & looked great apart from the right hand fields not in the correct place.

     

     It would need to be responsive

  • Profile Image
    JotForm Support

    Answered by Nik_C on March 10, 2017 at 08:20 AM

    You can use this code instead of the whole code above:

    #label_4{

    margin-left:25%;

    }

    #label_6 {

    margin-left:32%;

    }

     

    #label_8 {

    margin-left:14%;

    }

    #label_10{

    margin-left:17%;

    }

    #id_5, #id_7, #id_9,#id_13 {

    margin-left:10%;

    }

     

    #label_5{

    margin-left:26%;

    }

    #label_7{

      margin-left:15%;

    }

    #label_9{

      margin-left:22%;

    }

    #label_13 {

    margin-left:40%;

    }

    I replaced the px with percentage, it should work better when the screen size changes. 

    I added the Mobile responsive widget as well https://form.jotform.com/70673691178971.

    Please check how it works for you.

    Thank you!

  • Profile Image

    Answered by ipbr21054 on March 10, 2017 at 08:24 AM

    Im confused ?

    Have you now fixed it as looking at the link you supplied shows no change etc or was i supposed to do something ?

     

  • Profile Image

    Answered by ipbr21054 on March 10, 2017 at 08:31 AM

    This is what the layout should look like.

    Currently its all over the pace now.

    Look how the text is centered above the placeholder box.

    Look how the text & placeholder is saligned with each other & message box

  • Profile Image
    JotForm Support

    Answered by Kevin_G on March 10, 2017 at 12:09 PM

    To display the form like your screenshot you need to remove  all the CSS code you currently have in your form. 

    Then, this code will help you to display text centered: 

    .form-label, .form-label-top{

        text-align: center;

        margin-left: auto;

        margin-right: auto;

    }

     

    input, textarea{

        text-align: center !important;

    }

    And if you also need to remove the blue solid background color and show only the page background image you need to inject this code: 

    .form-all{

        background-color: transparent !important;

    }

     

    .supernova .form-all{

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

    }

    This guide will help you to inject the CSS code to your form: How-to-Inject-Custom-CSS-Codes

    Here's my cloned form of yours: https://form.jotformpro.com/70684839083972 

    Hope this helps. 

     

  • Profile Image

    Answered by ipbr21054 on March 10, 2017 at 12:21 PM

    tHIS FORM IS NEARLY THERE SEE 70674316705356

    The right hand text fields as shown by the red arrows nee3d to be aligned with the 2 green arrows,right hand edge of message box.

     

  • Profile Image
    JotForm Support

    Answered by Kevin_G on March 10, 2017 at 01:52 PM

    You could try injecting the following CSS code to your form: 

    .form-line:not([data-type="control_textarea"]):not([data-type="control_button"]){

        width: 50%;

        padding-right: 0px;

    }

     .form-col-2, .form-col-4, .form-col-6, .form-col-8{

        padding-right: 0px;

    }

    .form-col-2 .form-input-wide, .form-col-4 .form-input-wide, .form-col-6 .form-input-wide, .form-col-8 .form-input-wide{

        margin-left: 5%;

    }

    This should be the result: https://form.jotformpro.com/70685729281971 

  • Profile Image

    Answered by ipbr21054 on March 10, 2017 at 02:02 PM

    All the text titles MUST be centered to the placeholder box that they sit above

  • Profile Image
    JotForm Support

    Answered by Nik_C on March 10, 2017 at 05:31 PM

    Please change this:

    1) Change margin-left to 9%:

    2) Change drop-down width to 230px:

    And add this CSS code to align the left-hand-side:

    #label_4 {

        margin-right: 20%;

    }

    #label_6 {

        margin-right: 20%;

    }

    #label_8 {

        margin-right: 25%;

    }

    #label_10 {

        margin-right: 25%;

    }

    Let us know how it works.

    Thank you!

  • Profile Image

    Answered by ipbr21054 on March 11, 2017 at 04:53 AM

    I mentioned that i found this hard to navigate and so far weve been trying for days to get to where it needs to be.

    See here http://form.jotformeu.com/form/70674316705356

    Placeholders are correct.

    The BLACK text needs to be centered to its placeholder FIRST NAME LAST NAME etc etc

  • Profile Image
    JotForm Support

    Answered by Nik_C on March 11, 2017 at 06:22 AM

    The problem is that you want to customize the position of fields and its labels in the form, and that is not an issue unless the screen size is changed (i.e. mobile devices). So we didn't use the fixed width to adjust your form but a percentage. 

    And here is my last form with adjustments you needed: https://form.jotformpro.com/70686632262964

    Here is how it looks like on Desktop:

    And here is on mobile:

    You can adjust the width of fields more, if needed, to fit better on mobile. 

    When it comes to customizing the fields, like you need it, CSS must be used to achieve that. If you need to reposition certain labels or fields you can just increase/decrease the numbers for each label in the code provided above.