please see
notice there is no CSS
how do i center this form?
is this the best form code?
maybe share someting thats better?
i am looking for a conatct code that sends an email when submited
and any suggestions for content on a “contact” page… nice to look at… aesthetically pleasing yet helpful and informative
help me out
many thanks!
Are you trying to do it without css (which would be no bueno)?
If not, this css is the quickest and simplest ways to center;
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
Is it the only element on the page? There are many ways to center it vertically but without knowing what’s on the rest of the page, something like Dave’s will work. With other elements on the page, Daves method needs to be adjusted.
This is just one way:-
form {
margin: 0 auto;
display: table;
}
You could instead define a max-width instead of using display: table. Both reduce the overall width of the form element so it isn’t (the default) full page width.
No it is not the best.
Name:<br>
<input type="text" size="19" name="Contact-Name"><br><br>
Your HTML is not semantic. The field labels should be in <label> elements which are linked to the input. You can do this with a for attribute or you can nest the input within the label.
Using for:-
<label for="name">Name:</label>
<input type="text" size="19" name="Contact-Name" id="name">
Note that you need an id attribute on the input to reference with the for.
Using nesting:-
<label>Name:
<input type="text" size="19" name="Contact-Name">
</label>
You are also misusing the <br> tag. To correctly put the labels and inputs on their own lines make the block elements.
label, input {
display: block ;
}
<br><br>
Two (or more) consecutive <br>s should never be seen.
If you want to add space between elements use margins or padding.
This will require server-side scripting. Is there a server side language you are familiar with or already use for the site?
You are getting tips on centering a form. Here’s a series of articles on how to structure your web form:
thanks!
please see
https://forallthetime.com/DEMO/contact_1.html
this is as far as i got
no current server side language
also, on click of Name, Email, Message i get
This form is not secure. Autofill has been turned off.
help, please
to be clear, i did not write this code myself
i found it on a google search
what should i do with this now?
live with it?
try another code? any suggestions?
WebSteve, thanks for the article 
first, i know LITTLE JavaScript and i am not working anything server side… i am simply trying HTML and CSS to make a conatct form work, sending the submitted content to an email
from the article
The last part, and perhaps the trickiest, is to handle form data on the server side.
sorry, not there yet 
all of you, i sincerely appreciate your time, attention, follow through and help!
many thanks!
You may edit the existing form to add the <label> elements and id attributes.
Also add the CSS to style it as you want.
You may also want to add some further attributes for client side validation, such as required and min/max length attributes. Most browsers now will understand these and validate on the client side without the need for javascript.
HTML and CSS alone won’t send an email, the server side part is inevitable, you will need to server to send the mail. But take it a step at a time, get the form set out as you want first.
hoping to save time
kindly pass on a link for the appropriate HTML and CSS
oubviously i had a bad one
i will tweak it to my desire
and my next step is to make it work server side
thank you!
Apparently it will if you use a mailto: in the form action but will send via your own email client.
The email address has to be your own and not example.com.
It will probably still give a warning as I think it expects an https destination.
I would advise against doing any of that though and do it properly.
That would negate the benefit of using a contact form. With your email address in the form code it may be harvested by spammers.
You may as well take the easy route to being flooded with spam and use a simple mailto link.
<a href="mailto:me@example.com" title="send email">Email Me</a>
I gave an example of a properly formatted label and input here:-
The CSS would depend upon the look you want. There were some example already given for things like centreing the form element, putting labels and inputs on their own lines. But without more specific needs stated it is hard to advise.
Also Ryan is correct, the correct code may dpened upon the form’s context within the whole page.
I think the OP was following something like this link.
The email address is in the action attribute so not so liable to be harvested but still a risk.
As I said above I would advise against doing any of that though and do it properly through a normal form procedure
ok, i am trying
i found this on codepen… simple
the styling is fine for me
my apologies for my ignorance and or stupidity… but this is where i am coming from
i freely admit i know nothing about server side coding
can this code work with a simple block of code?
is it that simple?
please tell me what is the complete code? or maybe a resource where i can find the complete code?
i would like to fit the contact code on the left of
centered horizontally and vertically
this is the code i will be using… thought someone said something about that… i may change the divs on the right into images / text
what happens after send is clicked? how does it come back to me?
i would appreciate full comments to help me understand what you are doing for me… so i can learn
we are all on a learning curve, right?
in other words… what is everything i need to do to make this work? and anythng else i should know?
again, sorry if i am clueless here… please know im sincerely grateful!
MANY THANKS!
this post never got a reply
i would appreciate a response
You have the area called main on the left but you failed to place anything there.
You used form as a selector but the element is called #form so nothing got placed.
As you are using grid-template areas you don’t need the columns or rows setting,
You used height:100vh for the wrapper which means your layout can never grow below the fold. Is that wise? Content will just spill out. Use min-height instead, You will rarely use height for your main container.
Think about what you are saying. 100vh is 100% of the viewport height yet the viewport already has margins on the body so that one rule will give you a vertical scrollbar when none is needed. Negate the margins on the body,
html,body{margin:0;padding:0;}
.container {
display: grid;
min-height: 100vh;
grid-gap: 1rem;
grid-template-areas:
"main main ct1 ct2"
"main main ct1 ct2"
"main main ct3 ct4"
"main main ct3 ct4";
}
You probably also should use the box-sizing:border-box model when using things like 100vh as padding and borders will increase the height.
You really need to follow a structured tutorial as that question encompasses various different topics. Basically your form sends an http request to your server and then on your server you have some code that acts on that request and accomplishes the tasks that you require.
Read the MDN primer here for an overview,
The prime thing to note is that you need code serverside (PHP or similar) that receives the data and then performs the action you require (such as emailing you or retuning a received message back to the page).
You can set the action of the form to open the default email client but that is not recommended.
If you don’t have the time or experience to learn you could use some third party form handler but usually there’s a cost involved.
Paul,
thanks for the reply
ok, not there yet… infact i am no where close
thanks again here
not ready for this
i will tackle this when i am a better coder. from here on i hope to gain skills for front end developement
yes, i should use this on every page for padding and borders
another thought i had…
instead of a form with PHP and all the other things i cannot do, how does a simple link sound?
i am NOT talking about a form at all
eg
like i said, simple
and my visitor can still access help, just as email
your $0.02 please
again, i thank you!
Yes, thats a standard mailto link in an anchor and will open the users default mail application assuming they have one. (Some users will be on machines (such as a Library, college or at work) where it may not be possible to open a default email client.)
If you do this, be prepared for spam, lots of spam…
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.