Centering a contact form

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.

1 Like

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?

1 Like

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 :slight_smile:

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 :frowning:

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. :slight_smile:

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. :slight_smile:

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 :slight_smile:

ok, i am trying

i found this on codepen… simple

the styling is fine for me :slight_smile:

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!

1 Like

this post never got a reply

i would appreciate a response :slight_smile:

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 :slight_smile:

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

contact@mysite.com

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…

1 Like