Jump to content
XCOMUFO & Xenocide

Task #254 - Contact Formular


Mad

Recommended Posts

What do you mean? I just took the Downloads page design and went from there.

Oh, there is a contact form in the SVN already, but it's butt ugly... (the one I mentioned above) :)

And by one coloured background I mean, that it somehow doesn't fit the site design to have a monochrome surface this big. Maybe (and I have absolutely no clue how or I would've tried myself) you could use the darker green to make dark green stripes on the right and left side of "name" and "email"?

Link to comment
Share on other sites

Like this?

Not what I had in mind, but not bad at all.... Maybe you could add grey stripes over the green ones to have it similar to the news?

So, just to give some input; I first was thinking of sth. like this: xeno_contact.gif (It's a bad concept, but I'm sure you'll get the point.) I don't know if /think that mine is better, only to give you some input. :)

Edited by Mad
Link to comment
Share on other sites

none of them correctly follows the style guides set out in the site as a whole. SupSuper, your first concept has good layout and is pretty close just needs the header and body styling like the other pages. Edited by Vaaish
Link to comment
Share on other sites

Agreed to the not following the style guides, but maybe you could point out what's not making it fit? Not agreed to the good fitting of the first draft. I still think it's too monochrome. Doesn't fir the otherwise professional look of the page (no offense SupSuper, I think you're doing a great job).
Link to comment
Share on other sites

Guest Azrael

The style is what we make it to be, and the first one looks way too empty, and honestly, I don't see how Mad's sample or SupSuper's second shot don't fit the style, IMHO those fit the style perfectly and look great, which is what we ultimately want, no? professional and good look.

 

Way to go, Sup =b I say we keep the second one.

Link to comment
Share on other sites

@Mad: You mean like this?

xenocide_contact3a.gif

 

@Vaaish: I don't get what you mean by the "header and body styling".

 

Anyways, tweaked the design some more:

xenocide_contact3b.gif

I wouldn't have gone with the green stripes that thick, but only with the height of the text box, but I don't htink this matters anymore, because I just love the other one! Great job! What do you others think?

 

Edit: Maybe the send button could be on the right side? now it feels all very left-aligned...

Edited by Mad
Link to comment
Share on other sites

  • 3 weeks later...
  • 4 weeks later...

Whoops, forgot about this. Sorry about that, I had to make a website for a customer and that threw me off. You don't wanna know what it's about, trust me...

 

I think making the button right-aligned would just throw people off since everything else is left-aligned.

 

Anyways, I tried to post my work but I can't seem to post any attachments nor do I have access to the Assets SVN, so I'll just post the code here in case I forget again:

 

contact.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Project Xenocide - Main Layout</title>
<link href="xenocide.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
 <div id="logo"></div>
 <div id="menu">
<a href="http://www.projectxenocide.com/index.html" id="menu-home"></a>
<img src="images/menubrea.gif" alt="" />
<a href="" id="menu-downloads"></a>
<img src="images/menubrea.gif" alt="" />
<a href="http://docs.projectxenocide.com/index.php/General:FAQ" id="menu-faq"></a>
<img src="images/menubrea.gif" alt="" />
<a href="http://docs.projectxenocide.com/index.php/General:Recruiting_Process" id="menu-join"></a>
<img src="images/menubrea.gif" alt="" />
<a href="http://www.xcomufo.com/forums/index.php?showforum=258" id="menu-forum"></a>
<img src="images/menubrea.gif" alt="" />
<a href="mailto:[email protected]" id="menu-contact"></a>
<img src="images/menubrea.gif" alt="" />
<a href="http://www.projectxenocide.com/art_recent_add.html" id="menu-gallery"></a>
 </div>
 <div id="status">
<div id="status-header"><a href="#">archive</a></div>
<div id="status-body"></div>
<div id="status-build">
  <a href="http://www.projectxenocide.com/download/xenocide.update.728.torrent" id="link">Progress Release 728</a><br />
  20 Nov 2005</div>
 </div>
 <div id="bar">
<div id="image"><span>image</span></div>
<div id="login">
  <div id="login-body">
	username:<br />
	<input name="username" type="text" class="text"/><br />
	password:<br />
	<input name="password" type="password" class="text"/><br />
	 <br />
	<input name="submit" type="button" value="log in" class="submit"/>
	  <a href="#">lost password?</a>
  </div>
  <div id="login-bottom"><span>1</span></div>
  <div id="login-corner"><span>1</span></div>
</div>  
<div id="paypal">
  <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
	<input type="hidden" name="cmd" value="_xclick"/>
	  <input type="hidden" name="business" value="[email protected]"/>
	<input type="hidden" name="item_name" value="Project Xenocide"/>
	<input type="hidden" name="item_number" value="micahdg"/>
	<input type="image" src="./images/paypal00.gif" name="I1" alt="Make payments with PayPal - it's fast, free and   	secure!"/>
  </form>
</div>  
 </div>
 <div id="main">
<div id="h-bar"> </div>
<div id="body">
<div id="news-text">
<?php
if($_POST[action] == 'send') {
if ($_POST[omgname] == '' && $_POST[omgname] == '' && $_POST[omgname] == '')
	echo 'Umm... have you considered, oh, I don\'t know... filling out the form?';
if ($_POST[omgname] == '')
	echo 'We don\'t take nameless people, it makes it harder to mention them.';
else if ($_POST[omgmail] == '')
	echo 'No e-mail, no contact.';
else if ($_POST[omgtext] == '')
	echo 'Yeah... if you wanna contact us, how about telling us why?';
else if (strpos($_POST[omgmail], '@') === false || strpos($_POST[omgmail], '.') === false)
	echo 'Who are you trying to kid? That\'s not a valid e-mail address.';
else {
	mail('[email protected]','Xenocide Email Contact Request',strip_tags($_POST[omgtext]),"From: {$_POST[omgname]} <{$_POST[omgmail]}>");
	echo 'E-mail sent. Thank you for contacting us.';
}
} else {
?>
Leave a message after the beep.
</div>
<form action="contact.php" method="post">
<div id="news-title">Name:</div>
<div id="news-text"><input type="text" name="omgname" class="text" /></div>
<div id="news-title">E-mail:</div>
<div id="news-text"><input type="text" name="omgmail" class="text" /></div>
<div id="news-title">Text:</div>
<div id="news-text"><textarea name="omgtext" class="textbox" /></div>
<div id="news-title"><input name="action" type="submit" value="send" class="submit"/></div>
</form>
<?php
}
?>
</div>
<div id="footer">
  <div id="footer-left"><span>1</span></div>
  <div id="footer-body">© 2005 Project Xenocide</div>
  <div id="footer-right"><span>1</span></div>
</div>
 </div>
</div>
</body>
</html>

 

xenocide.css

#container #main #body input {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #666666;
border: 1px solid #404040;
}
#container #main #body textarea {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #666666;
border: 1px solid #404040;
}
#container #main #body .text {
width: 200px;
}
#container #main #body .textbox {
width: 300px;
height: 150px;
}
#container #main #body .submit {
height: 20px;
}

Link to comment
Share on other sites

Supsuper, could I use your code? I could experiment on it, and in case I am very lucky (yeah, as if...) I may even improve it a bit or add some functionality. I have some ideas in mind...

 

And, if I could possibly post a question, what do you think is preferrable: Make the code work in 1 .php file, or split it in 2 (i.e. contact.php and process.php)? I tried to do the latter, the code was supposed to work, but unfortunately it didn't work on my localhost site. I guess it was my computer's configuration to blame, although I don't know what was messed-up....

Link to comment
Share on other sites

Go right ahead. It's nothing more than using the mail() function and verifying the form values.

 

Depends on your preference, really, since I've used both methods. Most people use a separate file to keep the PHP and form separate, and thus keep things more organized, but if it's not a lot of code I just get lazy and put it all in one.

Link to comment
Share on other sites

Nice script! There were some problems which the page, as you can see in this picture (that's how the page is rendered in my browser).

 

One is because you wrote "img src="images/menubrea.gif" alt="" />" instead of "images/[b]menubrea[u]k[/u].gif[/b]". No major problem of course :).

 

Concerning the weird php stuff, maybe it's a problem with my php configuration/installation...? Anyway, the code seems valid, so I will add my little contribution and post it here, although I won't be able to test it :(

 

It will probably be ready in 1-2 hours, otherwise I'll post it tomorrow

 

Edit #1: In addition:

 

* if ($_POST[omgname] == '' && $_POST[omgname] == '' && $_POST[omgname] == '')

 

should probably be

 

* if ($_POST[omgname] == '' && $_POST[omgmail] == '' && $_POST[omgtext] == '')

 

right? And why the "omg"-prefix? :wacko: Easter egg? :)

 

Edit #2: Look at this capture. The code seems to break at the point where the pointer is located. I cannot understand why! :'(

 

Anyway, here is my version of the code. Fixed the 2 minor issues above, turned the "$_post..." variables into standard "$..." variables and added a better (?) email-validation function. What do you think?

Supsuper, no offense, I don't want to contend against you or anything, I am just an amateur willing to try, improve his own skills and help :)

 

Edit #3: Code fixed!

 

Project Xenocide - News

<!--

.style1 {color: #6D9E41}

-->

 

 

Progress Release 728

 

20 Nov 2005

 

image

username:

 

 

password:

 

 

 

 

  lost password?

1

1

 

 

Leave a message after the beep.

 

Name:

E-mail:

Text:

 

<?php

// This function tests whether the email address is valid

function isNotValidEmail($email){

$pattern = "^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$";

 

if (eregi($pattern, $email)){

return false;

}

else {

return true;

}

}

 

$omgname = $_POST[omgname]

$omgmail = $_POST[omgmail]

$omgmsg = $_POST[omgmsg]

 

if($_POST[action] == 'send') {

if ($omgname == '' && $omgmail == '' && $omgmsg == '')

echo 'Umm... have you considered, oh, I don\'t know... filling out the form?';

else if ($omgname == '')

echo 'We don\'t take nameless people, it makes it harder to mention them.';

else if ($omgmail == '')

echo 'No e-mail, no contact.';

else if ($omgmsg == '')

echo 'Yeah... if you wanna contact us, how about telling us why?';

else if (isNotValidEmail($omgmail))

echo 'Who are you trying to kid? That\'s not a valid e-mail address.';

else {

mail('[email protected]','Xenocide Email Contact Request',htmlspecialchars($omgmsg),"From: {$omgname}, {$omgmail}");

echo 'E-mail sent. Thank you {$omgname} for contacting us.';

}

}

?>

 

Edited by kafros
Link to comment
Share on other sites

Nice script! There were some problems which the page, as you can see in this picture (that's how the page is rendered in my browser).

 

One is because you wrote "img src="images/menubrea.gif" alt="" />" instead of "images/[b]menubrea[u]k[/u].gif[/b]". No major problem of course :).

 

Concerning the weird php stuff, maybe it's a problem with my php configuration/installation...? Anyway, the code seems valid, so I will add my little contribution and post it here, although I won't be able to test it :(

 

It will probably be ready in 1-2 hours, otherwise I'll post it tomorrow

 

Edit #1: In addition:

 

* if ($_POST[omgname] == '' && $_POST[omgname] == '' && $_POST[omgname] == '')

 

should probably be

 

* if ($_POST[omgname] == '' && $_POST[omgmail] == '' && $_POST[omgtext] == '')

 

right? And why the "omg"-prefix? :wacko: Easter egg? :)

 

Edit #2: Look at this capture. The code seems to break at the point where the pointer is located. I cannot understand why! :'(

 

Anyway, here is my version of the code. Fixed the 2 minor issues above, turned the "$_post..." variables into standard "$..." variables and added a better (?) email-validation function. What do you think?

Supsuper, no offense, I don't want to contend against you or anything, I am just an amateur willing to try, improve his own skills and help :)

Ohhh, another Dreamweaver user. :)

