PHP with CSS

The code only makes some name information mandatory, not both fields. Your exercise for the today can be to work out how to alter the code to make both mandatory. The simplest method would probably to treat the first_name and last_name fields like the other fields rather than handling them both together.

Re, the time. Have you checked the time on your server?

I have no idea how to check the time on my server. :blushing: Any suggestions?

Regarding the name stuff, I think I know exactly what to do to make both fields work... I found it. But in the meantime, I actually decided to make it one field (name) since my site has a slightly more casual approach. And that's honestly not a cop-out, to avoid solving it... I can see the fix.

Here's another question for you. I've been playing about with the layout / appearance of the form: http://www.digitalpawprint.com/contact/contact.php

You'll notice that "company" and "phone" are different in size and positioning... in regards to positioning, I tried using paragraph tags instead of labels, as I've seen done on other sites.

1) Is there any reason I should avoid paragraph tags, and use label tags instead?
2) How can I tighten up the space between the word and its corresponding field? It seems as though whatever I do on my CSS sheet, it won't budge. But in this example http://www.zeldman.com/contact/, it looks great. He doesn't appear to have any particular div styling that part, so I'm wondering why it's not doing something similar in mine.

My css page: http://www.digitalpawprint.com/woof.css

1. Yes. Labels are the correct element to "label" a formfield. That is their sole purpose in life. Notice the "for" attribute - unique to the label element it allows you to explicitly link a label to a field - necessary when the field isn't nested within the label element. Having a label is particularly useful for checkboxes and radio buttons - clicking the label toggles the input field. Its also extremely important for non-visual browsers as it lets the browser know what the field is for.

You can place the label and the input field inside a paragraph element.

