Inspiring

Answered

Contact Form text area is limiting and the form wont center

Forum|Forum|10 months ago
March 10, 2025
2 replies
3406 views

Finally trying my hand at a contact form -

before I dive into server side I need to make sure it works properly and there are two issues- minor but annoying:

first issue is the textarea for "Message" is behaving like an input in that it is limiting the width you can type.. a text area should allow you to type all the way across..

and finally-

the form div wont center - I used a parent container flexbox for the columns and a div wrapping the form and it wont center..

my parent:

.contact_flex_container {
width:100%;
height:100%;
display: flex;
justify-content:center;
align-items: center;
padding-top: 10vh;
}

my form div:

.form_container{
justify-content: center;
}

any help would be appreciated!

Correct answer L e n a

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.

L

L e n a

Correct answer

Community Expert

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.

R

REELHEROAuthor

Inspiring

Thank you Lena this is really helpful.. (I speak a little french 🙂 I love this article

https://www.puce-et-media.com/protection-de-base-pour-un-formulaire/

which did translate except for the code..

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..

Look forward to the CAPTCHA article..

How does google recaptcha work in this world..? is it something to consider?

Nancy OShea

Community Expert

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

Nancy O'Shea— Product User & Community Expert

Nancy OShea

Community Expert

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.

Nancy O'Shea— Product User & Community Expert

R

REELHEROAuthor

Inspiring

thanks Nancy -

Style is not eye candy when youre selling design 😉

Im an architect nut so I get that form follows function.. often elegant function creates beautiful form

my form is almost identical in code to that - i did my research before I made it.. and it looked exactly as that appears before I styled it.. So something in my CSS is affecting the centering i just cant figure it out..

Nancy OShea

Community Expert

Simplify by commenting out all styles except the <form> width, border & auto margin as suggested above.

Add styles one at a time until something breaks.

Nancy O'Shea— Product User & Community Expert

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded