Styling my new form

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

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;

}

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
...

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

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

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.

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.

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.