Forums

WindberTSA

Hey guys,

I created a contact form on the website I have. (http://windbertsa.com/contact.html) I do receive comments from this post(I think spam because its the same time everyday). But, the emails only display "Name: Email: Comments:" They do not show anything else.

I have a php file that looks like this:

/* Email Variables */
$emailSubject = 'Windber-tsa!'; /*Make sure this matches the name of your file*/
$webMaster = '***';

/*design by Mark Leroy @ http://www.helpvid.net*/

/* Data Variables */
$email = $_POST['email'];
$name = $_POST['name'];
$comments = $_POST['comments'];



$body = <<<EOD
<br>

Name: $name
Email: $email
Comments: $comments
EOD; $headers = "From: $email\r\n"; $headers .= "Content-type: text/html\r\n"; $success = mail($webMaster, $emailSubject, $body, $headers);

/* Results rendered as HTML */
$theResults = <<<EOD
<html>
<head>
<title>sent message</title>
<meta http-equiv="refresh" content="3;URL=http://windbertsa.com/contact.html">
<style type="text/css">

</style>
</head>

Your message has been sent successfully! Thank You for your message, We will respond promptly.

</div>
</body>
</html>
EOD;
echo "$theResults";
?>

And the form itself looks like this..

        <form id="contacts-form" action="Windber-tsa.php" method="get">
                         <div>
                            <label><input type="text" value="Your Name:" name="Your Name" id="name"/></label>
                            <label><input type="text" value="E-mail:"/ name="E-mail" id="email"></label>
                            <div class="textarea"><textarea cols="" rows="">Message:</textarea></div>
                            <div class="alignright"><a class="link1" href="http://windbertsa.com/contact.html" onclick="document.getElementById('contacts-form').reset()">Clear</a>&nbsp; &nbsp; &nbsp; <a class="link1" href="http://windbertsa.com/contact.html" onclick="document.getElementById('contacts-form').submit()">Send</a></div>
                         </div>
                      </form>

I just do not understand why I do not get other information with these messages. Any help would be greatly appreciated!

traq

You're trying to access POST indexes that don't exist (and, you never check to see if they exist or not).

  $email = $_POST['email'];
  $name = $_POST['name'];
  $comments = $_POST['comments'];

Whereas your form has the inputs Your Name, E-mail, and an unnamed textarea.

Give the textarea a name, and check when assigning your variables:

  <?php

  $email = empty( $_POST['E-mail'] )?
      'no email provided':
      $_POST['E-mail'];

  // etc.

WindberTSA

First of all, Thanks!

Where you have '$email = empty( $_POST ['E-mail'] )?'

Should that value, e-mail, match the name of its respectable form element?

tomrogers123

@WindberTSA Yes, the string parsed into a global should match the name attribute of the input in question. Just another note, the name and id on an input element should be exactly the same and match the for attribute on the label so that, when a user clicks a label, the cursor is placed in the corresponding field.

WindberTSA

@tomrogers123 So it should look like this?

                        <form id="contacts-form" action="Windbertsa.php" method="get">
                           <div>
                              <label for="Name"><input type="text" value="Your Name:" name="Name" id="Name"/></label>
                              <label for="E-mail"><input type="text" value="E-mail:"/ name="E-mail" id="E-mail"></label>
                              <div class="textarea"><textarea cols="" rows="" name="comments" id="comments">Message:</textarea></div>
                              <div class="alignright"><a class="link1" href="http://windbertsa.com/contact.html" onclick="document.getElementById('contacts-form').reset()">Clear</a>&nbsp; &nbsp; &nbsp; <a class="link1" href="http://windbertsa.com/contact.html" onclick="document.getElementById('contacts-form').submit()">Send</a></div>
                           </div>
                        </form>

tomrogers123

Yes, apart from the fact that the inputs shouldn't be inside the labels.

  <label for="Name">Name</label>
  <input type="text" value="Your Name:" name="Name" id="Name"/>
  <label for="E-mail">Email</label>
  <input type="text" value="E-mail:" name="E-mail" id="E-mail">
  <div class="textarea">
    <label for="comments">Comments</label>  
    <textarea name="comments" id="comments"></textarea>
  </div

WindberTSA

I'm not very good with forms or PHP. What does moving those labels and inputs do?

WindberTSA

Oh! That changed the way my form is displayed.. http://windbertsa.com/contact.html

It also changed the way the comment 'box' enlarges. Before the image for that box would move with the input area enlarging, now it doesn't enlarge..

tomrogers123

I know you probably don't want the labels to be shown but they need to be in the markup for accessability reasons. You could remove them from display with;

#contacts-form label {
  position: absolute;
  top: -99999px;
  left: -99999px;
}

