The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> How to make a comment section form (HTML CSS), HTML CSS Form
UniqueCrafts
post Mar 27 2023, 02:07 AM
Post #1





Group: Members
Posts: 2
Joined: 27-March 23
Member No.: 28,876



Hello,

I have created a simple form with HTML and CSS, but now I need to connect it somehow so it can turn the filled in data into a comment that will appear on my website.

Can someone please help me with this? (just started with HTML and CSS)
If that's not possible, can I just connect it to an email address so the filled in data will end up there?
Or if I need to change the code completely, that's fine by me as well.

This is the code I have now:


<!DOCTYPE html>
<html>
<body>

<div class="div">
<form action="/action_page.php" class="form">
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">

<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">

<label for="comment">Leave a comment (Where are you from?)</label>
<input type="text" id="comment" name="comment" placeholder="Comment..">
<input type="submit" value="Submit">

</form>
</div>

</body>


</html>


CSS:


.form input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}

.form input[type=submit] {
width: 100%;
background-color: rgb(106, 184, 252);
color: white;
padding: 14px 20px;
margin: 8px 0;
border: solid;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.2s,
color 0.2s;
transition: box-shadow 0.2s;
}

.form input[type=submit]:hover {
background-color: white;
color: rgb(116, 116, 235);
color: rgb(116, 116, 235);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.25)
}

div {
border-radius: 5px;
background-color: rgb(171, 213, 250);
padding: 20px;
width: 800px;
margin-top: 20px;
margin-bottom: 20px;
}

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 27 2023, 02:39 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



It's possible. That's how for example comment fields in a blog works. Alas it isn't possible with HTML and CSS alone. You need server side programming for things like this.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
UniqueCrafts
post Mar 27 2023, 02:53 AM
Post #3





Group: Members
Posts: 2
Joined: 27-March 23
Member No.: 28,876



QUOTE(pandy @ Mar 27 2023, 02:39 AM) *

It's possible. That's how for example comment fields in a blog works. Alas it isn't possible with HTML and CSS alone. You need server side programming for things like this.



Thank you for the quick reply.

That's what I was afraid of.
Any ideas of a good (English) tutorial for that maybe?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 27 2023, 05:39 AM
Post #4


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



At the most basic, you could write the comments to a text file (known as a flat-file database) using PHP's file_put_contents function:
https://en.wikipedia.org/wiki/Flat-file_database
https://www.php.net/manual/en/function.file-put-contents
The rest of the PHP manual is also very good: https://www.php.net/manual/en/

There may also be readymade PHP comment scripts on the web that you could use.

In any case, be aware that the comment section may be flooded with spam, so perhaps pre-moderation is a good idea.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 27 2023, 10:35 AM
Post #5


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Yeah, I googled. There seems to be quite a few around now. Most probably use a database thought which would be yet a step to learn.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 27 2023, 01:09 PM
Post #6


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(UniqueCrafts @ Mar 27 2023, 09:07 AM) *

can I just connect it to an email address so the filled in data will end up there?

That might be the best solution, actually: there are readymade email form scripts, you don't need any kind of database and you can premoderate user submissions before they get published on your website.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 27 2023, 01:40 PM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Still requires server side. Well, if mailto isn't used.

There used to be hosted services that had comments. But I have a feeling that kind of things have died?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 27 2023, 02:11 PM
Post #8


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



There are a few problems with email comments too:

1. If the user doesn't notice that it's an email comment he may wonder why his comment doesn't show up right away, and repost it again and again.

2. If OTOH the user sees that it's an email comment he may believe it's a private message, and become annoyed that it's later published on the website.

3. If the site contains multiple pages with comment forms, each email needs to indicate which form posted it (maybe also the time and date).

QUOTE(pandy @ Mar 27 2023, 08:40 PM) *

Still requires server side. Well, if mailto isn't used.

All paid webhosts should offer PHP though, maybe also readymade scripts in the support area.

QUOTE
There used to be hosted services that had comments. But I have a feeling that kind of things have died?

A free blog service perhaps? unsure.gif

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
3 User(s) are reading this topic (3 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 03:43 AM