Positioning form fields with custom CSS

#1: I am having trouble getting the form fields to go on the same line - PHONE and EMAIL ( in this order/side by side / same line)  I cant do it :(  Is there anyway you can MAKE the change for me???? I would GREATLY apreciate - I dont know how to do all this coding stuff - you guys are so smart and have helped me SOOOOOOOOOO MUCH! The BEST Support Ive ever had.

#2: ALSO - I just noticied - can we have titles before each section - I tried headings and I can't do it right -  for instance - see MORE INFO RSVP at the top? Can the next section be Event Info (same font and color) and then the final section be Billing Info (same font and color too) instead of CreditCard. Also a black line (just like near the total$ line above) be seperating each section?

I am tying to make this look as professional as possible but Im really struggling. Can you make the changes for me please????????? I am so bad at this.

I made a sreenshot for you - well I tried to anyways.....

Page URL:
http://buildingbridgescoalition.org/moreinforsvp/

I you use the "Shrink" function for the phone and email fields:

http://www.jotform.com/help/90-Form-Field-Positioning

Then add this code to your form:

http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

#id_18, #id_19 {
    width : 220px !important;
}

Here is what the form would look like with the changes made:

https://form.jotform.com/60946062180958

The Credit Card heading, unfortunately, cannot be changed.  It can be removed, however, it is a part of the payment field that cannot be updated.

why is there a big space between the section??? after email and phone then a big space then billing payment info?

IT LOOKS GREAT OTHER THAN THAT - how do I fix space??

also - I see the dash is IN the box now - how do I move that to the LH where it belongs?

I see this is about your form 60760825371153, named Forum Signup. I see that this form has several CSS errors, preventing CSS codes from working correctly.

1. You should remove the "important;" from lines 249 and 274 of the custom CSS field in the Designer.

2. You should remove the erroneous closing brace } at the start of line 267 of your CSS:

This will allow your custom CSS to work correctly, as the errors are currently preventing any codes from underneath the error from being applied.

After this, I see you are using a lot of custom CSS on your form, and all of your field positioning is being done through using custom CSS. That makes it a little harder to update and maintain the styles of your form.

The blank section between email address/phone field, and the credit card section, is caused by the following CSS:

table.form-address-table {
    position : relative;
    top : 370px;
}

If you did not want to move the credit card section for 370 pixels downward, you may want to try reducing this amount to the one that works better in your design:

table.form-address-table {
    position : relative;
    top : 310px;
}

In that case, you would also have to preposition the horizontal line that is visually placed above the credit card section, from using:

#cid_20 {
    position : relative;
    top : 140px;
}

to this code:

#cid_20 {
    position : relative;
    top : 80px;
}

When it comes to the problem with a dash being in a box, I'm afraid I did not understand what you were referring to, and which dash is not where it was supposed to be. If you let us know in a little more detail about which part doesn't display the way you wanted, we will be happy to help.

how do i get email and phone on same line??? i cant do it :(

the horizontal line should be like the BLACK one above.

the total $0.00 is too low - how idd it get moved down??? can we line it up better.?

Your phone field is being displayed on two lines due to the custom CSS of our form, specifically the codes that are forcing this field to be 200 pixels. The specific codes that are causing the issue are:

#cid_19 {
width: 200px;
}
#cid_19 .form-sub-label-container {
margin-right: 20px;
}
#cid_19 .form-sub-label-container:nth-of-type(2) {
width: 200px;
}

#cid_19 is the containing field for both the area code and phone number fields, and it is set to be 200 pixels wide. The phone number field alone from inside of it is also set to be 200 pixels wide. Since an area field plus the number field that is already 200 pixels wide can't both fit inside the same container of 200 pixels, your phone field displays in two lines.

1. First, please fix the three CSS errors described in the previous post. You can change your CSS by opening the form in the Designer.

2. After fixing the three CSS errors in your code as described in the previous post, please also remove this part of code marked in orange above, which affects your Phone Field #cid_19, so that the Phone Field is not being broken into two separate lines. It should display correctly on the same line with Email field after that.

3. When it comes to adding a horizontal line, you should not be adding it with a Heading field, as it is currently done. Please remove the currently existing Heading field, and add a Text field instead.

Your Text field should only contain this as its HTML: <hr>

4. Next, we need to fix the custom CSS of your form that is targeting horizontal lines, so we need to remove both instances of this code - it is preventing horizontal lines from being properly displayed:

.form-html hr {
    border-top-style : none;
    border-bottom-style : 1px dotted #FF0000;
}

5. Finally, to make your horizontal rules look the same, please change this code:

#cid_13 hr {
    width : 600px!important;
    color : #656565 !important;
}

Into this:

#cid_13 hr, .form-html hr {
    width : 600px!important;
    color : #656565 !important;
    border-top: 1px inset #656565;
}

Upon making all the recommended changes, your form would display as this demo form:

https://form.jotformpro.com/form/61022591326953

I'm not sure where from you are copy/pasting your CSS codes, but there seems to be a lot of code that that has positions hard-coded in pixels, which only makes it very hard to edit the styles of your form. Once you change one thing, all the other styles that were set up for that specific pixel position are also getting affected.

I hope this helps.

i made other changes to my form and now i cant get your codes you gave me to work....please help!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

also - the lines of css code changed so i cant find the errors to correct them -

can u  make the changes inside my form here for me please???

formID=61026284421144

Hi there,

As we discussed earlier on the thread about the styling issue of your form, the final look of your form will look like the following, if you applied the latest CSS to your form:

Also, please ignore the preview on the "Form Builder", because of too much customization, its alignment is wrongly monitored on it.

Regards.

I've also changed the CSS code of your cloned form. Can you check it again?