2. Control the margins and padding in the same way you would control it for any other element. Oddly (because its Zeldman's site) I wouldn't take that form as a good example of semantic form layout. But, be that as it may, he's controlled the spacing between the element with good ol' CSS style rules. Use Firebug and inspect the elements yourself!

yes as long as your name isn't flipping Safari though.

Thanks for explaining the labels, that's definitely the way I want to do it as accessibility is important to me.

I'm close to completion, with a just a few things that need resolving. You can see it here: http://www.digitalpawprint.com/contact/contact.php

I'm trying to make the submission button an image rollover, and seem to be having trouble fitting that in with the php. While fiddling about, I somehow stopped the submission from reaching my inbox... oops. Clearly I've messed something up. I'm pretty certain my CSS code for that part is fine:

#submit { width: 71px; height: 30px; margin: 0 auto; padding: 19px 0 0 0; }

#submit a
{
display: block;
width: 71px;
height: 30px;
margin: 0 auto;
background: url(./images/submit.gif) no-repeat;
text-indent: -9999px;
text-decoration: none;
}

#submit a:hover
{
margin: 0 auto;
width: 30px;
background: url(./images/submit.gif) 0 -30px no-repeat;
}

And I know exactly where the problem is (I think) within this form.tpl.inc ~ it's because I'm referring to an image source, which of course I don't want to do with an image rollover... but I'm a bit unsure about what to type into its place.

" method="post">

For more information about our services, please fill out this form with details
of your inquiry. And don't worry... your information will not be given out to any
other party.

<?php if (!empty($msg)) { ?>

Whoops! There was a problem processing your request, so please review
the messages below.

<?php foreach ($msg as $text) { ?>

• <?php echo $text; ?>

<?php } ?>

<?php } ?>









It's right in that last bit of the code there... I'm just not sure what to replace the source with, as I'd normally have a linked word instead. Suggestions?

Oh and I think I sorted out the time issue on my server... I was having a blonde moment when I said I wasn't sure how... I was thinking of something different entirely. :rolleyes: I'll see if the time is fixed, once I'm able to get a submission to come through again to my inbox.

the correct attribute is "src" (not source).

replace it with a transparent image of the same size. Then place the actual image as a background. Change the background image in the normal manner using style rules for the :hover, :active and/or :focus selectors.

I fixed the "src" vs. "source" thing... a silly oversight when putting the info back in.

I put a transparent image of the same size into place, but seem to be having trouble knowing what exactly goes into my CSS code for the background image, which is the real image. I've done image rollovers before, but maybe it's because I've only replaced text with a rollover image... I'm goofing up the image on display.

You can see it here: http://www.digitalpawprint.com/contact/contact.php

Here's the chunk of CSS code that covers it:

#submit { width: 71px; height: 30px; margin: 0 auto; padding: 19px 0 0 0; background: url(./images/submit.gif) no-repeat; overflow: hidden; display: block; }

#submit a
{
display: block;
width: 71px;
height: 30px;
margin: 0 auto;
background: url(./images/submit.gif) no-repeat;
text-indent: -9999px;
text-decoration: none;
}

#submit a:hover
{
margin: 0 auto;
width: 71px;
background: url(./images/submit.gif) 0 -30px no-repeat;
}

The last three lines under #submit were added as experiment on my part, trying to fix the problem. I thought I'd leave things as is until I get further advice.

My php page is the following:

" method="post">

For more information about our services, please fill out this form with details
of your inquiry. And don't worry... your information will not be given out to any
other party.

<?php if (!empty($msg)) { ?>

Whoops! There was a problem processing your request, so please review
the messages below.

<?php foreach ($msg as $text) { ?>

• <?php echo $text; ?>

<?php } ?>

<?php } ?>

Maybe the problem is that I'm not entirely sure what you mean by "change the background image in the normal manner" ~ I'm missing something there.

CSS has to match your html. There is no anchor element involved.

#submit input { /* CSS properties for your background image */
#submit input:hover { /* CSS properties for your mouse over background image */ }

IE6 only supports :hover on anchor elements. You can either let IE6 users go without or you can use javascript to give them the same effect. My personal preference is the whatever:hover behaviour.

The button now works perfectly and the form appears to work fine... but the e-mail is not making its way to my inbox. Now what in the world could I have done? :curse:

include/contact.php:
<?php
/*
* contact us form processor script
*
* @original author christopher smith
* @date 2007-06-25
*
* (c)2007 Jalakai Designs
*/
if (!defined(_JALAKAI_) && !_JALAKAI_) die();

define('DEBUG',false);
define('_DB_',false);
define('_REDIRECT_',true); // for success - set to true to redirect, false to return to the same page

// email addresses to receive notification of an inquiry
$notify_addresses = array('[email protected]');
$notify_subject = '%s - Customer Inquiry';

// admin/support email address
$email_admin = '[email protected]';

// email addresses from the following services will trigger an error,
// the list will be used in a preg function, escape any special characters
// use an empty array, "$banned_domains = array();" to exclude noone.
$banned_domains = array('gmail','googlemail','hotmail','yahoo','aol');


// DB configuration
if (_DB_) {
define('_DB_CONNECTION_','db');
define('_DB_TABLE_','contact');
}
if (_REDIRECT_) {

$host = $_SERVER['HTTP_HOST'];
$path = rtrim(dirname($_SERVER['PHP_SELF']), '/\\');
$page = 'thank_you.html'; // set to redirect page name

$redirect_uri = "http://$host$path/$page";
}

require_once (dirname(__FILE__).'/common.php');
require_once (dirname(__FILE__).'/functions.php');

$error = false;
$msg = array();
global $highlight; $highlight = array();
$internal_error_msg = 'There was an internal error while processing your request. Please try again later. If the problem persists, please contact customer service at '.$email_admin.'.';

if ($_SERVER['REQUEST_METHOD'] == 'POST') {

$raw_name = cleanInputString('name');
$raw_company = cleanInputString('company');
$raw_phone = cleanInputString('phone');
$raw_email = cleanInputString('email');
$raw_website = cleanInputString('website');
$raw_more = cleanInputString('more_info');

// create variables to hold data for insertion into the db and notification message text
$insert = array();
$message = '';

if (empty($raw_name)) {

$error = true;
$msg[] = 'Please provide your name.';
$highlight[] = 'name';

} else if (preg_match('/[[:cntrl:]<>]/',$raw_name)) {

$error = true;
$msg[] = 'Illegal characters detected in name.';
if (preg_match('/[[:cntrl:]<>]/',$raw_name)) $highlight[] = 'name';

} else {

$insert['name'] = $raw_name;
$message .= "Name: {$raw_name}\n";

}

// phone must exist
if (empty($raw_phone)) {

$error = true;
$msg[] = 'The phone number is missing.';
$highlight[] = 'phone';

} else if (preg_match('/[[:cntrl:]<>]/',$raw_phone)) {

$error = true;
$msg[] = 'Illegal characters detected in phone number.';
$highlight[] = 'phone';

} else {

$insert['phone'] = $raw_phone;
$message .= 'Phone: '.$raw_phone."\n";

}

// email must exist and be valid
if (empty($raw_email) || !isValidEmail($raw_email)) {

$error = true;
$msg[] = 'The email address is missing or invalid.';
$highlight[] = 'email';

} else {

$insert['email'] = $raw_email;
$message .= 'Email: '.$raw_email."\n";

}

if (empty($raw_more)) {

$error = true;
$msg[] = 'Please tell us the nature of your inquiry.';
$highlight[] = 'more_info';

} else if (preg_match('/[\x01-\x08\x0b\x0c\x0e-\x1f]/',$raw_more)) {

$error = true;
$msg[] = 'Illegal characters detected in Inquiry Detail.';
$highlight[] = 'more_info';

} else {

$insert['more_info'] = $raw_more;
$message .= "\nInquiry Detail\n==========================\n".$raw_more."\n";

}

if (!$error) {

if (_DB_) {
require_once (dirname(__FILE__).'/mysql.class.php');
$db = new db();
$db->connect(_DB_CONNECTION_);

$ok = $db->insert(_DB_TABLE_,array($insert));
} else {

$ok = true;

}

// send notification email
if (!empty($notify_addresses)) {
// determine topic from calling page
$topic = ucwords(strtr(substr(strrchr($_SERVER['PHP_SELF'],'/'),1,-4),'-_',' '));
$message = $topic."\n====================\n\n".$message;
$notify_subject = sprintf($notify_subject, $topic);

$from = "{$insert['name']} <{$insert['email']}>";
$mail_ok = notify($notify_addresses,$notify_subject,$from,$message);
}


if ($ok) {

if (_REDIRECT_) {
header("location: {$redirect_uri}");
exit();
} else {
$notification_success = true;

$raw_name = '';
$raw_phone = '';
$raw_email = '';
$raw_more = '';

}

} else {

$error = true;
$msg[] = $internal_error_msg;

}
}
} else {

$raw_name = '';
$raw_phone = '';
$raw_email = '';;
$raw_more = '';

}

form.tpl.php:
" method="post">

For more information about our services, please fill out this form with details
of your inquiry. And don't worry... your information will not be given out to any
other party.

<?php if (!empty($msg)) { ?>

Whoops! There was a problem processing your request, so please review
the messages below.

<?php foreach ($msg as $text) { ?>

• <?php echo $text; ?>

<?php } ?>

<?php } ?>

I think I fixed it! I'm not sure why this would have affected it, but here's what it appears to have been:

The last line in form.tpl.php was this:

And I changed the "alt" to this:

Strange... I thought the "alt" could say anything, really. But I guess not! If someone could explain this to me, I'd appreciate it.

That aside, everything is now working perfectly... I just have three last questions...

1) When the user forgets to fill in a mandatory field, the error message comes up and correctly displays what error was made ~ this is good. The only thing I don't like, is that the original message is still displayed above the error message. How would I adjust it so that when an error is made, the error message replaces the original message?

