Simple contact template

Software > HTML & templates

<< < (2/5) > >>

dj:

--- Quote ---getting some answer back from the server, at least in the v1.0b-XML-Method
--- End quote ---

--- Code: ---request.onload=function(){alert('OK')}
request.onerror=function(){alert('KO')}
request.send(formData)
--- End code ---

--- Quote --- add some kind of field validation
--- End quote ---

--- Code: ---Name: <input type="text" required
E-mail: <input type="email"

--- End code ---

bmartino1:
AS Per Leo Request.

Here is the break down build i used to create the following codes

HFS different template:

--- Code: ---<!DOCTYPE html>
<html>

<head>
<meta charset=UTF-8 />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Contact Form using JavaScript</title>
</head>



<style type="text/css">
/* below line is write to use google font online */
@import url(http://fonts.googleapis.com/css?family=Ubuntu);
* {
margin: 0;
padding: 0;
}

body {
font-size: 62.5%;
font-family: 'Ubuntu', sans-serif;
}

p {
font-size: 1.3em;
margin-bottom: 15px;
}

#page-wrap {
width: 660px;
background: white;
padding: 20px 50px 20px 50px;
margin: 20px auto;
min-height: 300px;
height: auto !important;
height: 300px;
}

#contact-area {
width: 600px;
margin-top: 25px;
}

#contact-area input, #contact-area textarea {
padding: 5px;
width: 471px;
font-family: 'Ubuntu', sans-serif;
font-size: 1.4em;
margin: 0px 0px 10px 0px;
border: 2px solid #CCC;
}

#contact-area textarea {
height: 90px;
}

#contact-area textarea:focus, #contact-area input:focus {
border: 2px solid #FC0;
}

#contact-area button.submit-button {
width: 100px;
height: 30px;
float: right;
cursor: default;
color: buttontext;
text-align: center;
padding: 2px 6px 3px;
box-sizing: border-box;
align-items: flex-start;
border: 0px outset buttonface;
-webkit-appearance: push-button;
font-family: 'Ubuntu', sans-serif;
font-size: 1.4em;
white-space: pre;
}

label {
float: left;
text-align: right;
margin-right: 15px;
width: 100px;
padding-top: 5px;
font-size: 1.4em;
}

/* -------------------------------------
CSS for sidebar (optional)
---------------------------------------- */
div#fugo{
float:right;
}
</style>

<body>
<div id="page-wrap">
<p><h1>« Contacting the Server Administrator »</h1></p>
<div id="contact-area">
<form method="GET">
<label for="contact-name">Full Name:</label>
<input type="text" tabindex="1" class="form-control" id="contact-name" name="name" placeholder="Please Enter Your Full Name.." onkeyup='validateName()'>
<div style="text-align: right"><span class='error-message' id='name-error'></span></div>

<label for="contact-email">Email Address:</label>
<input type="email" tabindex="2" class="form-control" id="contact-email" name="email" placeholder="Please Enter a valid Email (your@email.com) " onkeyup='validateEmail()'>
<div style="text-align: right"><span class='error-message' id='email-error'></span></div>

<label for="contact-subject">Subject:</label><br />
<input type="subject" tabindex="3" class="form-control" id="contact-subject" name="subject" placeholder="Ex: I Have Experienced an Error" onkeyup='validateSubject()'>
<div style="text-align: right"><span class='error-message' id='subject-error'></span></div>

<label for='contactMessage'>Your Message:</label><br />
<textarea class="form-control" rows="20" cols="20" id='contact-message' tabindex="4" name='message' placeholder="Please Detail your needs - Enter a brief message" onkeyup='validateMessage()'></textarea>
<div style="text-align: right"><span class='error-message' id='message-error'></span></div>
<br /><br />
<div style="text-align: right"><span class='error-message' id='submit-error'></span></div>
<br />
<button id="SendMe" name="SubmitMessage" onclick='return validateForm()' class="submit-button" tabindex="5" >Submit</button>
</form>
</div>
</div>




<script type="text/javascript">
//Creates box and validate textbox content for a name
function validateName() {

var name = document.getElementById('contact-name').value;

if(name.length == 0) {

producePrompt('Name is required', 'name-error' , 'red')
return false;

}

if (!name.match(/^[A-Za-z]*\s{1}[A-Za-z]*$/)) {

producePrompt('First and Last name, please.','name-error', 'red');
return false;

}

producePrompt('Valid', 'name-error', 'green');
return true;

}

