Member Avatar for sk8ergirl

Hi,
I'm trying to create contact us form
I have to create three page
1-index.html
2-main.css
3-contact.php

can you explain how can I make it like this

and what is wrong with my code
one more question what should I put in contact.php page ? with explanation please

this is my index.html page

<form action="contact.php" method="post" name="contact"> 
<br/> 


<label> First Name</label>
<input name="nmw" type="text" size="30" maxlength="30" />
<br/>

<label> Last Name</label>
<input name="last" type="text" size="30" maxlength="30" />
<br/>

<label>Email Address</label>
<input name="Email" type="text" size="30" maxlength="30" />
<br/>

<label>Telephone number</label>
<input name="number" type="text" size="30" maxlength="30" />
<br/>





<label> comment </label>
<textarea name="comment" cols="40" rows="15"></textarea>
<br/>



<input name="Clear All " type="button" value="Clear " /> 
<input name="Send " type="button" value="Send " />





</form>

and this is main.css page

#wrapper{ 
}

#form{
    text-align:left; margin:50px;
}
#background{ background-color:#6CF; 
}

#label{
    float:right; width:150px; margin-top:5px; text-align:right; display:block; background:none;
}
#submit{
    background:none;
}
#input{
    width:300; margin:0 0 16px 10px; border:1px; #bbb solid; padding:5px; background:none;
}
#select{
    margin-bottom:20px;
}
  • 1 Contributor
  • 2 Replies
  • 186 Views
  • 2 Hours Discussion Span
  • Latest Post Latest Post by sk8ergirl

Dani AI

Generated

A few practical fixes and explanations based on the original posts (and the screenshot that was linked): labels should be bound to inputs using matching id/for so screen readers and clicking the label focuses the field; email and phone fields should use type="email" and type="tel" for native validation and mobile keyboards; the form submit must be type="submit" (the original used generic buttons), and the “clear” control should be type="reset". The posted CSS uses IDs like #label and #input for repeated elements — switch to classes (or target label/input) and always include units (for example width:300px;) and box-sizing: border-box; to avoid layout surprises. To center an image inside the form, make the image a block-level element and use auto left/right margins.

A minimal, practical contact.php handler (validate server-side, sanitize, avoid header injection, return simple status):

<?php
if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
    http_response_code(405);
    exit;
}

$first   = trim(filter_input(INPUT_POST, 'first', FILTER_SANITIZE_FULL_SPECIAL_CHARS));
$last    = trim(filter_input(INPUT_POST, 'last', FILTER_SANITIZE_FULL_SPECIAL_CHARS));
$email   = filter_input(INPUT_POST, 'email', FILTER_VALIDATE_EMAIL);
$comment = trim(filter_input(INPUT_POST, 'comment', FILTER_SANITIZE_FULL_SPECIAL_CHARS));

$errors = [];
if (!$first)   $errors[] = 'First name required';
if (!$email)   $errors[] = 'Valid email required';
if (!$comment) $errors[] = 'Message required';

if ($errors) {
    http_response_code(400);
    echo implode("\n", $errors);
    exit;
}

$to      = 'site@domain.com';
$subject = 'Contact: ' . $first . ' ' . $last;
$body    = "From: $first $last\nEmail: $email\n\n$comment";
$headers = "From: no-reply@domain.com\r\nReply-To: " . str_replace(["\r","\n"], '', $email) . "\r\n";

if (mail($to, $subject, $body, $headers)) {
    echo 'OK';
} else {
    http_response_code(500);
    echo 'Could not send message';
}
?>

UX & security notes: client-side validation is convenient but never trusted—always validate on the server. For better deliverability and security, use an SMTP library (PHPMailer) or a transactional mail service and add basic anti-spam (honeypot or CAPTCHA). Since later noted the issue was fixed, the patterns above are intended as hardening and accessibility improvements for future maintenance.

Member Avatar for sk8ergirl

I would alos like to add image at the end (in the middle) of the form

Member Avatar for sk8ergirl

never mind I fixed it :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.