2) Chris S. ~ Out of the code samples that you offered, it appears that in this example I'm using the following files:
contact.php
include/contact.php
include/form.tpl.php
thankyou.php

And it appears I'm not using the following files:
include/common.php
include/functions.php
include/mysql.class.php

I'm assuming that the three other files are used for other things in PHP, in which case I'll move them to a separate folder and not have them uploaded in the same spot as the contact-related ones. Would this be correct?

3) Also for Chris S. ~ Within those three extra files, can I create a login and password system for clients within an area of my site? That's something I'd like to look into, for which I would start a new and separate thread.

alt change ... that wasn't the problem. maybe something else you did fixed the error.

1 ... what is the original message?

2 ... common.php and functions.php are being used - try taking them out and see what happens . Take a look at the function names in those files and the functions used in the code in the other files. If you don't have a connection to a mysql db, then mysql.class.php is not being used. If you remove the file, you also need to remove the include/require reference to it.

3 ... no.

When you first visit the contact page, it says,

(title) Contact Us

(1st paragraph) "Why not? You're got nothing to lose. Estimates are always free, blah blah blah..."

(2nd paragraph) "For more information about our services, please fill out this form with details of blah blah blah..."

Then if you don't correctly fill in the page, you get all of the above info plus my error message beneath all of that.