//Creates box and validate textbox content for a Email Subject
function validateSubject() {

var submessage = document.getElementById('contact-subject').value;
var required = 2;
var left = required - submessage.length;

if (left > 0) {
producePrompt(left + ' At least 2 characters are required for the Subject','subject-error','red');
return false;
}

producePrompt('Valid', 'subject-error', 'green');
return true;

}

//Creates box and validate textbox content for a valid Email

function validateEmail () {

var email = document.getElementById('contact-email').value;

if(email.length == 0) {

producePrompt('Email Invalid','email-error', 'red');
return false;

}

if(!email.match(/^[A-Za-z\._\-[0-9]*[@][A-Za-z]*[\.][a-z]{2,4}$/)) {

producePrompt('Email Invalid', 'email-error', 'red');
return false;

}

producePrompt('Valid', 'email-error', 'green');
return true;

}

//Creates box and validate textbox content for Email Message - Text to save to file later?
function validateMessage() {
var message = document.getElementById('contact-message').value;
var required = 10;
var left = required - message.length;

if (left > 0) {
producePrompt(left + ' more characters are required, Please Provide More deails for the server admin','message-error','red');
return false;
}

producePrompt('Valid', 'message-error', 'green');
return true;

}

//Secondary Code for JS validation(hide validation content box):
function jsShow(id) {
document.getElementById(id).style.display = 'block';
}

function jsHide(id) {
document.getElementById(id).style.display = 'none';
}

//ON Sybmit button button click/ Mouse Over action(Validate form passes):
function validateForm() {
if (!validateName() || !validateSubject() || !validateEmail() || !validateMessage())
{
jsShow('submit-error');
producePrompt('Please fix errors to submit.', 'submit-error', 'red');
setTimeout(function(){jsHide('submit-error');}, 5000);
return false;
}
else
{
//Change alert for message sent sucesfuly
//producePrompt('Sent Sucessfuly', 'Submit-error', 'green');
jsShow('submit-error');
producePrompt('Mesage Passed Validation and is Being Sent.', 'submit-error', 'green');
setTimeout(function(){jsHide('submit-error');}, 10000);
return true;
}
}

//Populates the HTML span tag
function producePrompt(message, promptLocation, color) {

document.getElementById(promptLocation).innerHTML = message;
document.getElementById(promptLocation).style.color = color;

}

</script>



</body>
</html>

--- End code ---

*Attached are the final drafts in there broken form for those who wish to break apart the code, add/edit the code easier

Attached is a final reproduction picture of how validation looks

username1565:
Wow, you make email form template!
I did try this, but I cann't access to HFS now. ;D
There is only form when I try to go on my server and no access to the files. Can you fix this?
I see this as separate link "Contact to admin", in standart HFS template.

Also, I did try to using EML version, and I saw this errors:

--- Quote ---Requested GET /
Upload failed, Not allowed: New-Message-2018.07.26-at-08.38.03.eml
Requested POST /

--- End quote ---
This because message try to upload to the root directory on the server.
So need to re-write path as specified folder, which was been opened for uploads:

--- Code: (javascript) ---request.open("POST", "./contacts/"); //Try to upload file to "contacts" folder, using POST query
//Before using this, enable "uploads for anyone": HFS -> folder -> Right click -> Properties... -> Permissions -> Upload -> Anyone -> OK.

--- End code ---

You can add this description in your code, and add to the first post - the info about this string at line 155.
Because there is only dot and slash, and no anyone newbie cann't understand...

text messages uploading v0.1b working too. But need to write pathway in the string:

--- Code: ---request.open("POST", "./contacts/"); //at first, enable uploads in "contacts"
--- End code ---

Also, macro-method v0.1a is working.
I see in the root directory on HFS server the file "Private-Message-2018.07.26-at-09.07.42.txt"
I see GET link: "/?NameA=test&MailA=test@test.test&SubjectA=test&MessageA=test+test+test&SubmitMessage="
so GET-method using here. I did try to go by this link again, and I see another file with this message.
And no need to open root folder for uploads in this case.
But how to set the folder "/contacts", I don't understand...
I see there is variable %folder%:

--- Code: ---{.save|%folder%Private-Message-{.time|yyyy.mm.dd'-at-'hh.nn.ss.}.txt|
--- End code ---

Best regards.

bmartino1:
AS Per Leo Request.
Here is the post for the Macro code
Macro Version Final draft working full code

--- Code: ---<!DOCTYPE html>
<html>

<head>
<meta charset=UTF-8 />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Contact Form using JavaScript</title>
</head>



<style type="text/css">
/* below line is write to use google font online */
@import url(http://fonts.googleapis.com/css?family=Ubuntu);
* {
margin: 0;
padding: 0;
}

body {
font-size: 62.5%;
font-family: 'Ubuntu', sans-serif;
}

p {
font-size: 1.3em;
margin-bottom: 15px;
}

#page-wrap {
width: 660px;
background: white;
padding: 20px 50px 20px 50px;
margin: 20px auto;
min-height: 300px;
height: auto !important;
height: 300px;
}

#contact-area {
width: 600px;
margin-top: 25px;
}

#contact-area input, #contact-area textarea {
padding: 5px;
width: 471px;
font-family: 'Ubuntu', sans-serif;
font-size: 1.4em;
margin: 0px 0px 10px 0px;
border: 2px solid #CCC;
}

