PDA

View Full Version : Aligning form text input fields


paul-chambers
10-17-2012, 06:11 PM
Hello,

I am currently adding a contact form on the site:

Your Name: "xxxxxxxxx"
Your Email: "xxxxxxxx"
Address line 1: "xxxxxxxx"
Address line 2: "xxxxxxxx

etc etc

I want to align all the input fields so that they do not follow on directly after the field name so they are all vertically aligned.


My html:

</div>
<div id="contactform">
<form name="name" method="post" action="">
<p>Your Name:
<label for="name"></label>
<input name="name" type="text" class="infofields" id="name" size="50" maxlength="50" />
</p>
<p>Your Email:
<label for="email"></label>
<input name="email" type="text" class="infofields" id="email" size="50" maxlength="50" />
</p>
<p>Address line 1:
<label for="address1"></label>
<input name="address1" type="text" class="infofields" id="address1" size="50" maxlength="50" />
</p>
<p>Address line 2:
<label for="address2"></label>
<input name="address2" type="text" id="address2" size="50" maxlength="50" />
</p>
<p>Address line 3:
<label for="address3"></label>
<input name="address3" type="text" id="address3" size="50" maxlength="50" />
</p>
<p>Post Code:
<label for="postcode"></label>
<input name="postcode" type="text" class="infofields" id="postcode" size="10" maxlength="10" />
</p>
<p>Telephone:
<label for="telephone"></label>
<input name="telephone" type="text" id="telephone" size="15" maxlength="15" />
</p>
<p>Comments:
<label for="comments"></label>
<textarea name="comments" cols="50" rows="10" id="comments"></textarea>
</p>
</form>
</div>

Thanks

unknownflavor
10-17-2012, 08:58 PM
Try creating a table with columns & rows.

gentleone
10-17-2012, 09:39 PM
Try creating a table with columns & rows.
A form is not data, so a table is not the right tag for this.

Paul, first take those p tags out. It's not a paragraph either. Secondly the label tag has the purpose to make input fiels more accessible, so make use of that like so:

<form method="post" action="">
<label for="name">Your name:</label>
<input name="name" type="text" class="infofields" id="name" size="50" maxlength="50" />
<label for="email">Your Email:</label>
<input name="email" type="text" class="infofields" id="email" size="50" maxlength="50" />
</form>

The label tag and input field are inline elements, so that's why they line-up next to each other.
If you want them on top of each other, you simply change with some CSS their default display value (inline) to block.

CSS:

label, input[type=text] { display: block }


Here's this little piece of HTML & CSS in action:
http://cssdesk.com/a3zp7

If you understand how the normal flow of a HTML documents goes, if you know how the CSS box model works and if you know the difference between inline (display: inline) and block-level elements (display: block), it makes making layouts much easier.
Read up on these basic things... you will undertand much better how elements and tags react to each other once inserted in the HTML.

paul-chambers
10-18-2012, 01:07 PM
Thanks G.O,

It was just to get the actual input fields directly beneath one another and lined up correctly with the label name directly to the far left. Think I have acheived this now and all flush, have removed the p tags.

Thanks again, appreciated.

gentleone
10-18-2012, 01:42 PM
Aha... I've misread the actual question. Anyways... now you know how to get everything underneath each other as well.

paul-chambers
10-21-2012, 06:18 PM
I now have the contact form, is there a php script on this site I could use to forward the relevant info in an email?

gentleone
10-21-2012, 07:03 PM
There is one at the tutorials section and if you google there are heaps of free PHP form mailer scripts.

paul-chambers
10-21-2012, 07:42 PM
I tried one the other day. downloaded it and copied the code into a new php file..all code was in black?

domedia
10-21-2012, 11:41 PM
I tried one the other day. downloaded it and copied the code into a new php file..all code was in black?

What color do you want it in? ;-)

paul-chambers
10-22-2012, 10:39 AM
What color do you want it in? ;-)


Do you have one in red :D

paul-chambers
10-23-2012, 11:51 AM
HI,

I have added the php to the site and amended the code to reflect the above label tags I pasted above but for some reason I cannot get the form to send. I have amended the email to go to myself for testing but no joy.

Here is the php code, is there something missing that I cannot see here?
Forgot to add, I have added this line to the html for the contact form above
<form name="contactform" method="post" action="send_form_email.php">

