Inspiring

Answered

Contact Form text area is limiting and the form wont center

Forum|Forum|1 year ago
March 10, 2025
2 replies
3466 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.

L

L e n a

Community Expert

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

BenPleysier

Community Expert

C'est vrai! mai j'aimerais le comprendre et mon français est médiocre 😉 I will dive into upping my security shortly..

your language is poetry as well - I write for hollywood sometimes (Im a film director) you. may appreciate THIS ARTICLE I wrote

I digress.. two quick questions then Im back to it - 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..

https://pitchlab.net/contact/

is that the browser? or is it in the PHP? i couldnt find any color choices in mine..

and Im going to sneak in a CSS question -

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#

do you know why vertical-align:middle isnt working?

I know w multiple lines in can be difficult

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

https://pitchlab.net/contact/

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

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

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