Thanks for fixing up the code, I didn't really gave it a second look since I just had it lying around and didn't have a testing server to try it out on. So I posted it before I forgot again. :blush1:

 

The images links were broken since I made the page by saving one of the Xenocide ones through the browser and then I tried to fix up all the links before I posted, guess I missed those. :Blush:

 

The "omg" is just a personal touch of mine, I don't like using common names since spambots easily abuse them. (I even go as far as using field names like "guy", "dude", "mailz0rz", "stuff", etc.) :P

Although if things get bad I use my random-number method, that seems to stop spambots on their tracks.

 

As for the textarea problem, it's because it should have a closing tag, guess I got it mixed up with the input tags. Just replace:

 

 

With:

 

Edited by SupSuper
Link to comment
Share on other sites

  • 2 weeks later...

Spotted another mistake:

 

In this line you use $mail: function isNotValidEmail($mail){

But in this one you use $email: if (eregi($pattern, $email)){

 

You gotta settle for one of the two. ;)

Link to comment
Share on other sites

Yikes! ^_^

Fortunately I wasn't hired for the job :P

 

Corrected, thanks Sup :)

 

Red Knight, Mad, what do you think?

 

Edit: In addition:

 

 

should be

 

 

And more importantly, I am afraid that the:

 

else if (isNotValidEmail($omgmail))

echo 'Who are you trying to kid? That\'s not a valid e-mail address.';

 

is working the opposite way than it should, or am I wrong?!

 

I've been confused since I learned about "return 0;", confusing the main() function with the other functions and arguments... argh!

Edited by kafros
Link to comment
Share on other sites

Sorry, its taken me some time to get back to this... this is what I mean by follow the header and style guides found throughout the rest of the site. Please ignore the font styles for the time being. I don't have the correct set for xenocide installed on this computer.

xenocide_contact2.jpg

Link to comment
Share on other sites

Yikes! ^_^

Fortunately I wasn't hired for the job :P

 

Corrected, thanks Sup :)

 

Red Knight, Mad, what do you think?

 

Edit: In addition:

 

 

should be

 

 

And more importantly, I am afraid that the:

 

else if (isNotValidEmail($omgmail))

echo 'Who are you trying to kid? That\'s not a valid e-mail address.';

 

is working the opposite way than it should, or am I wrong?!

 

I've been confused since I learned about "return 0;", confusing the main() function with the other functions and arguments... argh!

You wrote it, shouldn't you know? :P

And you made the function return true if the e-mail isn't valid, so it should work:

 

$pattern = "^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$";

if (eregi($pattern, $email)){
return false; // e-mail fits the pattern, therefore it's valid, therefore it isn't isNotValidEmail
}
else {
return true; // e-mail isn't valid, function returns true, therefore isNotValidEmail
}

 

Sorry, its taken me some time to get back to this... this is what I mean by follow the header and style guides found throughout the rest of the site. Please ignore the font styles for the time being. I don't have the correct set for xenocide installed on this computer.
Well when I did the body like that, people said it was boring. But I get what you mean by the header, I'll do that in a sec.
Link to comment
Share on other sites

  • 6 months later...

Project Xenocide - Contact form

 

 

Progress Release 728

 

20 Nov 2005

 

image

username:

 

 

password:

 

 

 

 

  lost password?

1

1

 

 

Leave a message after the beep.

 

Name:

E-mail:

Text:

 

<?php

 

function isNotValidEmail($email)

{

$pattern = "^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$";

 

if (eregi($pattern, $email))

{return false;}

else

{return true;}

}

 

$omgname = $_POST[omgname];

$omgmail = $_POST[omgmail];

$omgmsg = $_POST[omgmsg];

 