<?php
if(isset($_POST['email'])) {

// EDIT THE 2 LINES BELOW AS REQUIRED
$email_to = "pchambers2@virginmedia.com";
$email_subject = "Enquiry form submission";


function died($error) {
// your error code can go here
echo "We are very sorry, but there were error(s) found with the form you submitted. ";
echo "These errors appear below.<br /><br />";
echo $error."<br /><br />";
echo "Please go back and fix these errors.<br /><br />";
die();
}

// validation expected data exists
if(!isset($_POST['name']) ||
!isset($_POST['email']) ||
!isset($_POST['Address1']) ||
!isset($_POST['Address2']) ||
!isset($_POST['Address3']) ||
!isset($_POST['postcode']) ||
!isset($_POST['telephone']) ||
!isset($_POST['comments'])) {
died('We are sorry, but there appears to be a problem with the form you submitted.');
}

$name = $_POST['name']; // required
$email_from = $_POST['email']; // required
$address1 = $_POST['address1']; // required
$address2 = $_POST['address2']; // not required
$address3 = $_POST['address3']; // not required
$postcode = $_POST['postcode']; // not required
$telephone = $_POST['telephone']; // not required
$comments = $_POST['comments']; // required

$error_message = "";
$email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';
if(!preg_match($email_exp,$email_from)) {
$error_message .= 'The Email Address you entered does not appear to be valid.<br />';
}
$string_exp = "/^[A-Za-z .'-]+$/";
if(!preg_match($string_exp,$name)) {
$error_message .= 'The First Name you entered does not appear to be valid.<br />';
}
if(strlen($comments) < 2) {
$error_message .= 'The Comments you entered do not appear to be valid.<br />';
}
if(strlen($error_message) > 0) {
died($error_message);
}
$email_message = "Form details below.\n\n";

function clean_string($string) {
$bad = array("content-type","bcc:","to:","cc:","href");
return str_replace($bad,"",$string);
}

$email_message .= "name".clean_string($name)."\n";
$email_message .= "email".clean_string($email_from)."\n";
$email_message .= "address1".clean_string($address1)."\n";
$email_message .= "address2".clean_string($address2)."\n";
$email_message .= "address3".clean_string($address3)."\n";
$email_message .= "postcode".clean_string($postcode)."\n";
$email_message .= "telephone".clean_string($telephone)."\n";
$email_message .= "Comments".clean_string($comments)."\n";


// create email headers
$headers = 'From: '.$email_from."\r\n".
'Reply-To: '.$email_from."\r\n" .
'X-Mailer: PHP/' . phpversion();
@mail($email_to, $email_subject, $email_message, $headers);
?>

<!-- include your own success html here -->

Thank you for contacting us. We will be in touch with you very soon.

<?php
}
?>

edbr
10-24-2012, 02:39 AM
what happens? do you get an error message? what is your domain?

paul-chambers
10-24-2012, 07:24 PM
Hi,

There is no error message and I can say that the success message does not come up at all when the info is submitted.

http://pchambers2.byethost3.com/index.html

If you go on the footer on this page there is a 'contact us here' link

Ricky55
10-24-2012, 08:00 PM
That link is too small and the text is too dark against the background. You also have about six empty <p> tags at the bottom of your page.

First check the obvious, is your php script still called send_form_email.php and is it in the root of your site? Do you defo have php running on your server? sounds crazy but I've seen this before. Just run a simple php info to check.

If you can't get this to work email me via my website and I'll send you a script that I know works.

paul-chambers
10-24-2012, 08:28 PM
Ricky,

the script is called send_form_email.php and the server does support php scripting.
The contact link is still to be added to the main menu, few adjustments to make to it.

What page are you finding empty <p> tags in?

Thanks Ricky

paul-chambers
10-24-2012, 08:38 PM
If you can't get this to work email me via my website and I'll send you a script that I know works.

Not sure why the script isn't working, probably something that I am not seeing in there?

Love your website, with regards to your video editing, ever tried Sony Vegas? Thats what I use and I love it. Just a suggestion, I look forward to seeing them when they are done as I love video editing myself.

edbr
10-25-2012, 01:59 AM
not getting server info. i would check the php as suggested. Is this free hosting? if so problem may lie there

paul-chambers
10-25-2012, 10:53 AM
EDBR

Yes this is a free hosting site which was only for testing purposes, they do support php and have checked script and it seems ok. When the submit button is clicked the fields simply clear themselves so it looks like it is not running through the final process of actually sending the info and showing the success message?

tsturgeon
07-18-2013, 08:23 AM
I believe you just need to add <br> between the fields like so,


</div> <div id="contactform"> <form name="name" method="post" action=""> <p>Your Name: <label for="name"></label> <input name="name" type="text" class="infofields" id="name" size="50" maxlength="50" /> </p> <br>
<p>Your Email: <label for="email"></label> <input name="email" type="text" class="infofields" id="email" size="50" maxlength="50" /> </p>
<br>
<p>Address line 1: <label for="address1"></label> <input name="address1" type="text" class="infofields" id="address1" size="50" maxlength="50" /> </p>

<br>
<p>Address line 2: <label for="address2"></label> <input name="address2" type="text" id="address2" size="50" maxlength="50" /> </p>

<br>
<p>Address line 3: <label for="address3"></label> <input name="address3" type="text" id="address3" size="50" maxlength="50" /> </p>

<br>
<p>Post Code: <label for="postcode"></label> <input name="postcode" type="text" class="infofields" id="postcode" size="10" maxlength="10" /> </p>
<br>
<p>Telephone: <label for="telephone"></label> <input name="telephone" type="text" id="telephone" size="15" maxlength="15" /> </p>
<br>
<p>Comments: <label for="comments"></label> <textarea name="comments" cols="50" rows="10" id="comments"></textarea> </p>