How can I add more space between the first field (First Name) and the top of the form?

  • Profile Image
    concrete5x5
    Asked on April 15, 2014 at 06:30 PM

    How can I add more (black) space between the first field (First Name) and the top of the form at http://netword2000.com/11.htm? Also can I change the pink color that fills each field when it says "This field is required." Not the red that "This field is required" is in, but the pink that fills each entire field. It just looks bad. Thank you.

  • Profile Image
    ashwin_d
    Answered on April 16, 2014 at 12:23 AM

    Hello concrete5x5,

    Also can I change the pink color that fills each field when it says "This field is required." Not the red that "This field is required" is in, but the pink that fills each entire field. It just looks bad.

    Please inject the following custom css in your form to remove the background color of validation erro:

    .form-line-error {

    background:none repeat scroll 0 0;

    }

     

    Please inject the following custom css to increase the top margin of your form which will add extra space before the first form field:

    .form-all {

    margin-top: 70px;

     

    }

    The following guide should help you inject this custom css code in your form:  http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Hope this helps.

    Do get back to us if you have any questions.

    Thank you!

  • Profile Image
    concrete5x5
    Answered on April 16, 2014 at 05:14 PM

    Thanks for your reply, however it didn't quite work. I injected the custom css to add extra space before the first form field, and that didn't work at all. Also, I injected the custom css in my form to remove the background color of validation error, which worked, but now you can't see what each field requires, such as First Name, Last Name, etc.

    Page URL:

    http://www.netword2000.com/11.htm

  • Profile Image
    EliezerN
    Answered on April 16, 2014 at 06:29 PM

    @concrete5x5

    To resolve the issue please inject this CSS code to your form:

    .form-line-error

    {

    color:#FCFCFC !important;

    }

    .form-section

    {

    margin-top: 20px !important;

    }

    Please inform us if the issue still persists.

    Thanks

  • Profile Image
    concrete5x5 
    Answered on April 16, 2014 at 08:10 PM

    Thanks again, however still not quite there. Now you can see each field, such as First Name, etc., but after injecting the custom css to add extra space before the first form field, it didn't work. 

    Page URL:

    http://www.netword2000.com/11.htm

  • Profile Image
    ashwin_d
    Answered on April 16, 2014 at 11:15 PM

    Hello,

    I did check your web page URL and found that the extra space is not added before the first form field. Upon taking a closer look at your web page, I found that you have added your form's full source code there. Is there any special requirement to do so? I was unable to find that you have added some custom code.

    The custom css code provided by my colleague above works fine and you need to increase the margin-top value to any desired value to increase the blank space:

    .form-section{

    margin-top: 20px !important;  /* Change to value of 20px to any desired value like 40px, 45px */

    }

    Hope this helps.

    Do get back to us if the issue persists.

    Thank you!