#contact-area textarea {
height: 90px;
}

#contact-area textarea:focus, #contact-area input:focus {
border: 2px solid #FC0;
}

#contact-area button.submit-button {
width: 100px;
height: 30px;
float: right;
cursor: default;
color: buttontext;
text-align: center;
padding: 2px 6px 3px;
box-sizing: border-box;
align-items: flex-start;
border: 0px outset buttonface;
-webkit-appearance: push-button;
font-family: 'Ubuntu', sans-serif;
font-size: 1.4em;
white-space: pre;
}

label {
float: left;
text-align: right;
margin-right: 15px;
width: 100px;
padding-top: 5px;
font-size: 1.4em;
}

/* -------------------------------------
CSS for sidebar (optional)
---------------------------------------- */
div#fugo{
float:right;
}
</style>

<body>
<div id="page-wrap">
<p><h1>« Contacting the Server Administrator »</h1></p>
<div id="contact-area">
<form method="GET">
<label for="contact-name">Full Name:</label>
<input type="text" tabindex="1" class="form-control" id="contact-name" name="name" placeholder="Please Enter Your Full Name.." onkeyup='validateName()'>
<div style="text-align: right"><span class='error-message' id='name-error'></span></div>

<label for="contact-email">Email Address:</label>
<input type="email" tabindex="2" class="form-control" id="contact-email" name="email" placeholder="Please Enter a valid Email (your@email.com) " onkeyup='validateEmail()'>
<div style="text-align: right"><span class='error-message' id='email-error'></span></div>

<label for="contact-subject">Subject:</label><br />
<input type="subject" tabindex="3" class="form-control" id="contact-subject" name="subject" placeholder="Ex: I Have Experienced an Error" onkeyup='validateSubject()'>
<div style="text-align: right"><span class='error-message' id='subject-error'></span></div>

<label for='contactMessage'>Your Message:</label><br />
<textarea class="form-control" rows="20" cols="20" id='contact-message' tabindex="4" name='message' placeholder="Please Detail your needs - Enter a brief message" onkeyup='validateMessage()'></textarea>
<div style="text-align: right"><span class='error-message' id='message-error'></span></div>
<br /><br />
<div style="text-align: right"><span class='error-message' id='submit-error'></span></div>
<br />
<button id="SendMe" name="SubmitMessage" onclick='return validateForm()' class="submit-button" tabindex="5" >Submit</button>
</form>
</div>
</div>




<script type="text/javascript">
//Creates box and validate textbox content for a name
function validateName() {

var name = document.getElementById('contact-name').value;

if(name.length == 0) {

producePrompt('Name is required', 'name-error' , 'red')
return false;

}

if (!name.match(/^[A-Za-z]*\s{1}[A-Za-z]*$/)) {

producePrompt('First and Last name, please.','name-error', 'red');
return false;

}

producePrompt('Valid', 'name-error', 'green');
return true;

}

//Creates box and validate textbox content for a Email Subject
function validateSubject() {

var submessage = document.getElementById('contact-subject').value;
var required = 2;
var left = required - submessage.length;

if (left > 0) {
producePrompt(left + ' At least 2 characters are required for the Subject','subject-error','red');
return false;
}

producePrompt('Valid', 'subject-error', 'green');
return true;

}

//Creates box and validate textbox content for a valid Email

function validateEmail () {

var email = document.getElementById('contact-email').value;

if(email.length == 0) {

producePrompt('Email Invalid','email-error', 'red');
return false;

}

if(!email.match(/^[A-Za-z\._\-[0-9]*[@][A-Za-z]*[\.][a-z]{2,4}$/)) {

producePrompt('Email Invalid', 'email-error', 'red');
return false;

}

producePrompt('Valid', 'email-error', 'green');
return true;

}

//Creates box and validate textbox content for Email Message - Text to save to file later?
function validateMessage() {
var message = document.getElementById('contact-message').value;
var required = 10;
var left = required - message.length;

if (left > 0) {
producePrompt(left + ' more characters are required, Please Provide More deails for the server admin','message-error','red');
return false;
}

producePrompt('Valid', 'message-error', 'green');
return true;

}

//Secondary Code for JS validation(hide validation content box):
function jsShow(id) {
document.getElementById(id).style.display = 'block';
}

function jsHide(id) {
document.getElementById(id).style.display = 'none';
}

//ON Sybmit button button click/ Mouse Over action(Validate form passes):
function validateForm() {
if (!validateName() || !validateSubject() || !validateEmail() || !validateMessage())
{
jsShow('submit-error');
producePrompt('Please fix errors to submit.', 'submit-error', 'red');
setTimeout(function(){jsHide('submit-error');}, 5000);
return false;
}
else
{
//Change alert for message sent sucesfuly
//producePrompt('Sent Sucessfuly', 'Submit-error', 'green');
jsShow('submit-error');
producePrompt('Mesage Passed Validation and is Being Sent.', 'submit-error', 'green');
setTimeout(function(){jsHide('submit-error');}, 10000);
return true;
}
}

//Populates the HTML span tag
function producePrompt(message, promptLocation, color) {

document.getElementById(promptLocation).innerHTML = message;
document.getElementById(promptLocation).style.color = color;

}

</script>


{.if |{.?Message.}|{:
{.set|nombre|{.?name.}.}
{.set|correo|{.?email.}.}
{.set|asunto|{.?subject.}.}
{.set|mensaje|{.?message.}.}

{.save|/%folder%/Private-Message-{.time|yyyy.mm.dd'-at-'hh.nn.ss.}.txt|
{.force ansi|{.!-----[ BEGIN MESSAGE ]-----.}.}

Name: {.^nombre.}
From: {.^correo.}
IP: %ip% (User: %user%)
Date: {.time|yyyy/mm/dd '@' hh:nn:ss.}
Subject: {.^asunto.}

Message:

{.force ansi|{.^mensaje.}.}

{.force ansi|{.!-----[ END MESSAGE ]-----.}.}
.}

{.add to log|You've received a new message!.}

:}
.}
<script>
//disabled as this code should just run after validation...
//document.getElementById("SendMe").onclick = function () {
//}
//disabled as it is now apart of the javascript
alert("Message sent!");
//can become the a message on the page instead of an alert box...

</script>

</body>
</html>

--- End code ---

log example:
6:59:09 AM 127.0.0.1:50827 Requested GET /
6:59:09 AM 127.0.0.1:50827 Requested GET /?mode=jquery
6:59:11 AM 127.0.0.1:50828 Requested GET /Contact/
6:59:51 AM Check update: no new version
7:03:28 AM 127.0.0.1:50859 Requested GET /Contact/
7:04:12 AM 127.0.0.1:50859 You've received a new message!
7:04:12 AM 127.0.0.1:50859 Requested GET /Contact/?name=Brandon+Martino&email=my@test.com&subject=ff&message=pass+pass+pas&SubmitMessage=
7:05:14 AM 127.0.0.1:50865 You've received a new message!
7:05:14 AM 127.0.0.1:50865 Requested GET /Contact/?name=Brandon+Martino&email=my@test.com&subject=ff&message=pass+pass+pas&SubmitMessage=
7:05:27 AM 127.0.0.1:50865 You've received a new message!
7:05:27 AM 127.0.0.1:50865 Requested GET /Contact/?name=Brandon+Martino&email=my@test.com&subject=ff&message=pass+pass+pass+pass&SubmitMessage=
7:06:54 AM 127.0.0.1:50893 You've received a new message!
7:06:54 AM 127.0.0.1:50893 Requested GET /Contact/?name=Brandon+Martino&email=my@test.com&subject=ff&message=pass+hello+world&SubmitMessage=

message uploaded example:
file name: Private-Message-2018.08.26-at-07.06.54.txt
-----[ BEGIN MESSAGE ]-----

Name: Brandon Martino
From: my@test.com
IP: 127.0.0.1 (User: )
Date: 2018/08/26 @ 07:06:54
Subject: ff

Message:

pass hello world

-----[ END MESSAGE ]-----

attached is the tpl file for the macro version

LeoNeeson:
Thanks everyone for the comments, suggestions and fixes (I appreciate every comment :) ). I don't had free time this weekend to test all this and leave a proper answer (I will update this message as soon as possible, on the next week).

Navigation

[0] Message Index

[#] Next page

[*] Previous page

Go to full version