Creating horizontal forms

hannahlincoln · April 13, 2018, 7:25am

Hi,

I was wondering if you are able to tell me how to make a form be horizontal?
it’s an ajax form here https://itassolutions.co.uk/test-comm-form/

Thank you

paul.r · April 13, 2018, 7:48am

Hi,

To make the form horizontal, you can add this in Theme Options > CSS

#gm_form_53 >div {
   display:inline-block;
}

Hope this helps.

hannahlincoln · April 13, 2018, 8:43am

Thank you so much, that almost worked!

Is it possible to have the submit button alongside the phone field and at the same height as the fields too?

Thank you!

basanta · April 13, 2018, 10:47am

Hi There,

For that you have to re order the privacy policy text and the button, so that you can make it inline with the phone field.

For the heaight of the button you can use this CSS.

.e15819-4  input[type="submit"] {
  padding: 15px 20px !important;
}

Hope this helps!

Thanks

hannahlincoln · April 13, 2018, 12:34pm

Thank you very much!

Few questions if you don’t mind…

I’ve adjusted the height of the button but now its not level with the field if that makes sense, its slightly lower, how can I fix this?
Can I adjust the spacing between the phone field and the button?
This is a silly question, but I want to learn so I have to ask you guys less annoying questions! When you’ve both kindly provided me the CSS codes today how do you make the code target this particular form? I think its the beginning of each code that follows the . but I wondered where you get that information from?

Hope this all makes sense.

Thank you again!

hannahlincoln · April 13, 2018, 12:37pm

Back again! I’ve solved number 2. However i’ve been met with more issues…

After we were doing so well with the form, I decided to add it to the new footer being built on our test site which you can find here https://test2.itassolutions.co.uk/

I’ve kept the original one in above the one we’ve created to try and get it as similar as possible. However the css code (I’ve pasted below) does not work on the test site but does work on the original site. Have I done something wrong?

.e15819-4 input[type=“submit”] {
padding: 15px 20px !important;
}

basanta · April 13, 2018, 2:05pm

Hi There,

For your question number 1, here is an updated CSS for you.

#gm_form_53 >div {
   display:inline-block;
   vertical-align: top;
}
.e15819-4  input[type="submit"] {
  padding: 4px 20px !important;
}

I have given you the combined CSS of @paul.r and mine. Please replace this.

For the footer question when you move the section the parent element class changed so the CSS won’t work.

I can see you have already added CSS for the footer form, here is an updated one.



.e15963-15 input[type="submit"] {
    padding: 18px 20px !important;
    background-color: #e0004d !important;
    margin-left: 5px;
    font-size: 12pt;
}

Hope this helps!

Thanks

hannahlincoln · April 13, 2018, 3:00pm

Thank you so much.

This is hopefully my last question now… I’m sorry!!

Can I get the fields the same height as the button as it currently is?

Can I also have the form fitting the whole container? so like the one above where it goes all the way across so it lines up with the text below it?

Thank you, you guys are the best!

jade · April 15, 2018, 8:48am

Hi there,

This should do it:

#gm_form_53 > div:nth-child(1),
#gm_form_53 > div:nth-child(3) {
    display: none;
}

#gm_form_53 > div:nth-child(2), 
#gm_form_53 > div:nth-child(4), 
#gm_form_53 > div:nth-child(6) {
    width: 28%;
}

#gm_form_53 > div:nth-child(7) {
    position: relative;
    top: -5px;
    width: 12%;
}

#gm_form_53 > div:nth-child(2) input, 
#gm_form_53 > div:nth-child(4) input, 
#gm_form_53 > div:nth-child(6) input {
    width: 100%;
}

But please note that since this is a custom code specific to your form setup. You might need to edit the code further in case you require some more changes.

You can find more info on how to check for CSS selectors here.
Then information about writing your custom CSS here.

Hope this helps.

hannahlincoln · April 16, 2018, 7:10am

Thank you Jade.

The forms fields heights need to match the button but they seem to be giant at the moment.
Also, the margin between the fields and button are all different, sorry but I’ve tried to play around with it but can’t seem to amend it. I’ve attached a screenshot so you can see what I mean.

Thanks for everything you’ve all done, so far.

paul.r · April 16, 2018, 9:07am

Hi,

Please replace code provided above with this.

#gm_form_53 div:empty {
    dispaly:none;
}
#gm_form_53 > div:nth-child(1),
#gm_form_53 > div:nth-child(3) {
    display: none;
}