As for getting the hint text inside the fields themselves, that's what the HTML5 placeholder attribute is intended for.

WindberTSA

Okay, So I applied that style that you recommended but now the blue input boxes I had set are only showing for the comment not for the name or email field.

WindberTSA

On another note, The form itself is not sending any emails now..

tomrogers123

Sorry about that, any chance of an updated demo so I can see the latest issue?

WindberTSA

Yeah, I uploaded the changes.. http://windbertsa.com/contact.html

tomrogers123

Due to the fact that you had the inputs inside of labels before, you're actually styling labels with styles that should be moved to inputs.As for the functionality, when did it stop working? Was it when you changed the PHP? If so, you need to make sure the method attribute on your form matches whatever you are using in PHP. If you have copied the code @traq suggested, you will need to change the method attribute in the markup to post so that they match.

WindberTSA

So, everywhere in the CSS styling that i have 'label' I need to have input? This form thing is very confusing to me.. thanks again for your help!

This is all the styling that I have applied to the form, or I guess previously applied..

    #contacts-form label { display:block; height:40px; background:url(../images/input.gif) no-repeat left top;} 
   #contacts-form label input { width:260px; padding:4px 4px 2px 5px; color:#0f181e; border:none; background:none;}
    #contacts-form textarea {width:260px; height:102px; padding:2px 4px 2px 5px; color:#0f181e; overflow:auto; background:none; border:none;}
    #contacts-form .textarea { background:url(../images/textarea.gif) no-repeat left top; width:270px; height:107px; margin-bottom:30px;}
    #contacts-form label { position: absolute; top: -99999px; left: -99999px; }

Well, the form never worked correctly to begin with, but it did send me messages without information. And This is what I have after changed what @traq suggested..

/* Email Variables / $emailSubject = 'Windber-tsa!'; /Make sure this matches the name of your file*/ $webMaster = 'BradyA.Sheehan@gmail.com';

/* Data Variables */

$email = empty ( $_POST['email'] )? 'no email provided': $_POST['E-mail'];

$name = empty ( $_POST['name'] )? 'no email provided': $_POST['name'];

$comments = empty ( $_POST['comments'] )? 'no email provided': $_POST['comments'];

$body = <<

Name: $name
Email: $email
Comments: $comments
EOD; $headers = "From: $email\r\n"; $headers .= "Content-type: text/html\r\n"; $success = mail($webMaster, $emailSubject, $body, $headers);

/* Results rendered as HTML */ $theResults = << sent message

Your message has been sent successfully! Thank You for your message, We will respond promptly.

EOD; echo "$theResults"; ?>

WindberTSA

I don't know why that font showed up so big, I apoligize..

Paulie_D

You have to highlight it and press the 'Code' option.

I fixed that bit

tomrogers123

So, if you're going to use @traq's code raw you need to change the method attribute on the form tag to "post" instead of "get".

I know you're having issues with styling but let's get the form working before worrying about that :)

traq

Just to clarify, there is nothing wrong with placing your inputs inside their labels - in fact, if you do, you don't need to use the for attribute. It's not very common practice, and, as you've seen, it does affect how you approach styling.

Also, sorry! I didn't notice earlier that you were using the GET method. POST is preferable, in this case. Say you have a form that looks like this:

  <form action="submit.php" method="post">
      <label>Your Name: <input name="name"></label>
      <label>Email: <input type="email" name="email"></label>
      <label for="message">Message: </label>
      <textarea name="message"></textarea>
      <input type="submit" name="submit" value="Submit">
  </form>