(error message) "Whoops! There was a problem processing your request, so please blah blah blah".

When the form is not properly filled in, I would prefer that you only get the title and the error message.

contact.php:



include/contact.php:
<?php
/*
* contact us form processor script
*
* @original author christopher smith
* @date 2007-06-25
*
* (c)2007 Jalakai Designs
*/
if (!defined(_JALAKAI_) && !_JALAKAI_) die();

define('DEBUG',false);
define('_DB_',false);
define('_REDIRECT_',true); // for success - set to true to redirect, false to return to the same page

// email addresses to receive notification of an inquiry
$notify_addresses = array('[email protected]');
$notify_subject = '%s - Customer Inquiry';

// admin/support email address
$email_admin = '[email protected]';

// email addresses from the following services will trigger an error,
// the list will be used in a preg function, escape any special characters
// use an empty array, "$banned_domains = array();" to exclude noone.
$banned_domains = array('gmail','googlemail','hotmail','yahoo','aol');


// DB configuration
if (_DB_) {
define('_DB_CONNECTION_','db');
define('_DB_TABLE_','contact');
}
if (_REDIRECT_) {

$host = $_SERVER['HTTP_HOST'];
$path = rtrim(dirname($_SERVER['PHP_SELF']), '/\\');
$page = 'thank_you.html'; // set to redirect page name

$redirect_uri = "http://$host$path/$page";
}

require_once (dirname(__FILE__).'/common.php');
require_once (dirname(__FILE__).'/functions.php');

$error = false;
$msg = array();
global $highlight; $highlight = array();
$internal_error_msg = 'There was an internal error while processing your request. Please try again later. If the problem persists, please contact customer service at '.$email_admin.'.';

if ($_SERVER['REQUEST_METHOD'] == 'POST') {

$raw_name = cleanInputString('name');
$raw_company = cleanInputString('company');
$raw_phone = cleanInputString('phone');
$raw_email = cleanInputString('email');
$raw_website = cleanInputString('website');
$raw_more = cleanInputString('more_info');

// create variables to hold data for insertion into the db and notification message text
$insert = array();
$message = '';

if (empty($raw_name)) {

$error = true;
$msg[] = 'Please provide your name.';
$highlight[] = 'name';

} else if (preg_match('/[[:cntrl:]<>]/',$raw_name)) {

$error = true;
$msg[] = 'Illegal characters detected in name.';
if (preg_match('/[[:cntrl:]<>]/',$raw_name)) $highlight[] = 'name';

} else {

$insert['name'] = $raw_name;
$message .= "Name: {$raw_name}\n";

}

// phone must exist
if (empty($raw_phone)) {

$error = true;
$msg[] = 'The phone number is missing.';
$highlight[] = 'phone';

} else if (preg_match('/[[:cntrl:]<>]/',$raw_phone)) {

$error = true;
$msg[] = 'Illegal characters detected in phone number.';
$highlight[] = 'phone';

} else {

$insert['phone'] = $raw_phone;
$message .= 'Phone: '.$raw_phone."\n";

}

// email must exist and be valid
if (empty($raw_email) || !isValidEmail($raw_email)) {

$error = true;
$msg[] = 'The email address is missing or invalid.';
$highlight[] = 'email';

} else {

$insert['email'] = $raw_email;
$message .= 'Email: '.$raw_email."\n";

}

if (empty($raw_more)) {

$error = true;
$msg[] = 'Please tell us the nature of your inquiry.';
$highlight[] = 'more_info';

} else if (preg_match('/[\x01-\x08\x0b\x0c\x0e-\x1f]/',$raw_more)) {

$error = true;
$msg[] = 'Illegal characters detected in Inquiry Detail.';
$highlight[] = 'more_info';

} else {

$insert['more_info'] = $raw_more;
$message .= "\nInquiry Detail\n==========================\n".$raw_more."\n";

}

if (!$error) {

if (_DB_) {
require_once (dirname(__FILE__).'/mysql.class.php');
$db = new db();
$db->connect(_DB_CONNECTION_);

$ok = $db->insert(_DB_TABLE_,array($insert));
} else {

$ok = true;

}

// send notification email
if (!empty($notify_addresses)) {
// determine topic from calling page
$topic = ucwords(strtr(substr(strrchr($_SERVER['PHP_SELF'],'/'),1,-4),'-_',' '));
$message = $topic."\n====================\n\n".$message;
$notify_subject = sprintf($notify_subject, $topic);

$from = "{$insert['name']} <{$insert['email']}>";
$mail_ok = notify($notify_addresses,$notify_subject,$from,$message);
}


if ($ok) {

if (_REDIRECT_) {
header("location: {$redirect_uri}");
exit();
} else {
$notification_success = true;

$raw_name = '';
$raw_phone = '';
$raw_email = '';
$raw_more = '';

}

} else {

$error = true;
$msg[] = $internal_error_msg;

}
}
} else {

$raw_name = '';
$raw_phone = '';
$raw_email = '';;
$raw_more = '';

}

