Continues From Part 1.
First of all when you save your contact form, save it as a PHP file not an HTML. My example is demoMain.php not the demoMain.html. You need two more PHP files.
- First, a file to inform and thanks the sender of the message.
- I call this demoThanks.php.
- Second, a file that informs you of the sender's address and content of their message.
- I call this demoPoster.php file.
- It is a good manner to send back content of the message to the visitor as a courtesy if he likes to archive it for himself and inside the demoPoster.php I put this in practice, too.
Let me show you the elaborate page I created as a thank you message for the visitor.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the template in the editor. --> <html> <head> <title>Phoenix Thanks for Your Message</title> <meta charset="UTF-8" > <meta name="viewport" content="width=device-width" > <link rel="stylesheet" type="text/css" href="/MP_Master.css" /> </head> <body> <div style='padding-left: 10px; background-image: url("/Images/Themes/bg_home.jpg");' class="MP_Page_Left Zone_Page_L"> <img src="/Images/Logos/phoenix.jpg" alt="Phoenix" /> <p>By <a href="http://messiahpsychoanalyst.org" class="MP_LinkStyle">Dysprosium</a></p> <hr style='margin: 1px auto 1px auto; height: 1px; color: #fefefe; width: 82%;'/> <h1>Your message has been sent! Thanks for Your Message!</h1> <p><a href="Home.html" class="MP_LinkStyle">Back to Home Page!</a></p> </div> <!-- CXNID=5426436&Code=C2 Google--> <script type="text/javascript"> var gaJsHost = (("https:"=== document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> try { var pageTracker = _gat._getTracker("UA-10441212-1"); pageTracker._setDomainName(".messiahpsychoanalyst.org"); pageTracker._trackPageview(); } catch(err) {} </script> </body> </html> |
You can watch it by clicking here, please. There are items in the code which are not of your interest. I explain them for you such that you replace them with yours if you like, and then I give a simple skeleton of the page.
- I have a link to refer to my master CSS file. Please replace it with yours.
1 | <link rel="stylesheet" type="text/css" href="/MP_Master.css" /> |
- the division tag, div, in the page has my own taste and options from my CSS master file. Later, I am going to replace it with a simple style for this demonstration.
1 | <div style='padding-left: 10px; background-image: url("/Images/Themes/bg_home.jpg");' class="MP_Page_Left Zone_Page_L"> |
- I have an emblem, similar to my favicon that I'll remove for simplicity. You can put your organisation emblem there.
1 | <img src="/Images/Logos/phoenix.jpg" alt="Phoenix" /> |
- My signature link has its own style to be visible in sky blue background and all. Yours could be different.
1 | <a href="http://messiahpsychoanalyst.org" class="MP_LinkStyle">Dysprosium</a> |
- That also applies to return page. You can select any page to return to. Best is your home page or whatever.
1 | <a href="Home.html" class="MP_LinkStyle">Back to Home Page!</a> |
- I have put a tracker (mine is google analytics). Yours could be provider of your choice. It is a good practice such that you can have a click to add to your presence on the Internet.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!-- CXNID=5426436&Code=C2 Google--> <script type="text/javascript"> var gaJsHost = (("https:"=== document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> try { var pageTracker = _gat._getTracker("UA-10441212-1"); pageTracker._setDomainName(".messiahpsychoanalyst.org"); pageTracker._trackPageview(); } catch(err) {} </script> |
And that is all. Now, I put the simplified version.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the template in the editor. --> <html> <head> <title>Phoenix Thanks for Your Message</title> <meta charset="UTF-8" > <meta name="viewport" content="width=device-width" > <style> #phonix-wrapper { margin: 20px auto; border: 2px solid #ccc; border-radius: 10px; padding: 20px 50px 20px 50px; background: transparent; width: 600px; min-height: 500px; height: auto !important; height: 500px; } </style> </head> <body> <div id="phonix-wrapper"> <p>By Dysprosium</p> <hr style='margin: 1px auto 1px auto; height: 1px; color: #fefefe; width: 82%;'/> <h1>Your message has been sent! Thanks for Your Message!</h1> <p><a href="Home.html">Back to Home Page</a></p> </div> </body> </html> |
Please watch if you like it by clicking here, please.
I finished "thanks message" page. Next I discuss "dispatch message" page. Please read it here.
Download code in Zip format here. Open code as text in browser here.
Download this tutorial as PDF format here
Download part 1 and part 2 as PDF format here
No comments:
Post a Comment