Your submit.php script might look something like this:

  <?php
  # only if the form was submitted
  if( !empty($_POST['submit']) ){

      # get submitted name
      $name = empty( $_POST['name'] )?
          'no name submitted':
          $_POST['name'];

      # get submitted email
      $email = empty( $_POST['email'] )?
          'no email submitted':
          $_POST['email'];

      # get submitted message
      $message = empty( $_POST['message'] )?
          'no message submitted':
          wordwrap( $_POST['message'],70 );

      # send email to:
      $to = 'you@example.com';

      # prepare email subject
      $subject = 'Someone submitted your form!';

      # prepare email body
      $body = <<< TEXT
  Name: $name
  Email: $email
  Message:
  ----------------------------------------
  $message
  TEXT
  ;

      # prepare email headers
      # the email IS NOT "from" the user, it's from your website.
      # saying it's "from" the user will get it caught by spam traps.
      $headers = "From: noreply@example.com\r\n";

      # send email
      if( mail( $to,$subject,$message,$headers ) ){
          print 'Thanks for sending your message!';
      }else{
          print 'There was a problem - please try again.';
      }
  }

Note that this is very basic, and doesn't even make any fields "required." You'd probably want to make sure that the "email" submitted is really an email address, that the message is not blank, etc.. But this is a solid base to start changing for your needs.

WindberTSA

So this is the form I have so far.. I uploaded it and it still doesn't seem to be working.

And I did change the Method to post.

                          <form id="contacts-form" action="Windbertsa.php" method="post">
                           <div>
                                <label for="Name">Name</label>
                  <input type="text" value="Your Name:" name="Name" id="Name" placeholder="Your name goes here.."/>
                 <label for="E-mail">Email</label>
                  <input type="text" value="E-mail:" name="E-mail" id="E-mail" placeholder="Your e-mail goes here..">
                  <div class="textarea">
                  <label for="comments">Comments</label>  
                  <textarea name="comments" id="comments"></textarea>
                  </div>
                              <div class="alignright"><a class="link1" href="http://windbertsa.com/contact.html" onclick="document.getElementById('contacts-form').reset()">Clear</a>&nbsp; &nbsp; &nbsp; <a class="link1" href="http://windbertsa.com/contact.html" onclick="document.getElementById('contacts-form').submit()">Send</a></div>
                           </div>
                        </form>

This is the PHP file that I have so far..

<?php
  # only if the form was submitted
  if( !empty($_POST['submit']) ){

      # get submitted name
      $name = empty( $_POST['name'] )?
          'no name submitted':
          $_POST['name'];

      # get submitted email
      $email = empty( $_POST['email'] )?
          'no email submitted':
          $_POST['email'];

      # get submitted message
      $message = empty( $_POST['message'] )?
          'no message submitted':
          wordwrap( $_POST['message'],70 );

      # send email to:
      $to = 'you@example.com';

      # prepare email subject
      $subject = 'Someone submitted your form!';

      # prepare email body
      $body = <<< TEXT
  Name: $name
  Email: $email
  Message:
  ----------------------------------------
  $message
  TEXT
  ;

      # prepare email headers
      # the email IS NOT "from" the user, it's from your website.
      # saying it's "from" the user will get it caught by spam traps.
      $headers = "From: noreply@example.com\r\n";

      # send email
      if( mail( $to,$subject,$message,$headers ) ){
          print 'Thanks for sending your message!';
      }else{
          print 'There was a problem - please try again.';
      }
  }

nordstromdesign

Your $_POST names must match your input names.

If the input name is "Name" then your POST name must be $_POST['Name'] and if your email input name is "E-mail" then your POST name needs to be $_POST['E-mail'] and so on.

WindberTSA

Okay, I think I fixed that as well. I uploaded the changes and tried to comment on it again, but it appears as though I am still not receiving the message..

nordstromdesign

Your initial check of seeing whether the $_POST['submit'] !empty will always be false with the way your form is setup. Instead of using "a" elements to submit the form use

<input type="submit" name="submit" value="Submit" />

and then style to submit button to suite your design.

traq

...or, use

  if( !empty( $_POST['message'] ) )

instead.

Nothing against this forum, or codepen, but neither are suitable for sharing more than a few lines of PHP code. I suggest creating a gist on github.

You can fork this if you want to edit it. The only thing I changed is the if check and the POST index names (so they match your input names).

WindberTSA

I forked it, and its located here https://gist.github.com/windbertsa/4985808 I changed the first statement for the way it initially submits it to match the way I had the form set up( I suppose that will save me a little bit of time in the future with styling the buttons and things)

