Existing form requires alteration Options

[Buddy41]

Hi,
Here is my form in question, http://www.theremotedoctor.co.uk/form-contact-new.html

The current working code has the text to the left of the trext box but i am looking to now put it above the text box.
Something so simple escapes me.

Please could you advise how i change/edit my code so the examples below can take affect.

Currently in use.

First Name * "text box is here"

I would now like,

First Name*
"text box is here"

Many thanks

[CharlesEF]

Just add a '<br>' tag after each <label>.

[Buddy41]

Hi,
Could you advise where as im adding where i think its correct but just pushing the fields etc down the page

[Buddy41]

Hi,
Ive now sorted that but come unstuck with its input field.
Can you assist me please.

Check here http://www.theremotedoctor.co.uk/form-contact-new.html
Could you advise a sample of code so i could follow

[CharlesEF]

Sorry, just noticed, you will never be able to do what you want because the <label> and <input> elements are in different <td>'s. You would have to redesign the form a little. What problem are you having?

Also, the 'for' attribute of the <label> element should point to the 'id' of the <input> element not the 'name' attribute.

This post has been edited by CharlesEF: Feb 12 2017, 12:10 PM

[Christian J]

I think it should work if you change the rows with four columns...

CODE

<tr><br>
<td valign="top"><label for="first_name2">First Name *</label></td>
<td valign="top"><br><input  type="text" name="first_name" maxlength="50" size="25"></td>
<td valign="top"><label for="last_name">Last Name *</label></td>
<td valign="top"><br><input  type="text" name="last_name" maxlength="50" size="25"></td>
</tr>

...into two columns:

CODE

<tr>
<td valign="top">
    <label for="first_name2">First Name *</label>
    <br>
    <input  type="text" name="first_name" maxlength="50" size="25">
</td>
<td valign="top">
    <label for="last_name">Last Name *</label>
    <br>
    <input  type="text" name="last_name" maxlength="50" size="25">
</td>
</tr>

[Buddy41]

Thanks for the reply.
I am struggling with this,been all day doing what you currently see.
Are you able to assist me please.
I am stuck with the following items.
1,Start of label text to be inline vertically with its input box.
2,The form itself needs to be inline below where it reads "WEB CONTACT FORM" currently its within a huge blue area.
3,Centre Submit button to middle of message box.


Ive gone the 2 column route.
Many thanks guys.

This post has been edited by Buddy41: Feb 12 2017, 01:27 PM

[Christian J]

1,Start of label text to be inline vertically with its input box.

I don't understand, how can they be inline when the INPUT is below the LABEL?

2,The form itself needs to be inline below where it reads "WEB CONTACT FORM" currently its within a huge blue area.

The blue area is the DIV with the CLASS "web-contact-form". If you want the WEB CONTACT FORM" heading inside that area too you can simply move it.

3,Centre Submit button to middle of message box.

It might appear to be off-center because the table is 650px wide, while its parent DIV with the CLASS "form-container" is only 615px, so the table spills out.

[Buddy41]

Hi,
Please see the form now,
http://www.theremotedoctor.co.uk/form-contact-new.html

Im getting there but slowly.
I need to create a little space below the inout field & the start of the label text below,as you can see its squashed.

The message box needs to be center of the form & also its label.

Thanks im getting there with your input.

[Buddy41]

Please see photo.
I am trying to get the text box equal to the edge of the form both sides as shown by green arrow.

The message box needs to be central like shown in red arrow.

[Christian J]

I need to create a little space below the inout field & the start of the label text below,as you can see its squashed.

You might use vertical CSS padding on the table cells, or add BR elements at the top of the table cells.

The message box needs to be center of the form & also its label.

Do the same as with the the submit button cell:

CODE

<td style="text-align: center" colspan="2">

[Christian J]

Please see photo.
I am trying to get the text box equal to the edge of the form both sides as shown by green arrow.

You might use "text-align: right" on the right-column cells, but that will affect the label text as well.

[Buddy41]

Hi,
Here is my attempt but as you can see on the page now it right ?
<td style="text-align: center" colspan="2">
<textarea name="comments" maxlength="1000" cols="35" rows="10"></textarea>
</tr>
<tr>
<td colspan="2" style="text-align:center"><input type="submit" value="Submit">
</td>
</tr>

[Christian J]

Hi,
Here is my attempt but as you can see on the page now it right ?

No, the page doesn't look like the above HTML.

[Buddy41]

Im still trying to apply what you mentioned.
Can you paste here the code i need to use and where it needs to go

[Buddy41]

Ok,
Ive just this second done it.
Now created an issue where the label and its boz have altered.
Can ypu advise the code so i can just add it in.

Thanks

[CharlesEF]

Instead of trying to center the elements in the <td> why not make the <input> elements expand to the width of the <td>. Just add 'style="width: 95%"' to each <input> element.

This post has been edited by CharlesEF: Feb 12 2017, 03:42 PM

[Buddy41]

Morning all,
I have now moved the form into its test page of which you can see here, http://www.theremotedoctor.co.uk/test-form...crollto=content

When i view on the pc all is well,when i view on a mobile / tablet etc then media query needs attention.
Now i am honest here and confess i am now 100% stuck.
I have attached s creen shot of the form when vied on an iphone.

Looking at my forms code can you advise what i need to add to the css so phones/tablet etc get the correct look of the form.
I was expecting the form to swap to show vertical input fields.

[Christian J]

Looking at my forms code can you advise what i need to add to the css so phones/tablet etc get the correct look of the form.
I was expecting the form to swap to show vertical input fields.

Not sure what you mean with "correct look" or "vertical input fields", but the best layout for a narrow (e.g. mobile) window might be a single column. Unfortunately that's not possible when using a two-column HTML table for layout.

Instead, you might use CSS to make the layout change depending on window size, search for "responsive design" or similar to learn more about this. It's hard to give more specific advice, since your page already loads several external stylesheets and scripts that may or may not conflict.