Help with PHP contact form

PHP
1

Hi guys,

I’ve just uploaded a new version of my site and there are a couple of slight problems with the contact form. I think both problems are due to the fact that I’ve gone for a single-page design that scrolls smoothly to the different sections using jQuery. Check out my site here:

Problem 1

When the form is completed and the user clicks the send button, the PHP reloads the page and displays a “Thank you <name>…” message. The problem is that because it’s a single-page design, the page is reloaded at the top, rather than displaying the “Thank you” message generated by the form.

What I need to happen is that when the contact form gets sent, the page gets reloaded with an “#contact” link in there somewhere, so that the user sees the contact form, rather than the top of the page. Is anyone able to suggest a solution?

Problem 2

When the contact form is sent, the string of data that the form sends is displayed in the URL (in the address bar). This isn’t a major problem, as all the links (to scroll to different areas of the page) still work fine - it’s just a little ugly and unsightly.

Again, I’m sure this is down to the single page design and how jQuery uses the hyperlinks to scroll the page, rather than displaying a new HTML page (and therefore displaying a new URL in the address bar).

If anyone can suggest fixes to either/both problems, that’d be much appreciated. Thanks.

2

Great - thanks for that. I’ll look into it. :slight_smile:

3

I see that your site is designed very nicely using Jquery. My suggestions for your problem:

  1. Use Ajax request to send contact request without reloading page and “Thank you” message can be displayed in DIV anywhere you want.

  2. Change the form method to POST: add method=“POST” to the form.
    <form id=‘contactForm’ action=‘index.php’> -> <form id=‘contactForm’ action=‘index.php’ method=“POST”> . Of course, if you use Ajax, users don’t see anything too.

Hope this help.

4

Sorry, previous example was not appropriated for you.
See http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/ instead.

5

Visit http://kevinhankens.com/content/ajax-jquery-wicked-easy-real for simplest example of Jquery Ajax.

6

Thanks for the suggestions, guys.

Use Ajax request to send contact request without reloading page and “Thank you” message can be displayed in DIV anywhere you want.

How do I use an AJAX request? I’m not familiar with that. It does make sense to put the message in a div which can be displayed at the top of the page, though.

Change the form method to POST: add method=“POST” to the form.

Thanks - I’ve done that and it’s hidden the code in the URL. Great stuff.

The simple solution to problem 1 is to have the form submit to index.php#contact.

I’ve done this too, and it also works. The only two slight drawbacks are a) the scrolling on page reload (I’d rather it just went straight to the section of the page, rather than scrolling to it), and b) the “index.php#contact” remains the main URL of the page. If the user was to send a message and then choose to bookmark the page, they’d always be taken to the contact form, instead of the main “home page” part. Does that make sense?

Also, if the person wanted to send a second message whilst on the site, they’d need to manually remove everything in the URL after the main domain name, or manually clear their browser cache in order to have the form reload. Again, I’m sure this is down to the fact I’m only using one page, but some sort of workaround would be great, if possible.

At the moment, the logo returns people to the top of the page. I considered adding a few “return to top” links down the page instead, and then changing the URL of the logo to my main domain name. This would then reload the page and also reload the contact form, although when you click the logo, it reloads the page (as expected, rather than scrolling neatly to the top). It’s possible I’m asking too much, but this seems a slightly less elegant solution than the one I’m after.

Again, thanks for your help - it’s already much better than it was, so thank you! :o)

7

The simple solution to problem 1 is to have the form submit to index.php#contact.