In my text editor, it keeps saying that I have an error on line 38, which is where the if( mail( $to,$subject,$message,$headers ) ){ line is..

I did upload the changes I made again, the form is still appearing to have problems.

And thank again for all of your help!

WindberTSA

I keep trying to go through the php file, but I can't figure out what would be wrong. Everything matches the form and it's just like @traq posted, so I don't understand why the message isn't sending.

traq

In my text editor, it keeps saying that I have an error on line 38, which is where the if( mail( $to,$subject,$message,$headers ) ){ line is..

What is the error?

edit
It should be $body, not $message. Sorry about that

  if( !empty( $_POST['message'] ) )

You have no form element named message. After your form is submitted, $_POST will contain three indexes: Name, E-mail, and comments.

WindberTSA

I changed that to $body. I haven't done much at all with PHP and in dreamweaver it didn't show me what the error was, just highlighted that section..

And okay, I think I finally understand the $_POST part! I changed $message to $comments. And I uploaded the changes again. I don't seem to have received an email after sending it..

If I am not receiving the print after submitting the post, is that an indicator something before that in the code isn't executing correctly?

On a side note, I'm not sure how to highlight code elements in yellow like you do..

traq

On a side note, I'm not sure how to highlight code elements in yellow like you do..

`this` → this
it's markdown, baby!

in dreamweaver it didn't show me what the error was, just highlighted that section..

ugh... no offense. You need a code editor for writing code, which Dreamweaver is not. (You might look at something like komodo.) Try it on a real server, and make sure error reporting is enabled -

  <?php
  error_reporting( -1 );
  ini_set( 'display_errors',1 );

  # rest of code here

If I am not receiving the print after submitting the post, is that an indicator something before that in the code isn't executing correctly?

Right - that would indicate that code execution does not reach the point where it tries to send the mail. If it did, then you'd get either the "Thanks" or "Problem" message. Two possibilities:

... you're not entering the initial if( !empty( $_POST['comments'] ) ) block

... you're encountering a fatal error before the call to mail() is complete

If it's the latter, then setting error reporting should tell us so. During development, it's always a good idea to make sure you see every last error. During production, it's a good idea to hide them (from the public; you should still keep an eye on your error logs).

WindberTSA

Okay, so this would create that effect.

You need a code editor for writing code, which Dreamweaver is not. (You might look at something like komodo.)

I am downloading komodo and I will try it out :) I am not sure how that will effect what I am used to. I do not use like the WYSISYG feature of dreamweaver, I just liked the way it was set up for managing all the files, the code hints, and the design view can show me a lot of what I am doing before I have to preview it in multiple browsers(My High School uses it and it seemed like a good idea).

Try it on a real server,

What do you mean by real server? I have been uploading the changes to my iPage hosting and testing the post on the actual web page..

I added that Code snippet for the error reporting and that block matches up. What I have on the https://gist.github.com/windbertsa/4985808 is exactly what I have in the PHP file.

If it's the latter, then setting error reporting should tell us so.

How will it 'tell' me what the error is?

WindberTSA

In komodo, it says "Parse Error: syntax error, unexpected $end " on last line..

tomrogers123

I think it's a trifle unfair to brand DreamWeaver as not being a code editor. It is a code editor but just also happens to have a ton of extra bloat. Even for people who just use the coding portion, it does bring some niceties such as the fact that every file can be configured as part of a "site" (making the application aware of its relationship with other project files and thus allowing for automatic updating of file paths if one is moved). It can also be used as a "live FTP editor" - although this may no longer be thought of as a good thing it gives the user the option.

I'm not one of those Adobe diehards (I use and love Sublime Text ) but I think it does have some merits and doesn't always deserve the negative old-school stereotype it has in our industry. You should try alternatives and then just use whatever makes you most productive.

WindberTSA

@tomrogers123 That is what I have liked about DreamWeaver,(Granted I havent' really used anything else) but I like that I can see all the files together and work with them as a whole.

And I have uploaded the files to the site again, and again it appears to not be printing and I do not appear to be receiving the mail either..

tomrogers123

I don't know how @traq would feel about this but I personally think the easist way for us to sort this out would be for you to upload a zip somewhere with everything in it so we can put it on our own test environments and play around with it until it works (and then tell you what the problems were). At this stage, I think your headaches probably come from multiple sources and it would be easier to figure out what's happening if we had some context. That way, we won't be back and fourth with suggestions that make no difference.

traq

What do you mean by real server? I have been uploading the changes to my iPage hosting and testing the post on the actual web page..

I thought you might have been "previewing" it in DW. If you're testing on your actual server, that's great.

How will it 'tell' me what the error is?

It will print any errors to the screen (unless your host is over-zealous about hiding them - in which case, you'll need to talk to them about where your error logs are).

In komodo, it says "Parse Error: syntax error, unexpected $end " on last line..

I don't get that error when I view your gist in komodo. I don't get any errors at all; I can run it just fine. Later today I will recreate your form and test the whole thing.

@tomrogers123 if you want to try it out, you can clone (or download as a zip) from @WindberTSA's gist.

I will try my best not to sound like I'm "bagging" on Dreamweaver. I have used it (FrontPage, too, *shudder*), and my thoughts here are based on legitimate concerns.

I just liked the way it was set up for managing all the files, the code hints, and the design view can show me a lot of what I am doing before I have to preview it in multiple browsers

Other editors can do project management and code hints (obviously, a lot better, if DW couldn't tell you what the error actually was).

DW's "design view" is a trap - no browser uses the same rendering engine as DW, so your results there are completely useless. Even adobe says:

Design view gives you an idea of how your page will look on the web but does not render pages exactly as browsers do.

Even with something like notepad, you can preview your page in real browsers, which is far more beneficial. If you want to develop with PHP, install PHP (it's not hard) and work with it locally.

@tomrogers123 - I agree that DW can be useful in some situations. In my experience, it's more of a hindrance than a help. I spend a lot of time helping people "clean up" after DW/FP/etc. sites.

tomrogers123

@traq I was suggesting that we see the entire page (not only the form).

WindberTSA

Thanks again for all of your help. If there is somewhere that either of you would like me to upload the files to so that you can download them, I am glad to oblige.

I figured out where the error logs are, and I could not find any error reports related to this PHP document. I did find many errors but they appeared to be in relation to documents I am not aware of. Like a member.php file, an index.php, a login.php. None of which I have created..

traq

You can add other files to your gist, too. When you start [edit] mode, a button to add files appears.

traq

Okay -

The code works for me if you use an actual Submit button. I'm not sure why the javascript .submit isn't working, but unless you really need it for some reason, I'd suggest not using it anyway.

WindberTSA

Okay, that's great! I'm very curious why the javascript isn't working. Did you make a gist of what you did to get it to work?

<input type="submit" name="submit" value="Submit" />

Is this what the button should be like if I don't use the javascript?

And does that change the first statement of the php file if( !empty( $_POST['comments'] ) )?

traq

yes (here)

yes

no

:)

CrocoDillon

JavaScript might fail (absolutely didn't test this at all) because it's on a link. I'm not suggesting you should stick to JS (I'm with @traq on this one, use a normal submit) but this could have worked: onclick="document.getElementById('contacts-form').submit();return false;", preventing the link to get followed.

tomrogers123

I'm also with @traq on this one, but, even if you were going to go the JavaScript link route, it'd probably be best in a seperate file (not straight in the markup). @WindberTSA: is this solved for you now then?

WindberTSA

Thanks so much, I uploaded it and it works! It's not a big deal if I do not use the JS, I can't believe it is what caused all these problems.

The only question I have is, how can I change the way that it prints the message saying that it was submitted.. I would really like it to not redirect to a new page, and if it does redirect, time out(?) somehow so that it then takes you back to that page.

traq

You can put whatever you like in that block. Just replace the "Thanks" message with whatever text/html/redirect you like. If you want to display a message briefly and then redirect (I think that's what you're asking?), you can use header(). Can you explain exactly what you want to happen?

WindberTSA

I am sorry if I was a little vague. I would like, ideally, for a box to pop up (as a different page overtop of the current page) and prompt the user that their message was sent successfully.

edit And that box then, after a few seconds disappears and the current page refreshes to now show their already sent message anymore.

traq

Sounds like you want AJAX with a modal window.

You don't need to change your code at all; just how you send and receive it from your server. Is your page using jQuery? There are several modal plugins for jQuery that support ajax. Colorbox is one of my favorites, but look around.

WindberTSA

Sorry I didn't respond sooner, things have been crazy. But yes, I would like a modal window or a dialogue box(?) if that would work. I don't think my page is using jQuery, I have had trouble trying to install the UI to my resource location correctly. Is there a way to do it without jQuery?

treehouse : what would you like to learn today?

Forums

[Solved] Contact Post not displaying information