2 Correct answers
By @REELHEROId like it to operate more like this with a message received below but Im not sure how secure it is to have the PHP be on the same page including the email in the code:
============
To assuage your fears about running scripts on the contact page, PHP scripts are hidden. Nobody can see them.
To illustrate, view source in your browser. All you see is HTML, CSS and JavaScript. No PHP code.
PHP is invaluable for concealing sensitive information like Google private keys and other
...
I like the way this operates but Im not sure how secure it is to have the PHP be on the same page, including the email in the code, is it opening me up to spam?:
By @REELHERO
@REELHERO your other thread Contact form/PHP Best practices re security from which this quotation is taken and which has been closed, I can't propose any answer, so please excuse me for polluting this thread.
As @Nancy OShea mentioned, PHP is indeed invisible to the browser, so direct access to its data is not poss
...
54
Replies
Styles are just eye candy. That part can wait until after you build the <form> structure.
Concentrate on HTML, labels, IDs and names. These are critical to the success of your HTML5 form, and it's interaction with scripts. Also, put some reasonable limits on form fields. Without limits, robots will attempt to wage attacks on your form's vulnerabilities by infecting fields with malicious code.
Below is a simple contact form from PHPMailer. It's the one most commercial web hosts recommend because it's secure.
https://github.com/PHPMailer/PHPMailer/blob/master/examples/simple_contact_form.phps
This file must be saved as contact.php. The processing script will go above the <!DOCTYPE HTML> tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>PHPMailer Contact Form</title>
</head>
<body>
<h1>Contact us</h1>
<?php if (empty($msg)) { ?>
<form method="post">
<label for="subject">Subject:
<input type="text" name="subject" id="subject" maxlength="255">
</label>
<br>
<label for="name">Your name:
<input type="text" name="name" id="name" maxlength="255">
</label>
<br>
<label for="email">Your email address:
<input type="email" name="email" id="email" maxlength="255">
</label>
<br>
<label for="query">Your question:</label>
<br>
<textarea cols="45" rows="8" name="query" id="query" placeholder="Your question"></textarea>
<br>
<input type="submit" value="Submit">
</form>
<?php
} else {
echo $msg;
}
?>
</body>
</html>
To center your <form>, give it a width, border & auto margin. The border is so you can see what you're working with. You can remove it later.
By @REELHERO
============
To assuage your fears about running scripts on the contact page, PHP scripts are hidden. Nobody can see them.
To illustrate, view source in your browser. All you see is HTML, CSS and JavaScript. No PHP code.
PHP is invaluable for concealing sensitive information like Google private keys and other data that should be protected.
I like the way this operates but Im not sure how secure it is to have the PHP be on the same page, including the email in the code, is it opening me up to spam?:
By @REELHERO
@REELHERO your other thread Contact form/PHP Best practices re security from which this quotation is taken and which has been closed, I can't propose any answer, so please excuse me for polluting this thread.
As @Nancy OShea mentioned, PHP is indeed invisible to the browser, so direct access to its data is not possible. However, an unprotected form remains vulnerable to various types of spam and bots.
While PHPMailer is an excellent tool for sending emails and managing SMTP configurations, it doesn't inherently provide spam protection or intrusion prevention features.
Implementing protective measures is advisable. For instance, setting up traps for bots, such as the famous honeypot technique, involving to add an invisible field (using CSS, not hidden type) to the form that only bots will fill out, allowing you to identify and block them. Additionally, monitoring for rapid submissions, multiple attempts, or direct calls from another server can help identify suspicious behavior.
Some developers prefer not to use third-party CAPTCHA services to avoid sharing data with large corporations. In such cases, you can implement your own CAPTCHA system by presenting users with challenges involving numbers, words, or images that are easy for humans but difficult for bots to solve. This approach helps limit automated submissions and enhances your form's security.
Regarding this topic, and at the request of our partners, @B i r n o u and I are setting up a series of articles on this subject on the office's blog. Although far from exhaustive and originally written in French, I suggest you consult them (a translation tool is available at the top left). A new article should be published today concerning CAPTCHA.
Once again, I'm sorry to have polluted this thread, but I hope this addition will help you better protect your form from SPAMS.
Google's re-CAPTCHA comes in two flavors— Paid & Free.
Paid website security services.
https://cloud.google.com/security/products/recaptcha
Free bot & spam abuse protection.
https://developers.google.com/recaptcha
Thank you Lena this is really helpful.. (I speak a little french 🙂 I love this article
By @REELHERO
Glad that it helped you, thanks 😉
Id love to try and implement some of these techniques but I dont know if french code will be smart to use on an all english code site..
By @REELHERO
Oh là là! Don't worry, my friend. Code, like music or mathematics, is a universal language. Whether exchanged on the streets of Marseille, woven along a caravan trail in Tamanrasset, or scripted on the highways of Los Angeles, its syntax and logic remain constant.
While individual coding styles may vary—some favoring a minimalist approach, others embracing more refined subtleties—the underlying structure is universally understood. It goes without saying that a certain poetry emerges in the art of coding; each line reflects the rhythm and unique style of the programmer.
The code presented in this article is intentionally generic, designed to illustrate concepts without introducing unnecessary complexity. This straightforward approach ensures smooth transmission, highlighting the intended objective without burdening the presentation with complex structures.
So don't hesitate to apply these techniques; they should integrate seamlessly into any codebase, regardless of its author's background.
Look forward to the CAPTCHA article..
By @REELHERO
Birnou told me that their proofreading seems to have been done, it should be online 🙂
How does google recaptcha work in this world..? is it something to consider?
By @REELHERO
Nothing in particular, nor complicated, https://developers.google.com/recaptcha/intro?hl=fr, but the debate is rather at the level of the concepts of open code, or data transit in the broad sense of the term... there are for example those who work with Google Analytics and those who prefer Piwik... those who are Windows, those who are Linux... etc... etc....
having a tough time vertically centering the "lets make waves, hit us up" in the circle at the bottom of the page..
https://pitchlab.net/lowdown/index_test.html#
By @REELHERO
==========
<span> tags can't be aligned. Use a <p> tag instead.
what chooses the color that the form box turns when a submission is filled correctly.. ie if I put my email in here in correct format it turns light blue..
By @REELHERO
The first input was typed in; the second input was entered automatically. This is the browser doing iys job.
As a sidenote, I have great adniration for your artistic abilities.
Despite that. there are quite a few reasons why I would never recommend anybody to copy what you are doing.
The number one reason:
1. This line of code is a no-no
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">The meta viewport tag is crucial for defining how a webpage adapts to different screen sizes and devices, such as mobile phones and tablets. When not properly configured, users may experience issues such as text being too small to read or the inability to zoom, particularly affecting users with low vision or cognitive disabilities who rely on zoom functionality to make content more readable. Ensuring the viewport is configured to support zoom and scaling enhances accessibility for all users.
Use this instead
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
2. The social buttons are not big enough for my sausage fingers on my touch screen.
3. @Nancy OShea can tell you more about being sight challenged and how important it is to have colour contrast. My IDE allows me to rate this as in
I could continue going through your site for days, talking about document hiearchy and wrongly using <h1>-<6> elements for styling rather than outlining. Or a screen reader trying to find the site navigation items when there is no <nav> item to be seen.
Have a look at the following video to see what I mean
https://youtu.be/Zy4yJz1icrw?si=89Ty8ucHlyqPquiI
having a tough time vertically centering the "lets make waves, hit us up" in the circle at the bottom of the page..
https://pitchlab.net/lowdown/index_test.html#
Just add to the 'circle2' css selector:
display: grid;
place-content: center;
your language is poetry as well - I write for hollywood sometimes (Im a film director) you. may appreciate THIS ARTICLE I wrote
By @REELHERO
I took the time to read your article and wanted to commend you on the quality of your writing. You managed to address tragic events with remarkable softness and sensitivity, making your text accessible even to those whose native language isn't English. Your way of describing these difficult situations is both poetic and poignant, drawing parallels between the two events and infusing a sense of destiny that connects them, reflecting deep empathy and great narrative skill.
Great job on this piece... thanks for sharing
AdChoices