How do I properly align forms items in a two-column form layout?

Hi Jonathan,

Sorry, I just posted the wrong link. The link is updated now (and it should clarify what I mean).

All the best

Anders

Anders

The solution to this probably lies in absolutely positioning some of the form's elements. We'll see what we can come up with.

Wayne

Would the format of this form be suitable?

Hello Wayne,

Thanks a lot for your help! Now the form elements align perfectly! The only thing I was wondering though is if it's possible to fill out the spacing under "Video style" and "Video Length". I'm curious if it could be quickly rearranged so all the static dropdown menus are to the left, in order to eliminate the spacing? Like this:http://cl.ly/3z2e160K3L21052r050P

That would mean having all the dynamic fields show up to the right, instead of below. It would also involve having the submit button aligned to the left border of the "invisible" dynamic fields.

Is this possible?

All the best

Anders, Denmark

Anders

The fields can be rearranged in the manner described but I can't say how quickly. Sometimes unexpected challenges reveal themselves while working on tasks that initially appear to be easy. So, hopefully this isn't too urgent. But I'll work on it today for you.

 

Wayne

Okay, how's this?

Unfortunately, I wasn't able to get the submit button alignment to be consistent across browsers.

Hi Wayne,

This is abolutely perfect! Thanks a lot - I really appreciate your help! I was very curious as to if this was even possible. I'll implement this is as soon as possible!

Regarding the button placement, it's seems to appear the same in FireFox, Chrome and Safari.

Thanks again!

All the best

Anders

Hi again,

I have finally insert the contact form on my webpage - http://barqvideo.com/contact/. Unfortunately the date picker that shows up under the field "What is your hoped for delivery date" (when selecting "A specific date" in the Deadline dropdown) is outside the contact form div.

A. How can I reposition the date picker so that it shows up above the field (it doesn't matter if it temporarily covers another field)?

There is also an alignment problem - I can't change seem to the distance between the two columns in the form, and I would like them to align with the two text columns above.

B. How can I do that?

All the best

Anders

Anders

When I looked at your page, the calendar pop-up still appeared to be off the screen and the fields were not aligned with the text above the form.

Please add the following rules to the form's current injected CSS and let us know if it helps:

.calendar.popup {
top: 355px !important;
}

.form-all {
margin-left: 7px;
}

#id_17, #id_24, #id_26 {
padding-left: 78px;
}

Wayne

Actually, now that things have been moved around, the submit button and the "Please complete all required fields." message that pops up when all the required fields have not been filled, could also do with some repositioning. I'll see what I can come up with later.

 

Hi Wayne and Jonathan,

 

Thanks, now the calendar has been moved up and the fields align to the text! 

 

The final things I'm trying to implement are these:

http://cl.ly/image/3L1p1d0P2J1P

 

• Phone Number field is a bit off (partially fixed)

• "Let's go" button should align to the right side of the left-column and be pushed up/left a bit to align horizontally with "what is your hoped delivery date".

• To change the width of the fields to better fill out the space

• To remove excessive white space.