include/form.tpl.php:
" method="post">

For more information about our services, please fill out this form with details
of your inquiry. And don't worry... your information will not be given out to any
other party.

<?php if (!empty($msg)) { ?>

Whoops! There was a problem processing your request, so please review
the messages below.

<?php foreach ($msg as $text) { ?>

• <?php echo $text; ?>

<?php } ?>

<?php } ?>

Sorry, just clarifying before I look at the PHP which I'm new too

So you want a loop that looks at the fields. If none of them are NULL then it prints the message. Otherwise it goes to another loop that works out which fields were incorrectly filled in and prints out the relevant message. That's right isn't it?

Psuedo Code

If All fields correct

Print Messages

Else

For (counter incrementing through fields)

If field(counter) is incorrect
Print message(counter) - Already defined by you

End For loop

End If loop

Would that not work?

If all fields are correctly filled in, then you're directed to the "thank you" message and the info is sent to me.

If some necessary fields are missing, then you get an error message... which also lists what you're missing. Only once it's properly completed will you reach the "thank you" message and the info is sent.

I've been looking at all of the "if's" and "for's" and "else's" in the code, but am lost as to what to adjust.

Burlster: please don't reply when you don't know the answer, its likely to be more confusing to others than helpful.

Below is corrected snippet.

<?php if (empty($msg)) { ?>

For more information about our services, please fill out this form with details of your inquiry. And don't worry... your information will not be given out to any other party.

<?php } else { ?>

Whoops! There was a problem processing your request, so please review the messages below.

<?php foreach ($msg as $text) { ?>
• <?php echo $text; ?>
<?php } ?>

<?php } ?>

Lambinastormtroopersuit, I think you really need to put sometime into learning some basic PHP and programming. Your recent questions are extremely elementary. The fact you have to ask them to me means you really shouldn't be dealing with PHP for a production site.

Chris, a sincere thanks to you for all of your help ~ I'm sure it's been tedious at times. As mentioned at the start of the thread, I am 100% brand new to PHP, so I guess that's why some of my questions were pretty elementary.

I wanted to get a submit form up on my site so that I could remove my phone number and address... fairly understandable since I work from home. I'm certainly not yet selling myself as a PHP programmer... as you pointed out, there is a great deal I still have to learn before I can confidently offer that kind of service to clients.

I have picked up a book on PHP & MySQL ~ I plan to continue learning through this. It's going to be much easier for me to learn and understand since I now have my own working version to look at and study, and I can make copies to tear apart and play with as needed.

I do think you're right though... now that I've got one good sample under my belt, I'll spend some time studying and learning more before I tackle the other PHP-piece that I'd like to have on my site (an area with login and password for clients). You gave me a fantastic head start, and I did learn a huge amount from you. Even though you wouldn't have been aware, I did manage to solve a few problems by myself within the PHP code without having to ask for help... this is a clear indication to me that I did come out of this with some form of new knowledge and understanding of the topic. So thank you again ~ your patience and generosity with code samples was absolutely stellar. It's very highly appreciated!