#gm_form_53 > div:nth-child(2), 
#gm_form_53 > div:nth-child(4), 
#gm_form_53 > div:nth-child(6) {
    width: 28%;
     float:left;
     margin-right:5px;
}

#gm_form_53 > div:nth-child(7) {
    position: relative;
    top: -5px;
    width: 12%;
}

#gm_form_53 > div:nth-child(2) input, 
#gm_form_53 > div:nth-child(4) input, 
#gm_form_53 > div:nth-child(6) input {
    width: 100%;
}

#gm_form_53  input[type="submit"] {
     margin-left:0;
}

Hope that helps.

hannahlincoln · April 16, 2018, 9:24am

Hi,

That didn’t seem to make a difference to the height of the fields.

Thanks

basanta · April 16, 2018, 10:23am

Hi There,

For the height you need to use this CSS.

select,  input[type="text"], 
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"], 
input[type="time"], input[type="week"], 
input[type="number"], input[type="email"], 
input[type="url"], input[type="search"], input[type="tel"], 
input[type="color"], 
.uneditable-input {
 height: 2.6em
}

Hope this helps!

Thanks

hannahlincoln · April 16, 2018, 10:39am

That worked thank you!

However, now the button background colour has changed and won’t go back to being pink?

jumar · April 16, 2018, 12:45pm

Hello there,

I’ve checked your CSS and saw lines of code that produced warnings.

Bug - necessary lines of code that makes the form list unfunctional:

body .gform_wrapper form .gform_body ul,02body .gform_wrapper form .gform_body ul li {
	03list-style-type: none !important;
	04list-style-image: none !important;
	05list-style: none !important;
	06background-image: none !important;
	0708padding: 0 !important;
	09margin: 0 !important;
	10border: none !important11
}
12body .gform_wrapper form .gform_body ul > li:before {
	13content: "";
}

Bug - Line with a wrong CSS selector for font color and hex value for background:

.tp-button{
	background-color:25a9dc !important;
	display:inline-block;
	height:auto;
	width:auto;
	left: 100px;
	top: 60px;
	font-color: #25a9dc; /* wrong selector for font color */
}

You can fix this by finding these lines in Pro > Theme Options > CSS and replacing it with this code:

Solution - Unecessary lines of code that makes the form list unfunctional:

body .gform_wrapper form .gform_body ul,body .gform_wrapper form .gform_body ul li {
	list-style-type: none !important;
	list-style-image: none !important;
	list-style: none !important;
	background-image: none !important;
	padding: 5px;
	margin: 0 !important;
}
body .gform_wrapper form .gform_body ul > li:before {
	content: "";
}

Solution - Line with a wrong CSS selector for font color and hex value for background:

 .tp-button{
    	background-color: #25a9dc !important;
    	display:inline-block;
    	height:auto;
    	width:auto;
    	left: 100px;
    	top: 60px;
    	color: #25a9dc; /* correct selector for font color */
    }

Notes can be seen in between each line of code with /**/.

Then for the pink background color of your button, add this code:

.e15819-4 input[type="submit"] {
    margin-top: -7px;
    background-color: rgb(224,0,77);
    padding: 5px 20px !important;
}

Hope this helps.

hannahlincoln · April 16, 2018, 2:42pm

Hi

Thank you so much for such a thorough response!

I did everything you said above however still no pink button

Thanks

rad · April 16, 2018, 4:30pm

Hi there,

You have existing CSS that change it to black and it’s not included in the recommended CSS.

.x-btn, .button, [type="submit"] {
    color: #ffffff;
    border-color: hsla(220,100%,34%,0);
    background-color: #403152;
    text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5);
    border-radius: 0.25em;
    padding: 0.579em 1.105em 0.842em;
    font-size: 19px;
}

You may need to add this as well, or change the above CSS.

.x-btn, .button, [type="submit"] {
    background-color: rgb(224,0,77);
}

Thanks!

hannahlincoln · April 17, 2018, 7:51am

Thank you!

One final thing, I’ve tried adjusting the bottom padding of the button so it lines up with the fields but it doesn’t seem to be changing.

Thanks

thai · April 17, 2018, 12:58pm

Hey There,

Please also add this custom CSS:

#gm_form_53 input[type="submit"] {
    margin-left: 0;
    height: 42.84px;
    border: none;
}

Hope it helps

hannahlincoln · April 25, 2018, 8:30am

Apologies I’m back again!

You’ve all been amazing help so far, hoping you can help with one final thing!

https://test2.itassolutions.co.uk/ my horizontal form in the footer, is there a way to make it mobile optimised, so the form fields and button stacks up for tablet/mobile maybe?

Many thanks