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

    A couple of styling questions...

    Asked by heatsource on August 30, 2013 at 03:36 PM

    Hi,

    I have a couple of styling questions from my client. They are:


    Can we make sure that the field boxes all match the same size?

     

    Can we have Last Name box under first name box?

     

    Can we have the Submit button in pink? and clear button in a diffeent colour ( white)

     

    Any help would be great

     

    Cheers Paul

    Page URL:
    http://exceedallexpectations.org.uk/contact-us.html

    style size name font
  • Profile Image
    JotForm Support

    Answered by Mike_T on August 30, 2013 at 05:23 PM

    Thank you for contacting us.

    I have cloned your form and modified it a bit, so you can check it:

    http://form.jotformpro.com/form/32416304345951

    In case you would like to clone that modified form:

    How to clone an existing form from a URL

    - Full Name field was replaced with two Text Boxes, and these fields were set to 30 size (now the email field match the same size with other text inputs)

    - The following CSS was applied to the id of clear button in order to change the color

    #input_reset_14 {cursor: pointer;-moz-border-radius:.5em;
    -webkit-border-radius:.5em;
    border-radius:.5em;padding:8px 18px;color: #777777 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12px !important;
    font-weight: bold !important;
    text-shadow:1px 1px 0px #ffffff !important;border:1px solid #dcdcdc !important;-moz-box-shadow:inset 0px 1px 0px 0px #ffffff !important;
    -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff !important;
    box-shadow:inset 0px 1px 0px 0px #ffffff !important;background: #dfdfdf !important; /* old browsers */
    background: -moz-linear-gradient(top, #ededed 0%, #dfdfdf 100%) !important; /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#dfdfdf)) !important; /* webkit */
    background: linear-gradient(top, #ededed 0%, #dfdfdf 100%) !important; /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf', GradientType=0 ) !important; /* ie */
    }#input_reset_14:hover {
    border:1px solid #dcdcdc !important;
    background: #ebebeb !important; /* old browsers */
    background: -moz-linear-gradient(top, #fafafa 0%, #ebebeb 100%) !important; /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fafafa), color-stop(100%,#ebebeb)) !important; /* webkit */
    background: linear-gradient(top, #fafafa 0%, #ebebeb 100%) !important; /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafa', endColorstr='#ebebeb', GradientType=0 ) !important; /* ie */
    }#input_reset_14:active {
    border:1px solid #dcdcdc !important;
    position: relative !important;
    top: 1px !important;
    background: #ebebeb !important; /* old browsers */
    background: -moz-linear-gradient(top, #ebebeb 0%, #fafafa 100%) !important; /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ebebeb), color-stop(100%,#fafafa)) !important; /* webkit */
    background: linear-gradient(top, #ebebeb 0%, #fafafa 100%) !important; /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebebeb', endColorstr='#fafafa', GradientType=0 ) !important; /* ie */
    }

    Is this something that you can start with?

  • Profile Image

    Answered by heatsource on September 02, 2013 at 08:34 AM
    This is great,
    Can you make al of the boxes the same width so stretch out the phone one and reduce the comments one?
    Cheers Paul
    Date: Fri, 30 Aug 2013 17:23:35 -0400
    To: trowbi1kinobe@hotmail.com
    Subject: Re: A couple of styling questions...
  • Profile Image
    JotForm Support

    Answered by guilledutra on September 02, 2013 at 10:14 AM

    Hi,

    please check this version with your 2 last requests applied.

    http://form.jotformpro.com/form/32443835932962

    feel free to clone this form to your own use

    How to clone a form

    Hope it helps

    please let us know if you need further assistance

    thanks

  • Profile Image

    Answered by heatsource on September 02, 2013 at 10:16 AM
    Sorry can ALL of the bars be the same width :-)
    Date: Mon, 2 Sep 2013 10:14:16 -0400
    To: trowbi1kinobe@hotmail.com
    Subject: Re: A couple of styling questions...
  • Profile Image
    JotForm Support

    Answered by guilledutra on September 02, 2013 at 10:20 AM

    http://form.jotformpro.com/form/32443835932962

    Please check the form now.

    Thanks

  • Profile Image

    Answered by heatsource on September 02, 2013 at 10:22 AM
    They are still all not the same width
    Date: Mon, 2 Sep 2013 10:20:25 -0400
    To: trowbi1kinobe@hotmail.com
    Subject: Re: A couple of styling questions...
  • Profile Image
    JotForm Support

    Answered by abajan on September 02, 2013 at 12:18 PM

    @heatsource

    Please remove the Size setting of "30" from each text box, alter the last three rules in the injected CSS as follows and save the form:

    .form-textbox,
    .form-textarea {
    width: 250px;
    }

    #input_19_phone {
    display: inline-block;
    width: 168px;
    }

    #input_19_area {
    display: inline-block;
    width: 60px;
    }

    The result should look like this clone.

    If you need further help with this, we'd be happy to help.


    Thanks

  • Profile Image

    Answered by heatsource on September 28, 2013 at 07:42 AM
    Hi,
    One more thing on the form can we swap the 'clea'r and 'submit' buttons around on this
    Cheers Paul
    Date: Mon, 2 Sep 2013 12:18:29 -0400
    To: trowbi1kinobe@hotmail.com
    Subject: Re: A couple of styling questions...
  • Profile Image
    JotForm Support

    Answered by abajan on September 28, 2013 at 08:28 AM

    Hi Paul,

    Please amend the injected CSS as follows and let us know if any further adjustments are required:

    .form-line-error .form-error-message {
    background: #E1007A;
    color: #FFF;
    padding: 6px;
    margin-bottom: 3px;
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.3);
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
    }

    .form-line-active, .form-line-error {
    background: #FFF;
    }

    #input_14 {
    position: absolute;
    left: 165px;
    width: 90px;
    }

    #input_reset_14 {
    margin-left: -8px;
    width: 115px;
    }


    Thanks

  • Profile Image
    JotForm Support

    Answered by abajan on September 28, 2013 at 08:54 AM

    Actually, replace all of the injected CSS with this.

  • Profile Image
    JotForm Support

    Answered by abajan on September 28, 2013 at 08:56 AM

    The injected CSS of my clone has been updated to show the switched positions of the buttons.

  • Profile Image

    Answered by heatsource on September 28, 2013 at 10:24 AM
    Thanks!!
    Date: Sat, 28 Sep 2013 08:56:56 -0400
    To: trowbi1kinobe@hotmail.com
    Subject: Re: A couple of styling questions...
  • Profile Image

    Answered by heatsource on October 02, 2013 at 05:31 AM
    Hi,
    Thanks for your help with this i need to add the confirm/ clear button order/styling to the other forms. Which part of the code does this?
    Cheers Paul
  • Profile Image
    JotForm Support

    Answered by abajan on October 02, 2013 at 08:18 AM

    Hi Paul,

    This is the section of the CSS which does that. However, the number in the ID in the selector would differ from form to form. You would either have to view the form's source or use your browser's web developer tool to inspect the button to find out the appropriate ID to target.

    In Chrome, if you right-click either the Clear Form or Submit button and then click Inspect element,


    a pane will open in the bottom half of the browser with the line in the source which displays that element, highlighted:

    Here the Clear Form button is being inspected. Note that the number in the ID is 14. That's why the ID in the selector in all of the relevant rules contains 14 (#input_reset_14, #input_reset_14:hover, #input_reset_14:active). Both the Clear Form and Submit buttons are contained within the list item (li) whose ID is id_14. So, if the Submit button were to be inspected, you would see 14 there too (input_14). IDs in CSS selectors must be prepended with a hash. That's why it's #input_14 instead of just input_14 and #input_14_reset instead of just input_14_reset and so on.

    To apply the same styling to all of your form's submit and clear buttons, first click the submit button field and then Button Style in the toolbar at the top of the form builder:



    Then click the pink button:


    Click Finish and then add the rules to the form's injected CSS, taking care to change the number in the IDs as explained above. It's possible that in some cases, due to CSS precedence, the buttons may not look right after injecting the extra CSS. So, if you encounter any difficulties implementing the solution, please let us know.


    Cheers