Help with a wordpress theme form creation and footer

[newbi11]

I have a wordpress theme I am trying to modify as a single landing page but I have been running into some problems. I am trying to create two forms on a single page. I have been able to copy and paste the first form and replicate that as a second form but the second form isn't aligned properly and I am also having some problems adding more fields to the forms. Secondly the theme footer is very big and I am trying to reduce the footer size, also below the footer there seems to be a little stretch of the website below the footer.

So what do you expect us to be able to do? Any code available? Any markup and css? Screenshots? Our crystal balls are being polished...

[newbi11]

Can I upload the files (html , css) here? It would be a mess copying and pasting all the codes here.

No, you can upload screenshots and paste code snippets. However, you could link to jsfiddles etc. We work best with code. Just paste the relevant stuff. 100's of lines of code with be ignored.

[newbi11]

Ok, first of all how do I place 3 drop down lists element besides each other on the same line?

similar to name and email on the form

http://jsfiddle.net/zbfw3yzL/

secondly, I would like to reduce the size of the footer.

http://jsfiddle.net/6ky3dw6s/

[newbi11]

I figured out how to fix the issue on the first jsfiddle, only problem now is the alignment. Here's a screenshot:

The footer issue on the second fiddle still remains though.

Most of what you are asking for is down to the WP theme itself, possibly residing in style.css. Simply copying snippets of styling to jsfiddle may not be the whole code required for the final output in WP. WP themes can (but shouldn't!) have convoluted paths to css file, which aren't always obvious.

Anyhow not sure if your theme is using a front-end css grid system, but your second link appears to suggest that it does:

span12

If similar to other systems, like Bootstrap, then you may be able to configure this nicely. Else you can give controls % widths (33% or less in this case - depending on the gaps required).

However, if you're not working with a grid system, you'll see the controls getting ridiculously small as you make the screen smaller. Grid systems allow you to set up different column sizes at certain "breakpoints". You can do the same without a grid system. Additionally / Alternatively you can set minimum / maximum widths for your controls, which may give you a more fluid rather than responsive feature.

So before going further, do you use a grid system - and if so what is it?
What sort of feature are you looking for - static, fluid or responsive (or something else)?

PS - not sure what you mean about height of footer, maybe this:

footer {
    padding:70px 0;
    text-align:center
}

That gives a 70px gap above and below the footer content. You also have a containing section that also has this:

section {
    margin:0;
    padding:70px 0;
    position:relative;
    background-color: #c0392b;
}

So effectively, you have 140px above and below the footer content.

[newbi11]

I managed to reduce the padding but the footer still covers a lot of space. I have included the bootstrap.min.css code in the jsfiddle I uploaded earlier on here - http://jsfiddle.net/6ky3dw6s/ . I really hope someone can help me out here. I just need to reduce the footer before I check form functionality.