• To get same padding in the form on the right side as I have on the left (by making the right column elements wider.

• The please complete all required fields message is off.

 

The screenshot shows what I'm trying to do. I've managed to fix the calendar position, and made the left side align of the phone number align with the other left columns, but the rest of the positioning I'm not sure of. Also I can't seem to change the size of the fields in Jotform.

UPDATE: Your fixes worked before but now suddenly they dont?

P.P.S. I had some problems making the form update. Changing the "form" to "www" in the URL fixed it, but I don't know if this is related.

All the best

 

Anders

Anders

There's a closing brace at the beginning of the injected CSS that is causing all sorts of problems. (Looks like including an extra brace is almost as bad as omitting one: See 15 Surefire Ways to Break Your CSS.) Plus, I forgot that there's a hidden phone field. So, I didn't include any declaration to reposition it.

I've had a look at your screenshot. Besides the phone field (whose ID is id_21, by the way, and not just 21, as you have in the last rule), let me make some other adjustments to the CSS and get back to you.

Wayne

Hi Wayne,

Any updates on this?

All the best

Anders

Hi Anders,

My apologies. I should have a solution for you sometime today.

Wayne

Hi again Anders

Surely, you must have thought that I had forgotten you! (I really need to stop making promises I can't keep.)

Anyway, the injected CSS below is the best I could come up with. Unfortunately, the results are not quite what you requested in your graphic:

Make right column elements wider so the form has the same padding on the right as it has on the left.

Done

 

Make left column fields longer so that they align with this line.

Done

 

Align phone number to the line

Done

 

Remove whitespace, so that the field spacing matches the Name/E-mail space.

Not practical, due to the presence of the Phone number field (or when hidden, the space it would occupy). The What video style do you have in mind? and What is your expected video length? fields are currently aligned and removing the whitespace to which you reffered would upset that alignment. If the said space were to be removed and the What is your expected video length? field were to be moved up to maintain the alignment when the Phone number field is hidden, the alignment would be offset when the Phone number field is revealed. Although inserting an empty spacer div (division) or image below the How should we get in touch with you? field and having it shown and hidden in concert with the Phone number field would solve the alignment issue, it wouldn't look good to have the What video style do you have in mind? and What is your expected video length? fields shift as the Phone number field is shown or hidden.

 

Align calendar to left column left side.

Done

 

Move "Let's Go" button up/left so it aligns

Did my best to get the alignment to be consistent across browsers with no luck. I was able to align the button with the left edge of the What is your budget? field in all browsers I've tested except Firefox. Also, alignment with the top of the What is your hoped for delivery date? label varies from browser to browser.

 

Here's what to do:

1. Replace all of your injected CSS with the following:

/*
Name: id_19
Inquiry: id_17
E-mail: id_16
How should we get in touch with you?: id_29
Phone number: id_21
What video style do you have in mind?: id_22
What is your expected video length: id_24
Link to video example: id_23
What is your deadline?: id_27
What is your budget: id_26
What is your hoped for delivery date?: id_28
Submit button: input_14
*/

.form-textbox, .form-textarea {
border: 1px solid #fff;
border-top: 1px solid #E4E4E4;
border-left: 1px solid #E4E4E4;
padding: 8px;
margin-bottom: 10px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}

input:focus, .form-textarea:focus {
border: 1px solid #1B71C2;
}

.form-section {
margin-left: 3px;
}

.form-required {
margin-left: 5px;
color: #00F;
}

.form-line-error {
background: none repeat scroll 0 0;
}

.form-error-message {
position: absolute !important;
top: 300px;
width: 208px;
}

.form-textbox {
width: 195px !important;
}

textarea {
width: 195px !important;
height: 89px !important;
}

#id_16, #id_21, #id_23,
#id_26, #id_27, #id_28,
#input_14 {
position: absolute;
}

#id_16 {
top: 70px;
left: 0;
}

#id_28 {
top: 394px;
left: 0;
}

#id_28 .form-textbox {
width: 37px !important;
}

#id_29 {
width: 260px;
padding-bottom: 27px;
}

.form-radio-item {
width: 100px !important;
}

#id_17, #id_24 {
margin-left: 20px;
}

#id_21 {
top: 148px;
left: 300px;
}

.form-multiple-column, select {
width: 260px !important;
}

/* Phone selector */
.form-multiple-column span
+ span + span {
position: absolute;
left: 212px;
}

#id_23 {
top: 273px;
left: 0;
}

#id_26 {
top: 340px;
left: 300px;
}

#id_27 {
top: 340px;
left: 0;
}

#input_14 {
top: 122px;
left: 307px;
}

.form-description {
min-width: 150px;
left: 290px !important;
}

.calendar.popup {
top: 355px !important;
left: 60px !important;
}

.form-all {
margin-left: 7px;
}

#input_19, #input_17, #input_16,
#input_21, #input_23 {
width: 242px !important;
}

2. Set the E-mail choice in the How should we get in touch with you? field to be selected by default and add a condition to hide the e-mail field when Phone is selected. 

When done, your form should look and function like this clone of it. Regarding the CSS, it would be best to retain its comments, so that whenever the need arises to alter some aspect of an element or elements, you'll know at a glance which rules to edit. (Incidentally, I noticed the absence of question marks and the end of What is your expected video length and What is your budget labels.)

Be sure to let us know if you need additional assistance with this.

Wayne

Hi Wayne,

Critical problem here :( - I hope you can look at it very quickly. The code completely messed up my form - see . Please check it out as soon as you can. I was stupid enough to copy your new code as a backup and overwriting my original code. So I don't have ANY backup. And I can't undo. How do I fix this?

UPDATE: I have temporarily replaced the form with an old form. The new messed up form is on "barqvideo.com/contact2".

Anders

Anders

While your form and my clone of it contain the same injected CSS, it appears that changes (in addition to the CSS) were made to one or both of our forms after I did the cloning. For one thing, our forms' widths don't match. Mine is 630px and yours is just 545px. I will go into your account and see what I can do. In the meantime, change the source (src) attribute of the form's iFrame in your page from http://form.jotformeu.com/form/21572166867361 to http://www.jotform.co/form/21986876279880 and let us know if it makes a difference.  

Wayne

Hang on!

Don't change the iFrame. I was able to (partly) correct the problem but the phone field isn't showing when phone is selected. Give me a few minutes to fix that.

Anders,

With the exception of IE6 and IE7, everything should be fine now. The condition wasn't showing the Phone number field because the label of the second radio button of the How should we get in touch with you? field was changed from "Phone" to "Phone (preferably)". I changed it back to just "Phone", changed the default selection in the said field from "E-mail" to "Phone", set the Phone number field to Required and made the requisite adjustments to the conditions.

The extra text in the "Phone (preferably)" label was affecting the alignment of the Phone number field (and possibly others). So, I substituted a text element which you will notice when the mouse is hovered over the How should we get in touch with you? field. You may change the text to your liking. If you don't like the hover box's position, it can be moved from the right of the field to above or below it. Just let me know and I'll provide the necessary CSS.

Wayne

P.S. Getting the form to display correctly in IE6 and IE7 could be tricky but I'll see what I can do to accommodate IE7. (We can safely ignore IE6 because hardly anyone uses that browser nowadays.)

Hi Wayne,

I appreciate your prompt answer and your work. Thanks! You truly go out of your way to provide support here. I'm amazed!

Yes, you're right I actually made some changes to the width to make the form fit into the layout. I didn't realize my changes caused the problem :-/

Your solution seems to have fixed it! One thing I need to change though is that the e-mail field should always appear (and be required to fill and be the default), even if they select "Phone" in "How should we get in touch with you?". The idea with the "How should we get in touch with you?" field is only to let them tell us if they want us to call them initially or if they prefer e-mail. We always need their e-mail address in case we can't get through to them.

The hover position is perfect, i'll just change the text a bit.

Could be great to have the form work with IE7. Nice to see that IE is disappearing :)

Thanks again!

B.t.w. I'm having problems using the formatting buttons on this support forum on Safari 6 on Lion, so my text is bold above - may be a bug...

Anders

Hi Anders

Thanks for your kind words. I've made the necessary adjustments to have the E-mail field always visible and have "E-mail" selected by default in the How should we get in touch with you? field. I also just discovered that the "Please complete all required fields." error message was incorrectly positioned because it blocked the label of the Link to video example field. That has been fixed with the addition of the following rule which you'll notice at the end of the injected CSS:

.form-button-error {
margin-left: 300px;
}

I'll have a go at the IE7 issue later but I can't guarantee anything.

Wayne

Oh, thanks for the heads up on the Safari 6 on Lion forum bug. I'll check if others have reported this and submit a ticket if one hasn't been submitted already.

Hi Wayne,

Thanks! Didn¨t even notice that problem. I'm glad it's fixed.

All the best

Anders

I have the same issue in my form. I clicked on the solution which I assume is in the absolute positioning link above. Is that right? The problem is that the link does not work when I click on it. Where can I find information to fix the alignment on field that should be on the far right side.