if($_POST[action] == 'send') {

if ($omgname == '' && $omgmail == '' && $omgmsg == '')

echo 'Umm... have you considered, oh, I don\'t know... filling out the form?';

else if ($omgname == '')

echo 'We don\'t take nameless people, it makes it harder to mention them.';

else if ($omgmail == '')

echo 'No e-mail, no contact.';

else if ($omgmsg == '')

echo 'Yeah... if you wanna contact us, how about telling us why?';

else if (isNotValidEmail($omgmail))

echo 'Who are you trying to kid? That\'s not a valid e-mail address.';

else {

mail('[email protected]','Xenocide Email Contact Request',htmlspecialchars($omgmsg),"From: {$omgname}, {$omgmail}");

echo "E-mail sent. Thank you $omgname for contacting us!";

}

}

?>

 

Edited by kafros
Link to comment
Share on other sites

If you don't name it "contact.php" it won't work because it's taken as a HTML file, not a PHP file. Plus the

points to "contact.php".

 

Also, you gotta add the new stylesheet lines to the main stylesheet (xenocide.css) for the formatting to work:

#container #main #body input {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #666666;
border: 1px solid #404040;
}
#container #main #body textarea {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #666666;
border: 1px solid #404040;
}
#container #main #body .text {
width: 200px;
}
#container #main #body .textbox {
width: 300px;
height: 150px;
}
#container #main #body .submit {
height: 20px;
}

 

Also, kafros forgot some semicolons here:

$omgname = $_POST[omgname];
$omgmail = $_POST[omgmail];
$omgmsg = $_POST[omgmsg];

 

Also, you might wanna change the title.

 

Also, you might wanna get rid of that useless

Edited by SupSuper
Link to comment
Share on other sites

Updated the code located 3 posts ago

 

php reminds me of C code, damn I have to study it well sometime REAL SOON, it'll be much easier now

 

 

Edit: corrected the respond for successful operation

Edited by kafros
Link to comment
Share on other sites

Works like a charm! :)

Just a cosmetic issue... :

E-mail sent. Thank you {$omgname} for contacting us.

 

edit: a respond page in webpage look'n'feel would be nice. And an automatic take back. :)

It would've been in look'n'feel if you had kept the PHP and HTML together like I did. :P
Link to comment
Share on other sites

Actually I tested it in my Xampp "enviroment" (excuse this wrong expression -.-) which I've installed in my Virtual Machine, and actually it prints the message on the same page, but in addition there are some weird black parts, probably wrong CSS or something 0_o, I'll post a screenshot tomorrow
Link to comment
Share on other sites

Works like a charm! :)

Just a cosmetic issue... :

E-mail sent. Thank you {$omgname} for contacting us.

 

edit: a respond page in webpage look'n'feel would be nice. And an automatic take back. :)

It would've been in look'n'feel if you had kept the PHP and HTML together like I did. :P

No, I tried this first, but it wasn't - though I have to say I didn't try this with the new version. Lemme check...

 

Edit: Ok, tried it, but obviously just pasting the code back in doesn't work. Don't have the time to check on this in depth right now.

Edited by Mad
Link to comment
Share on other sites

Well, the page is rendered well on Seamonkey but isn't on IE (both 6 and 7)... weird... 0_o

 

http://img386.imageshack.us/img386/4355/cap01gi2.th.png

 

In addition, why is the page kept as an html file and not as a php one? The second one works better imo, as it prints the message on the same page (although I want to use javascript and make a pop-up)

 

Btw, once you press "Send", the text fields clear, so I think I should add 2 "comments" on the right of the msg textarea:

 

1) A pop-up window will open informing you on the delivery-status

2) In case of an error, the fields will be cleared!

 

Edit: Btw, check the contact.php attached!! Works perfectly, has far more organised code and the "status" messages work well (you'll see what I mean ;) ). Btw, it sends mails to my email address, so no spamming please :P (I still haven't got over that insane night when I automatically subscribed to the canned ham thread during the spamrave... :Cry:)

Edited by kafros
Link to comment
Share on other sites

Guest
This topic is now closed to further replies.
×
×
  • Create New...