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

    Styling my new form

    Asked by heatsource on June 02, 2014 at 06:58 PM

    Hi 

    I've just set up a new form but would like to change 3 elements and wonder if you can help.

    The form is the LMB one and can be viewed here

    http://thelondonmortgagebrokersltd.businesscatalyst.com/contact-us.html

     

    1. I would like the form to be in two columns - so Enter your message should move next to the Name column with the Captura and Submit button stacked underneath

    2. For the error message/colour can we just keep this to the text chnaging to red rather thahn the big red block?

    3. I would just like to use a flat rextangle for the submit button using hex 63869A

    I really need to get these updates done tonight/ first thing tomorrow so nay help  would be great

    Cheers Paul

    Page URL:
    http://thelondonmortgagebrokersltd.businesscatalyst.com/contact-us.htm<br/>l

    new form two columns submit color form background
  • Profile Image
    JotForm Designer

    Answered by egeg on June 02, 2014 at 09:00 PM

    Hi Paul,

    1)  I see that you already figured out how to shrink fields, unfortunately CSS is a bit limiting on this matter. I managed to make it happen with some inject CSS and shifting around the places of the fields but it may turn out to be a bit difficult for you to recreate.

    However, the easiest way for you to make it happen is to clone this form I created:

    http://form.jotformeu.com/form/41527515793359?

    How to clone a form from url

    Cloning this will include the fixes for 2 and 3 as well.

     

    1 & 2 & 3 ) You can use the Inject CSS functionality. More info on how to inject CSS.

    Copy and paste the CSS below and it should do the trick. 




    Inject CSS:

    .form-line-error {

    background:transparent;

    }


    .form-submit-button {

    background:#63869a;

    color:#ffffff;

    text-shadow: none;

    border: none;

    margin-right:125px;

    -moz-border-radius:0;

    -webkit-border-radius:0;

    border-radius:0;

    -moz-box-shadow:none;

    -webkit-box-shadow:none;

    box-shadow:none; 


    #id_3,

    #id_4,

    #id_9 {

    float:right;

    }

  • Profile Image

    Answered by heatsource on June 03, 2014 at 03:21 AM
    Hi,
    The is great but the submit button does not seem to have changed colour. Also is there anyway to turn off the red bars for errors and just have the test turn red.
    Cheers Paul
    Date: Mon, 2 Jun 2014 21:00:39 -0400
    To: trowbi1kinobe@hotmail.com
    Subject: Re: Styling my new form
    ...
  • Profile Image
    JotForm Support

    Answered by Welvin on June 03, 2014 at 05:18 AM

    Hi Paul,

    What part in the submit you want to change its color? The background or the submit button text?

    Also, let us know if the example form given by my colleague is the right layout: www.jotformeu.com/form/41527515793359

    For hiding the required field error message, you can inject the following custom CSS codes:

    .form-line-error .form-error-message { display: none; }


    Thanks

  • Profile Image
    JotForm Support

    Answered by Welvin on June 03, 2014 at 05:43 AM

    Also, please check this form: http://www.jotformpro.com/form/41532230740947. If this is your desired style, then you can simply clone and use it by following this guide: http://www.jotform.com/help/42-How-to-clone-an-existing-form-from-a-URL

    The custom CSS codes here: http://pastiebin.com/538d98ac35d14

    Thanks

  • Profile Image

    Answered by heatsource on June 03, 2014 at 06:52 PM

    Hi this works fine but i get a bug. if i don't fill in the boxes and click submit the submit box slides to the left.

    One other minor thing i would like the heading text to stay white if there is an error. at the moment it turns black
    cheers Paul
  • Profile Image

    Answered by bob on June 03, 2014 at 10:09 PM

    Part#1

    I think you just checked the first form what Welvin suggested. I could reproduce the problem as you said for this form that means this form did slide to the left at my end too . Perhaps you didn't check the  second form re-suggested by Welvin where it doesn't create any problem of sliding to left/right. So it seems not to be a bug as you addressed for the  problem.

    Part#2

    I've made the heading text or label text to stay white in case of any error just by injecting a custom css code:

    .form-line-error {
    color:#FFFFFF
    }

    Please check the form below after cloning and editing Welvin's 2nd one.

    http://form.jotformpro.com/form/41538427783968

    Please get back to us with updates about your query.

    Thank You.

  • Profile Image

    Answered by heatsource on June 05, 2014 at 03:03 PM
    Hi if i duplicate the form and copy the code the alignment all overlaps. All i want to do is to stop the submit button moving when pressed.Any help with this please. The form is also wrapping on some browsers. I want it locked please
    Cheers Paul
  • Profile Image
    JotForm Support

    Answered by Mike_T on June 05, 2014 at 04:16 PM

    To solve the issue with submit button, please replace your current form CSS with the following code:

    .form-line-error
    .form-error-message {
    display: none;
    }
    .form-submit-button {
    border: 1px solid #63869A !important;
    border-radius: 0;
    font-weight: bold!important;
    height: 35px !important;
    width: 180px !important;
    background: #63869A !important;
    font-size: 14px;
    text-shadow: none;
    box-shadow: none;
    color: #fff;
    }
    .form-line-error {
    background: transparent;
    color:#FFFFFF;
    }
    .form-button-error {
    display: none;
    }

    We would like to recommend you to open a new thread about the wrapping issue. Please provide us with information about affected browsers on the new thread.

    Thank you.