Author Topic: Simple contact template  (Read 649 times)

0 Members and 1 Guest are viewing this topic.

Offline LeoNeeson

  • Insane poster
  • *****
  • Posts: 451
  • Solitario...
    • View Profile
    • twitter.com/LeoNeeson
Simple contact template
« on: July 22, 2018, 09:26:42 AM »
Today I was trying to get working a simple contact template, that automatically save its contents as a local .txt file. To apply this template, follow these steps:

1. Create a folder named, for example as: contact (add it as real folder)

2. Extract from the zip the "hfs.diff.tpl" of the version you've choosen.

3. Copy that file (hfs.diff.tpl) to the "contact" (or whatever name you choose) folder you made on the first step.



» Versions:

Macro-Method = Using Form + Macros (without needing upload permissions)
XML-Method = Using XMLHttpRequest (needs upload permissions to anyone)
EML-Email = Same as XML-Method, but it saves in .eml format instead of .txt

» Description:

Both version are currently functional, but still need to add some kind of field validation (to check if the fields are empty or not), and perhaps we can also show that the message was successfully sent using another methods than showing a simple 'alert' (getting some answer back from the server, at least in the v1.0b-XML-Method). The v1.0a-Macro-Method could have redirect to page like (after the form was submitted):

Code: [Select]
[success]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Message successfully sent</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head><body><h3 style="color:black;">The message was successfully sent!</h3>
</body></html>

Thanks to dj for his help! :) (without him, this couldn't be done)
Any other enhancements/suggestions are welcome!

Cheers,
Leo.-
« Last Edit: July 24, 2018, 12:32:15 PM by LeoNeeson »
• HFS ahora también disponible en Español! (Clic aqui) :)
• HFS is now also available in Spanish! (Click here)

Follow members gave a thank to your post:


Offline dj

  • Experienced poster
  • ***
  • Posts: 60
    • View Profile
Re: Simple contact template
« Reply #1 on: July 22, 2018, 11:12:51 AM »
you can use a form without jquery (GET or POST)
alternativ this can also be done without macros (done in upload with drag and drop)

update: https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects
« Last Edit: July 23, 2018, 05:09:25 AM by dj »

Offline LeoNeeson

  • Insane poster
  • *****
  • Posts: 451
  • Solitario...
    • View Profile
    • twitter.com/LeoNeeson
Re: Simple contact template
« Reply #2 on: July 24, 2018, 12:32:54 PM »
I've updated the first post and released a working template (v1.0)

My problem here is: I don't know how an alias or a HFS's symbol can read and store in memory the content of a HTML object (like a textbox or an input), the same way a JavaScript variable work. I would like NOT to use a 'form' (postvar) as I would like to keep it as simple as possible (at least in this first revision), and just using plain JavaScript (no jQuery).

What I can do to fix it?... :-\
(Suggestions welcome)

Cheers,
Leo.-

you can use a form without jquery (GET or POST)
alternativ this can also be done without macros (done in upload with drag and drop)

update: https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects

Thanks dj for your help! :)
• HFS ahora también disponible en Español! (Clic aqui) :)
• HFS is now also available in Spanish! (Click here)

Offline bmartino1

  • Insane poster
  • *****
  • Posts: 778
  • I'm only trying to help i mean no offense.
    • View Profile
    • none - google translate
« Last Edit: July 26, 2018, 01:06:21 AM by bmartino1 »
I'm only trying to help i mean no offense.
thank you for your time and patience,
Bmartino1

Offline dj

  • Experienced poster
  • ***
  • Posts: 60
    • View Profile
Re: Simple contact template
« Reply #4 on: July 24, 2018, 06:41:23 PM »
Quote
getting some answer back from the server, at least in the v1.0b-XML-Method
Code: [Select]
request.onload=function(){alert('OK')}
request.onerror=function(){alert('KO')}
request.send(formData)

Quote
add some kind of field validation
Code: [Select]
Name:  <input type="text" required
E-mail: <input type="email"


Offline bmartino1

  • Insane poster
  • *****
  • Posts: 778
  • I'm only trying to help i mean no offense.
    • View Profile
    • none - google translate
Re: Simple contact template
« Reply #5 on: July 26, 2018, 02:13:51 AM »
I have edited this post to show it with working code in file separation:

I looked around and found/edited to the needs...
I was able to get validation and pre text example via html form via javascript validation.

attached is a picture of this(although the code fix may not show the good true results

i was also able to get the code to commit a html string witch could be used later to save info to a file on hfs (with javascript, not hfs) :) -- but hfs macro easier and i din't devote any time to it.. see comments in javascript ( https://stackoverflow.com/questions/21012580/is-it-possible-to-write-data-to-file-using-only-javascript )

Here is the url PHP like - Returend value of test to boxes:
Code: [Select]
http://127.0.0.1/Contact/Contact.html?name=brandon+martino&email=myemail%40gmail.com&contact-subject=error&message=test
* NOTE: this is working code ATM -- Using Leo Macro html code, this validates information in the boxes...,Code can be used to send data in boxes to a text file(regardless of validation...)...

First HTML:
*this is the old test code in which i had the 3 files (contat.html, form.js and form.css)
BUT -- its was easier and less complicated if i jsut added it to the web page as a single code. all in html
hre is the old html code for refference(i would not use this method....):
Code: [Select]
<html>
<head>
<title>Contact Form using JavaScript </title>

<!-- include css file here HAving issues with css to html page editing...  -->
<!--   <link rel="stylesheet" href="/Contact/form.css"/>   -->
   
</head>
<body>
   <!-- include JavaScript file here -->
   <script src="/Contact/form.js"></script>

   <!-- css edit Main here-->
   <div id="main">
   <h1>Contact Server Admin</h1>
   <!-- css edit Form here-->
<div id="form_sample">

<!-- HTML Form with Javascritp html code-->
<form>

          <div class="form-group">
            <label for="contact-name">Full Name:</label>
            <input type="text" class="form-control" id="contact-name" name="name"       placeholder="Please Enter your name.." onkeyup='validateName()'>
            <span class='error-message' id='name-error'></span>
          </div>

          <div class="form-group">
            <label for="contact-email">Email Address:</label>
            <input type="email" class="form-control" id="contact-email" name="email" placeholder="Please Enter a valid Email" onkeyup='validateEmail()'>
            <span class='error-message' id='email-error'></span>
          </div>   

  <div class="form-group">
            <label for="contact-subject">Subject:</label>
            <input type="tel" class="form-control" id="contact-" name="contact-subject" placeholder="Ex: I Have Experienced an Error" onkeyup='validateSubject()'>
            <span class='error-message' id='subject-error'></span>
          </div>
 
          <div class="form-group">
            <label for='contactMessage'>Your Message:</label>
            <textarea class="form-control" rows="5" id='contact-message'  name='message'  placeholder="Please Detail your needs - Enter a brief message" onkeyup='validateMessage()'></textarea>
            <span class='error-message' id='message-error'></span>
          </div>

        <button onclick='return validateForm()' class="btn btn-default">Submit</button>
        <span class='error-message' id='submit-error'></span>
      </form>  
</div>     
</body>
</html>
============================================================================

html form javascript validation code(had issues with form validation and where valid text apears on page)-- you can remove the word valid to have the red go away instead of dieplaying a valid after box typed content:
Code: [Select]

function validateName() {

//Creates box and validate textbox content for a name
  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('Message 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;

}

//ON button click action:
//Later acess to save to file https://stackoverflow.com/questions/21012580/is-it-possible-to-write-data-to-file-using-only-javascript
//Checks form and contents pass validation
function validateForm() {
    if (!validateName() || !validateSubject() || !validateEmail() || !validateMessage())
{
        jsShow('submit-error');
        producePrompt('Please fix errors to submit.', 'submit-error', 'red');
        setTimeout(function(){jsHide('submit-error');}, 2000);
        return false;
    }
else
{
        return true;
    }
}

//??? Secondary Code for JS:
//https://stackoverflow.com/questions/24128659/contact-form-validation-javascript
//https://www.formget.com/javascript-contact-form/
//https://www.w3schools.com/js/js_validation.asp
function jsShow(id) {
  document.getElementById(id).style.display = 'block';
}

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



//Populate HTML Page
function producePrompt(message, promptLocation, color) {

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


}


CSS style sheet code (form)-- finaly fixed css to html edits using leo code with open source fonts:
Code: [Select]
/* 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;
}

side not to html hfs macro codeing to save a fiel to hfs:
Code: [Select]
{.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!.}

:}
.}

all together code working to my knowledge.
this is the hfs difernt template revision
i would create a real folder, use the diferent template tabe and put this code in htat tab:
Code: [Select]
<!DOCTYPE html>
<html>

<head>
<meta charset=UTF-8 />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Message to the server</title>
</head>
<!-- included css here -->
<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>&laquo; Contacting the Server Administrator &raquo;</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()'>
            <span class='error-message' id='name-error'></span>

<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()'>
            <span class='error-message' id='email-error'></span>

<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()'>
            <span class='error-message' id='subject-error'></span>

<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>
            <span class='error-message' id='message-error'></span>
            <br />

<button id="SendMe" name="SubmitMessage" onclick='return validateForm()' class="submit-button" tabindex="5" >Submit</button>
        <span class='error-message' id='submit-error'></span>
</button>
</form>

</div>
</div>



<!-- include form validate JavaScript code here -->
<!-- <script src="/Contact/form.js"> </script> -->

<script>

function validateName() {

//Creates box and validate textbox content for a name
  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('Message 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;

}

//ON button click action:
//Later acess to save to file https://stackoverflow.com/questions/21012580/is-it-possible-to-write-data-to-file-using-only-javascript
//Checks form and contents pass validation
function validateForm() {
    if (!validateName() || !validateSubject() || !validateEmail() || !validateMessage())
{
        jsShow('submit-error');
        producePrompt('Please fix errors to submit.', 'submit-error', 'red');
        setTimeout(function(){jsHide('submit-error');}, 2000);
        return false;
    }
else
{
        return true;
    }
}

//??? Secondary Code for JS:
//https://stackoverflow.com/questions/24128659/contact-form-validation-javascript
//https://www.formget.com/javascript-contact-form/
//https://www.w3schools.com/js/js_validation.asp
function jsShow(id) {
  document.getElementById(id).style.display = 'block';
}

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



//Populate HTML Page
function producePrompt(message, promptLocation, color) {

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


}

</script>

<!-- Rejeto HFS Macro Commands via LEO sends to hfs via text-->
<script>
document.getElementById("SendMe").onclick = function () {

alert("Message successfully sent!");

}
</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!.}

:}
.}
   
</body>
</html>

To have the validation of the form message box, you will need the span tags and the form validation I'd error...

-mby sent the message set via this after it passes all filed validation and access hfs macro to write the text file.

Code: [Select]
<span class='error-message' id='submit-error'></span>


^ can possibly be used instead of the alert...
« Last Edit: August 10, 2018, 12:19:15 PM by bmartino1 »
I'm only trying to help i mean no offense.
thank you for your time and patience,
Bmartino1

Offline username1565

  • Occasional poster
  • *
  • Posts: 10
    • View Profile
Re: Simple contact template
« Reply #6 on: July 26, 2018, 06:27:12 AM »
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 /
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) [Select]
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.

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: [Select]
request.open("POST", "./contacts/");  //at first, enable uploads in "contacts"
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: [Select]
{.save|%folder%Private-Message-{.time|yyyy.mm.dd'-at-'hh.nn.ss.}.txt|
Best regards.
« Last Edit: July 30, 2018, 02:30:06 PM by username1565 »

Offline bmartino1

  • Insane poster
  • *****
  • Posts: 778
  • I'm only trying to help i mean no offense.
    • View Profile
    • none - google translate
Re: Simple contact template
« Reply #7 on: July 28, 2018, 07:53:04 AM »
Editing the post to reflect fixes and corection to the code:

By Using your macro method i have made and implemented validation of content in the boxes to validate

NOTE:
*although the full form validation is not working( as should stop if its not all boxes are validated via thecode.
Regardless of content in the boxes, a click on submit will send what ever text int he boxes/form as the data to create a text document....
=======================================================================

here is the Full working code
NOTE: WORKING VALIDATION CODE:
** Same code as in the above post
Code: [Select]
<!DOCTYPE html>
<html>

<head>
<meta charset=UTF-8 />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Message to the server</title>
</head>
<!-- included css here -->
<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>&laquo; Contacting the Server Administrator &raquo;</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()'>
            <span class='error-message' id='name-error'></span>

<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()'>
            <span class='error-message' id='email-error'></span>

<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()'>
            <span class='error-message' id='subject-error'></span>

<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>
            <span class='error-message' id='message-error'></span>
            <br />

<button id="SendMe" name="SubmitMessage" onclick='return validateForm()' class="submit-button" tabindex="5" >Submit</button>
        <span class='error-message' id='submit-error'></span>
</button>
</form>

</div>
</div>



<!-- include form validate JavaScript code here -->
<!-- <script src="/Contact/form.js"> </script> -->

<script>

function validateName() {

//Creates box and validate textbox content for a name
  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('Message 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;

}

//ON button click action:
//Later acess to save to file https://stackoverflow.com/questions/21012580/is-it-possible-to-write-data-to-file-using-only-javascript
//Checks form and contents pass validation
function validateForm() {
    if (!validateName() || !validateSubject() || !validateEmail() || !validateMessage())
{
        jsShow('submit-error');
        producePrompt('Please fix errors to submit.', 'submit-error', 'red');
        setTimeout(function(){jsHide('submit-error');}, 2000);
        return false;
    }
else
{
        return true;
    }
}

//??? Secondary Code for JS:
//https://stackoverflow.com/questions/24128659/contact-form-validation-javascript
//https://www.formget.com/javascript-contact-form/
//https://www.w3schools.com/js/js_validation.asp
function jsShow(id) {
  document.getElementById(id).style.display = 'block';
}

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



//Populate HTML Page
function producePrompt(message, promptLocation, color) {

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


}

</script>

<!-- Rejeto HFS Macro Commands via LEO sends to hfs via text-->
<script>
document.getElementById("SendMe").onclick = function () {

alert("Message successfully sent!");

}
</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!.}

:}
.}
   
</body>
</html>


test was success:

log:
2:54:41 AM Check update: no new version
2:55:10 AM 192.168.1.214:52904 Requested GET /Contact/
2:55:29 AM 192.168.1.214:52904 You've received a new message!
2:55:29 AM 192.168.1.214:52904 Requested GET /Contact/?name=brandon+martino&email=my email&subject=aa&message=test


message set to hfs:


-----[ BEGIN MESSAGE ]-----

Name: brandon martino
From: my email
IP: 192.168.1.214 (User: )
Date: 2018/07/28 @ 02:55:28
Subject: aa

Message:

test

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

===============================


First some congratulations to some users:

Awesome work as always leo,
Thanks for much help form other users to make this happen.

thanks username1565
i appreciate your coments and test done, it heled me further the code.
I was able to correct the path to set the save to contact folder(should work regardless in what folder it is named as.

thanks again leo for the css and other code to make this happen.
=============================================================================

Although, i personally like the different template tab of a folder then the different hfs tpl. I'd still recommend *for macros version, to use the tab instead of the different template file.

(this is because i have found with html that has or uses HFS macro doesn't like to be parsed vai html code (has to be the template...therefore, the tab takes over hfs parsing form the code (less to load, but not the bug or issue) -- Issues is with w3schools html validation with the html code or any html document. As HTML documents pars html code and see the HFS macros as a missing "< p > " and is displayed as text on website. I tried puting the hfs macro in < script > tags, but that breaks hfs parsing of the macro code (although saves hfs code in the validatior....

=================================

hope this helps in your future revison leo.

I have not looked at the xml version(i Plan to add the same javascript validation to it as well.) , but curently, I have fixed and setup the base validation code here to be easily copied for it. I'm not familiar with the eml file (email application like thunder bird might be able to view?), i'd prefer a text doc any way (easier for cmd to pars and run a macro execute to send for a potential future release? ... ) to send vai another program(i assume this template will eventual get email smtp access to send the email message to etc person. (as that is what it would have done via php on another standard contact form.

Thanks again for your work :)
« Last Edit: August 08, 2018, 12:02:58 AM by bmartino1 »
I'm only trying to help i mean no offense.
thank you for your time and patience,
Bmartino1

Offline LeoNeeson

  • Insane poster
  • *****
  • Posts: 451
  • Solitario...
    • View Profile
    • twitter.com/LeoNeeson
Re: Simple contact template
« Reply #8 on: July 29, 2018, 03:38:23 PM »
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).
• HFS ahora también disponible en Español! (Clic aqui) :)
• HFS is now also available in Spanish! (Click here)

Offline bmartino1

  • Insane poster
  • *****
  • Posts: 778
  • I'm only trying to help i mean no offense.
    • View Profile
    • none - google translate
Re: Simple contact template
« Reply #9 on: August 10, 2018, 03:50:58 AM »
here is the xml version of the code with validation

Eml will be about the same after xml is done...

to fix file permison issue i tried hfs macor comand

Code: [Select]
<!-- Rejeto HFS Macro Commands via LEO sends to hfs via text (XML) -->
<!-- Fix Permission to folder upload access (hfs macro)? -->
set item|%folder%|upload=@anonymous

(still had to set anyone with acess/delete/uplaod to make work / test...)

had to fix code wirte path of file name:
Code: [Select]
formData.append("webmasterfile", blob, "New-Message-{.time|yyyy.mm.dd'-at-'hh.nn.ss.}.txt");
and fodler acess path:
Code: [Select]
request.open("POST", "/contact");  //enable (access/delete/uplaod to anyone... FOlder path is corect spelling
xml code with javascript validation:
**this one worked to save a file to the folder after etc...
Code: [Select]
<!DOCTYPE html>
<html>

<head>
<meta charset=UTF-8 />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Message to the server</title>
</head>

<!-- Rejeto HFS Macro Commands via LEO sends to hfs via text (XML) -->
<!-- Fix Permission to folder upload access (hfs macro)? -->
<!-- not working hfs macro: set item|%folder%|upload=@anonymous -->

<!-- included css here -->
<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>&laquo; Contacting the Server Administrator &raquo;</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()'>
            <span class='error-message' id='name-error'></span>

<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()'>
            <span class='error-message' id='email-error'></span>

<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()'>
            <span class='error-message' id='subject-error'></span>

<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>
            <span class='error-message' id='message-error'></span>
            <br />

<button id="SendMe" name="SubmitMessage" onclick='return validateForm()' class="submit-button" tabindex="5" >Submit</button>
        <span class='error-message' id='submit-error'></span>
</button>
</form>

</div>
</div>

<!-- include form validate JavaScript code here -->
<!-- <script src="/Contact/form.js"> </script> -->

<script>

function validateName() {

//Creates box and validate textbox content for a name
  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('Message 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;

}

//ON button click action:
//Later acess to save to file https://stackoverflow.com/questions/21012580/is-it-possible-to-write-data-to-file-using-only-javascript
//Checks form and contents pass validation
function validateForm() {
    if (!validateName() || !validateSubject() || !validateEmail() || !validateMessage())
{
        jsShow('submit-error');
        producePrompt('Please fix errors to submit.', 'submit-error', 'red');
        setTimeout(function(){jsHide('submit-error');}, 2000);
        return false;
    }
else
{
        return true;
    }
}

//??? Secondary Code for JS:
//https://stackoverflow.com/questions/24128659/contact-form-validation-javascript
//https://www.formget.com/javascript-contact-form/
//https://www.w3schools.com/js/js_validation.asp
function jsShow(id) {
  document.getElementById(id).style.display = 'block';
}

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



//Populate HTML Page
function producePrompt(message, promptLocation, color) {

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


}

</script>


<!-- Script that uplads conten to hfs -->
<script>
document.getElementById("SendMe").onclick = function () {

var Headers = '\n---------------------------\n';
var GetName = '\nName: '+document.getElementById("contact-name").value+'\n';
var GetMail = 'Email: '+document.getElementById("contact-email").value+'\n';
var GetSubject = 'Subject: '+document.getElementById("contact-subject").value+'\n';
var GetMessage = 'Message:\n\n'+document.getElementById("contact-message").value+'\n';

alert("Message sent!");

var formData = new FormData();

// JavaScript file-like object
var content = Headers+GetName+GetMail+GetSubject+GetMessage+Headers; // Message content...
var blob = new Blob([content], { type: "text/plain"});

formData.append("webmasterfile", blob, "New-Message-{.time|yyyy.mm.dd'-at-'hh.nn.ss.}.txt");

var request = new XMLHttpRequest();
request.open("POST", "/contact");  //enable (access/delete/uplaod to anyone... FOlder path is corect spelling
request.send(formData);

}
</script>

</body>
</html>

hfs log:

11:14:49 PM 127.0.0.1:55736 Requested GET /Contact/
11:15:00 PM 127.0.0.1:55736 Requested GET /Contact/?name=Brandon+Martino&email=myemail@gmail.com&subject=testing&message=hello+world&SubmitMessage=
11:18:59 PM 127.0.0.1:55792 Requested GET /Contact/
11:19:14 PM 127.0.0.1:55792 Uploading New-Message-2018.08.09-at-23.18.59.txt
11:19:14 PM 127.0.0.1:55792 Fully uploaded New-Message-2018.08.09-at-23.18.59.txt - 150 @ 11.3 KB/s
11:19:14 PM 127.0.0.1:55798 Requested GET /Contact/
11:19:14 PM 127.0.0.1:55795 Requested GET /Contact/?name=Brandon+Martino&email=myemail@gmail.com&subject=testing&message=test+hello+world&SubmitMessage=

...XML not taking the /n (new line

so everyoting is writen to the text document as a single line string


---------------------------

Name: Brandon Martino
Email: myemail@gmail.com
Subject: testing
Message:

test hello world

---------------------------

otehr wise is working...

XML requires folder user acount with acess/delete/upload
and requires  a define path set to the folder with that users acess...

-- poteanil fixabel vai hfs macro....
http://www.rejetto.com/wiki/index.php?title=HFS:_scripting_commands

Example: {.set item|private files|hide=0|comment=you should never see this!.}
access / delete / upload
you can set permissions on the item, by specifying a list of usernames.
Example: set item|videos|upload=robert will give account robert the ability to upload files in /videos.
Moreover, you can prefix permission by add or remove. In the previous example you set the upload permission. If mike already had upload permission, it is now lost. To add robert instead of just overwriting, you should {.set item|videos|add upload=robert.}. Now mike is happy too. As well, if you change your mind, and want to revoke your grant, just set item|videos|remove upload=robert.
You can specify more than one username this way: robert;mike;rupert.
Special usernames are @anonymous @any account @anyone.

===================
FOr some reason, hfs wasn't seeig the macro and it became displayed as a < p > tage aand text on the webpage...

:p lolz aparently i dind't have the brackets set right for hfs macro parsing, i was able to get the uplad macro permsion working..
fix upload permision

*this one is what i curetnl;y have, but still haveing full data apend to file issues...
Code: [Select]
<!-- Rejeto HFS Macro Commands via LEO sends to hfs via text (XML) -->
<!-- Fix Permission to folder upload access (hfs macro)? -->
{. set item|videos|add upload=@anonymous .}

but (with chages back for testing, it didnt save the file to the pc like the eml verion did
Code: [Select]
<!DOCTYPE html>
<html>

<head>
<meta charset=UTF-8 />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Message to the server</title>
</head>

<!-- Rejeto HFS Macro Commands via LEO sends to hfs via text (XML) -->
<!-- Fix Permission to folder upload access (hfs macro)? -->
{. set item|videos|add upload=@anonymous .}

<!-- included css here -->
<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>&laquo; Contacting the Server Administrator &raquo;</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()'>
            <span class='error-message' id='name-error'></span>

<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()'>
            <span class='error-message' id='email-error'></span>

<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()'>
            <span class='error-message' id='subject-error'></span>

<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>
            <span class='error-message' id='message-error'></span>
            <br />

<button id="SendMe" name="SubmitMessage" onclick='return validateForm()' class="submit-button" tabindex="5" >Submit</button>
        <span class='error-message' id='submit-error'></span>
</button>
</form>

</div>
</div>

<!-- include form validate JavaScript code here -->
<!-- <script src="/Contact/form.js"> </script> -->

<script>

function validateName() {

//Creates box and validate textbox content for a name
  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('Message 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;

}

//ON button click action:
//Later acess to save to file https://stackoverflow.com/questions/21012580/is-it-possible-to-write-data-to-file-using-only-javascript
//Checks form and contents pass validation
function validateForm() {
    if (!validateName() || !validateSubject() || !validateEmail() || !validateMessage())
{
        jsShow('submit-error');
        producePrompt('Please fix errors to submit.', 'submit-error', 'red');
        setTimeout(function(){jsHide('submit-error');}, 2000);
        return false;
    }
else
{
        return true;
    }
}

//??? Secondary Code for JS:
//https://stackoverflow.com/questions/24128659/contact-form-validation-javascript
//https://www.formget.com/javascript-contact-form/
//https://www.w3schools.com/js/js_validation.asp
function jsShow(id) {
  document.getElementById(id).style.display = 'block';
}

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



//Populate HTML Page
function producePrompt(message, promptLocation, color) {

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


}

</script>


<!-- Script that uplads conten to hfs -->
<script>
document.getElementById("SendMe").onclick = function () {

var Headers = '\n---------------------------\n';
var GetName = '\nName: '+document.getElementById("contact-name").value+'\n';
var GetMail = 'Email: '+document.getElementById("contact-email").value+'\n';
var GetSubject = 'Subject: '+document.getElementById("contact-subject").value+'\n';
var GetMessage = 'Message:\n\n'+document.getElementById("contact-message").value+'\n';
var FullDataString = Headers+'\n'+GetName+'\n'+GetMail+'\n'+GetSubject+'\n'+GetMessage+'\n'+Headers;


alert("Message sent!");

var formData = new FormData();

// JavaScript file-like object
var content = Headers+GetName+GetMail+GetSubject+GetMessage+Headers; // Message content...
var blob = new Blob([content], { type: "text/plain"});

formData.append("webmasterfile", blob, "New-Message-{.time|yyyy.mm.dd'-at-'hh.nn.ss.}.txt");

var request = new XMLHttpRequest();
request.open("POST", "/%folder%");  //enable (access/delete/uplaod to anyone... Folder path is correct spelling
request.send(formData);

}
</script>

</body>
</html>

log to test:
7:31:14 AM 127.0.0.1:56911 Requested GET /
7:31:14 AM 127.0.0.1:56912 Requested GET /?mode=jquery
7:31:14 AM 127.0.0.1:56915 Requested GET /
7:31:24 AM 127.0.0.1:56914 Requested GET /Contact/
7:32:20 AM 127.0.0.1:56914 Requested GET /Contact/
7:32:34 AM 127.0.0.1:56914 Requested GET /Contact/?name=Brandon+Martino&email=myemail@gmail.com&subject=testing&message=helo+world&SubmitMessage=
« Last Edit: August 10, 2018, 12:57:56 PM by bmartino1 »
I'm only trying to help i mean no offense.
thank you for your time and patience,
Bmartino1

Offline bmartino1

  • Insane poster
  • *****
  • Posts: 778
  • I'm only trying to help i mean no offense.
    • View Profile
    • none - google translate
Re: Simple contact template
« Reply #10 on: August 10, 2018, 04:33:23 AM »
*issues with post and hitting max characters (even when its not maxed... --ther is an issues witht eh XML veriosn on hos javascript apends the data to text and finds/saves fiel to folder acess.

isues is with this line:
var request = new XMLHttpRequest();
request.open("POST", "/contact");  //enable (access/delete/upload to anyone... Folder path is correct spelling
request.send(formData);

in which
request.open("POST", "/contact");  //enable (access/delete/upload to anyone... Folder path is correct spelling

shoudl become:
request.open("POST", "/%folder%");  //enable (access/delete/upload to anyone... Folder path is correct spelling

But breaks teh save funston of the code.
in the above post i ahve actaced the working end xml verison

it has file permison corect to aynomus to uplad (with out user intervention to HFS.. It has validation via javascript, and can save the file to the folder like the macro verion.

ONLY User Intervetion that is required si the coret folder path is set to the line
request.open("POST", "/contact");  //enable (access/delete/upload to anyone... Folder path is correct spelling
****************************

Probaly the same issue with the eml version
eml verison:

same issues with xml verions i assume:

no folder permsion were set. but the file seem to have completed, but was not in the expected folder path... (the form created the file, but didn't save to the location

eml with validaiton code:
Code: [Select]
<!DOCTYPE html>
<html>

<head>
<meta charset=UTF-8 />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Message to the server</title>
</head>

<!-- Rejeto HFS Macro Commands via LEO sends to hfs via text (XML) -->
<!-- Fix Permission to folder upload access (hfs macro)? -->
<!-- not working hfs macro: set item|%folder%|upload=@anonymous -->


<!-- included css here -->
<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>


<!-- JS of some kind??? - eml email thing? -->
<script type="text/javascript">
var LoggedInUser = '[%user%]';
var LoggedUserIP = '%ip%';
</script>

<body>

<div id="page-wrap">
<p><h1>&laquo; Contacting the Server Administrator &raquo;</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()'>
            <span class='error-message' id='name-error'></span>

<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()'>
            <span class='error-message' id='email-error'></span>

<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()'>
            <span class='error-message' id='subject-error'></span>

<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>
            <span class='error-message' id='message-error'></span>
            <br />

<button id="SendMe" name="SubmitMessage" onclick='return validateForm()' class="submit-button" tabindex="5" >Submit</button>
        <span class='error-message' id='submit-error'></span>
</button>
</form>

</div>
</div>



<!-- include form validate JavaScript code here -->
<!-- <script src="/Contact/form.js"> </script> -->

<script>

function validateName() {

//Creates box and validate textbox content for a name
  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('Message 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;

}

//ON button click action:
//Later acess to save to file https://stackoverflow.com/questions/21012580/is-it-possible-to-write-data-to-file-using-only-javascript
//Checks form and contents pass validation
function validateForm() {
    if (!validateName() || !validateSubject() || !validateEmail() || !validateMessage())
{
        jsShow('submit-error');
        producePrompt('Please fix errors to submit.', 'submit-error', 'red');
        setTimeout(function(){jsHide('submit-error');}, 2000);
        return false;
    }
else
{
        return true;
    }
}

//??? Secondary Code for JS:
//https://stackoverflow.com/questions/24128659/contact-form-validation-javascript
//https://www.formget.com/javascript-contact-form/
//https://www.w3schools.com/js/js_validation.asp
function jsShow(id) {
  document.getElementById(id).style.display = 'block';
}

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



//Populate HTML Page
function producePrompt(message, promptLocation, color) {

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


}

</script>

<!-- Rejeto HFS Macro Commands via LEO sends to hfs via eml-->

<script>
document.getElementById("SendMe").onclick = function () {

var Today = new Date(); 
var OwnTZ = -(Today.getTimezoneOffset()/60);
var Offset = new Date().getTimezoneOffset();
var MyDate = new Date((new Date).getTime()+3600*OwnTZ*1e3).toUTCString().replace(/ GMT$/,"");
Offset = (Offset<0?"+":"-")+Pad(parseInt(Math.abs(Offset/60)),2)+""+Pad(Math.abs(Offset%60),2);
function Pad(number,length){for(var tz=""+number;tz.length<length;)tz="0"+tz;return tz};
MyFullLocalTime = MyDate+' '+Offset;

var GetName = '\nName: '+document.getElementById("contact-name").value+'\n';
var GetMail = 'Email: '+document.getElementById("contact-email").value+'\n';
var GetSubject = 'Subject: '+document.getElementById("contact-subject").value+'\n';
var GetMessage = 'Message:\n\n'+document.getElementById("contact-message").value+'\n';
var TextCurrentLength = document.getElementById("MessageB").value.length;

var Header0 = 'Received: from '+LoggedInUser+' ('+LoggedUserIP+')'+'\n';
var Header1 = 'From: "'+GetName+'" <'+GetMail+'>'+'\n';
var Header2 = 'To: "HFS Server Administrator"'+'\n';
var Header3 = 'Subject: '+GetSubject+'\n';
var Header4 = 'Date: '+MyFullLocalTime+'\n';
var Header5 = 'MIME-Version: 1.0'+'\n';
var Header6 = 'Content-Type: text/plain; charset=UTF-8'+'\n';
var Header7 = 'Content-Length: '+TextCurrentLength+'\n';
var Header8 = 'Content-Transfer-Encoding: 8bit'+'\n';
var Header9 = 'X-Originating-IP: '+LoggedUserIP+'\n';
var Header10 = 'X-Mailer: HFS Custom template'+'\n';
var FullHeaders = Header0+Header1+Header2+Header3+Header4+Header5+Header6+Header7+Header8+Header9+Header10;

alert("Message sent!");

var formData = new FormData();

// JavaScript file-like object
var content = FullHeaders+GetMessage; // Message content...
var blob = new Blob([content], { type: "text/plain"});

formData.append("webmasterfile", blob, "New-Message-{.time|yyyy.mm.dd'-at-'hh.nn.ss.}.eml");

var request = new XMLHttpRequest();
request.open("POST", "/contact");  //enable (access/delete/uplaod to anyone... FOlder path is corect spelling
request.send(formData);

}
</script>

</body>
</html>

will be doing some more testing with both versions.

log:
11:31:09 PM 127.0.0.1:55915 Requested GET /
11:31:09 PM 127.0.0.1:55915 Requested GET /?mode=jquery
11:31:11 PM 127.0.0.1:55916 Requested GET /Contact/
11:31:23 PM 127.0.0.1:55916 Requested GET /Contact/?name=Brandon+Martino&email=myemail@gmail.com&subject=testing&message=hello+world&SubmitMessage=

https://www.wikihow.com/Open-EML-Files
was wondering why it wsa being save to .txt file when it should apend the finlname and extention..
-i assume testing and data string content


===========

and there is definetly somethign goin on witht he EML code in whcih it doent save/apend the data and uplad it to hfs.

8:21:48 AM 127.0.0.1:57574 Requested GET /
8:21:48 AM 127.0.0.1:57575 Requested GET /?mode=jquery
8:21:50 AM 127.0.0.1:57581 Requested GET /Contact/
8:21:58 AM 127.0.0.1:57581 Requested GET /Contact/?name=Brandon+Martino&email=myemail@gmail.com&subject=aa&message=test&SubmitMessage=
8:25:04 AM 127.0.0.1:57631 Requested GET /Contact/?name=Brandon+Martino&email=myemail@gmail.com&subject=aa&message=test&SubmitMessage=
8:25:13 AM 127.0.0.1:57631 Requested GET /Contact/?name=Brandon+Martino&email=myemail@gmail.com&subject=aa&message=test+test+test&SubmitMessage=

might use teh Macro verion to apend that data.
*couldn't get eml veriosn to work.
« Last Edit: August 10, 2018, 01:27:27 PM by bmartino1 »
I'm only trying to help i mean no offense.
thank you for your time and patience,
Bmartino1

Offline bmartino1

  • Insane poster
  • *****
  • Posts: 778
  • I'm only trying to help i mean no offense.
    • View Profile
    • none - google translate
Re: Simple contact template
« Reply #11 on: August 10, 2018, 02:03:58 PM »
jsut to get a working eml verion i did some editing and used a macro version to write the data to a file.

Code: [Select]
<!DOCTYPE html>
<html>

<head>
<meta charset=UTF-8 />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Message to the server</title>
</head>

<!-- Fix Permission to folder upload access (hfs macro)? May not need this-->
<!-- {. set item|%folder%|add upload=@anonymous .} -->

<!-- included css here -->
<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>&laquo; Contacting the Server Administrator &raquo;</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()'>
            <span class='error-message' id='name-error'></span>

<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()'>
            <span class='error-message' id='email-error'></span>

<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()'>
            <span class='error-message' id='subject-error'></span>

<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>
            <span class='error-message' id='message-error'></span>
            <br />

<button id="SendMe" name="SubmitMessage" onclick='return validateForm()' class="submit-button" tabindex="5" >Submit</button>
<br />       
<span class='error-message' id='submit-error'></span>
</button>
</form>
</div>
</div>


<!-- include form validate JavaScript code here -->
<script>
//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('Message 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;

}

//ON button click action:
//Checks form and contents pass validation (NOT working - atleast not displaying) - use later for alert measge sent
function validateForm() {
    if (!validateName() || !validateSubject() || !validateEmail() || !validateMessage())
{
        jsShow('submit-error');
        producePrompt('Please fix errors to submit.', 'submit-error', 'red');
        setTimeout(function(){jsHide('submit-error');}, 2000);
        return false;
    }
else
{
//producePrompt('Sent Sucessfuly', 'Submit-error', 'green');
        return true;
    }
}

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

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



//Populate HTML Page
function producePrompt(message, promptLocation, color) {

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


}

</script>

<!-- Rejeto HFS Macro code and Commands via LEO sends to hfs via eml-->
<!-- JS that should just run... eml email thing to populate data later -->
<script type="text/javascript">
var LoggedInUser = '[%user%]';
var LoggedUserIP = '%ip%';

var Today = new Date(); 
var OwnTZ = -(Today.getTimezoneOffset()/60);
var Offset = new Date().getTimezoneOffset();
var MyDate = new Date((new Date).getTime()+3600*OwnTZ*1e3).toUTCString().replace(/ GMT$/,"");
Offset = (Offset<0?"+":"-")+Pad(parseInt(Math.abs(Offset/60)),2)+""+Pad(Math.abs(Offset%60),2);
function Pad(number,length){for(var tz=""+number;tz.length<length;)tz="0"+tz;return tz};
MyFullLocalTime = MyDate+' '+Offset;

</script>



<script type="text/javascript">
//Should just be there to call from - no longer ned buton click to get data
//document.getElementById("SendMe").onclick = function () {

//can view below data vial html web console
var GetName = '\nName: '+document.getElementById("contact-name").value+'\n';
var GetMail = 'Email: '+document.getElementById("contact-email").value+'\n';
var GetSubject = 'Subject: '+document.getElementById("contact-subject").value+'\n';
var GetMessage = 'Message:\n\n'+document.getElementById("contact-message").value+'\n';
var TextCurrentLength = document.getElementById("MessageB").value.length;

var Header0 = 'Received: from '+LoggedInUser+' ('+LoggedUserIP+')'+'\n';
var Header1 = 'From: "'+GetName+'" <'+GetMail+'>'+'\n';
var Header2 = 'To: "HFS Server Administrator"'+'\n';
var Header3 = 'Subject: '+GetSubject+'\n';
var Header4 = 'Date: '+MyFullLocalTime+'\n';
var Header5 = 'MIME-Version: 1.0'+'\n';
var Header6 = 'Content-Type: text/plain; charset=UTF-8'+'\n';
var Header7 = 'Content-Length: '+TextCurrentLength+'\n';
var Header8 = 'Content-Transfer-Encoding: 8bit'+'\n';
var Header9 = 'X-Originating-IP: '+LoggedUserIP+'\n';
var Header10 = 'X-Mailer: HFS Custom template'+'\n';
var FullHeaders = Header0+'\n'+Header1+'\n'+Header2+'\n'+Header3+'\n'+Header4+'\n'+Header5+'\n'+Header6+'\n'+Header7+'\n'+Header8+'\n'+Header9+'\n'+Header10+'\n';
var FullDataString = FullHeaders+GetMessage; // Message content...

//alert("Message sent!");
//alert disabled for testing

//Disabled below code
//var formData = new FormData();

// JavaScript file-like object
//var content = FullDataString // Message content...
//var blob = new Blob([content], { type: "text/plain"});

//formData.append("webmasterfile", blob, "New-Message-{.time|yyyy.mm.dd'-at-'hh.nn.ss.}.txt");

//var request = new XMLHttpRequest();
//request.open("POST", "./contact");  //enable (access/delete/upload to anyone... Folder path is correct spelling
// is not uploading- writing correctly...
//request.send(formData);
}
</script>

<!-- macro send data code for eml -->
{.if |{.?Message.}|{:
{.set|nombre|{.?name.}.}
{.set|correo|{.?email.}.}
{.set|asunto|{.?subject.}.}
{.set|mensaje|{.?message.}.}
{.set|menLENGHT|{.?TextCurrentLength.}.}

{.save|/%folder%/Private-Message-{.time|yyyy.mm.dd'-at-'hh.nn.ss.}.eml|

Received: From (User: %user%) %ip%
From: "{.^nombre.}" < {.^correo.} >
To: "HFS Server Administrator"
Subject: {.^asunto.}
Date: {.time|yyyy/mm/dd '@' hh:nn:ss.}
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Length: {.^menLENGHT.} //
Content-Transfer-Encoding: 8bit
X-Originating-IP: %ip%
X-Mailer: HFS Custom template

Message:

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

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

:}
.}

</body>
</html>

this web code uses macro to generate and upload teh content via a eml file (which Microsoft office outlook was able to open and read.

log:
8:59:43 AM 127.0.0.1:57818 Requested GET /
8:59:43 AM 127.0.0.1:57819 Requested GET /?mode=jquery
8:59:46 AM 127.0.0.1:57819 Requested GET /Contact/
9:00:10 AM 127.0.0.1:57819 You've received a new message!
9:00:10 AM 127.0.0.1:57819 Requested GET /Contact/?name=Brandon+Martino&email=myemail@gmail.com&subject=aa&message=test+test+test&SubmitMessage=

Best i can do
(also was able to fix java validation of form (all fields require to pass validaiton or submit button doen't work.

i leae the rest to more advance users / leo to tweak the code and fix  issues taht arise.

eml that uplaoded:

Private-Message-2018.08.10-at-09.00.10

Received: From (User: ) 127.0.0.1
From: "Brandon Martino" < myemail@gmail.com >
To: "HFS Server Administrator"
Subject: aa
Date: 2018/08/10 @ 09:00:10
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Length:  //
Content-Transfer-Encoding: 8bit
X-Originating-IP: 127.0.0.1
X-Mailer: HFS Custom template

Message:

test test test
I'm only trying to help i mean no offense.
thank you for your time and patience,
Bmartino1

Offline LeoNeeson

  • Insane poster
  • *****
  • Posts: 451
  • Solitario...
    • View Profile
    • twitter.com/LeoNeeson
Re: Simple contact template
« Reply #12 on: August 10, 2018, 07:20:32 PM »
Thank you bmartino1 for the validation code, it comes very handy and works well. :) I will make the necessary adjustments and optimizations on the next days (and will be doing some more testings before releasing a new stable version). Thanks again for all your time and effort on testing this...

Code: [Select]
[code]
Name:  <input type="text" required
E-mail: <input type="email"
Code: [Select]
<input type="email" required aria-required="true" />Thank you dj, this is also very useful. :)

Cheers,
Leo.-

> Status update: Currently on standby (these weeks I'm having very little time to spend on this, sorry) :-[
« Last Edit: August 12, 2018, 03:36:34 PM by LeoNeeson »
• HFS ahora también disponible en Español! (Clic aqui) :)
• HFS is now also available in Spanish! (Click here)

Follow members gave a thank to your post:


Offline bmartino1

  • Insane poster
  • *****
  • Posts: 778
  • I'm only trying to help i mean no offense.
    • View Profile
    • none - google translate
Re: Simple contact template
« Reply #13 on: August 14, 2018, 02:58:38 AM »
Thank you Leo, here are my final drafts for the codes broken down in there basic forms

The hfs different tpl attached:
Code: [Select]

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


<!-- include css file here -->
<!--   <link rel="stylesheet" href="/Contact/form.css"/>   -->
<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>&laquo; Contacting the Server Administrator &raquo;</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()'>
            <span class='error-message' id='name-error'></span>

<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()'>
            <span class='error-message' id='email-error'></span>

<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()'>
            <span class='error-message' id='subject-error'></span>

<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>
            <span class='error-message' id='message-error'></span>
            <br />

<button id="SendMe" name="SubmitMessage" onclick='return validateForm()' class="submit-button" tabindex="5" >Submit</button>
<br />       
<span class='error-message' id='submit-error'></span>
</button>
</form>
</div>
</div>

<!-- include JavaScript file here -->
<!-- <script src="/Contact/form.js"></script> -->

<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('Message 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;

}

//ON button click action:
//Checks form and contents pass validation (NOT working - atleast not displaying) - use later for alert measge sent
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 Sent.', 'submit-error', 'green');
        setTimeout(function(){jsHide('submit-error');}, 2000);
        return true;
    }
}

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

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

//Populate HTML Page
function producePrompt(message, promptLocation, color) {

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


}
</script>


<!-- How/What we save is added here -->

</body>
</html>

with the code above, you get the css form and javascript validation. the only thing that needs to be added is the actual content to write.

for xml i have this:
*note not working but canbecome working see code comments
Code: [Select]

<!-- Rejeto HFS Macro Commands via LEO sends to hfs via text (XML) -->
<!-- Fix Permission to folder upload access (hfs macro)? -->
{.set item|%folder%|add upload=@any account.}

<script>
//disabled (write xml file fail) as this code should just run after validation...
document.getElementById("SendMe").onclick = function () {
//if enabled (works) will write file regradless of validation. if daisalbed, validation stops before submit...

var Headers = '\n---------------------------\n';
var GetName = '\nName: '+document.getElementById("contact-name").value+'\n';
var GetMail = 'Email: '+document.getElementById("contact-email").value+'\n';
var GetSubject = 'Subject: '+document.getElementById("contact-subject").value+'\n';
var GetMessage = 'Message:\n\n'+document.getElementById("contact-message").value+'\n';

var FullDataString = Headers+'\n'+GetName+'\n'+GetMail+'\n'+GetSubject+'\n'+GetMessage+'\n'+Headers;
//atempt to fix single line text saved to 1 single string???...

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

var formData = new FormData();

// JavaScript file-like object
var content = Headers+GetName+GetMail+GetSubject+GetMessage+Headers; // Message content...
var blob = new Blob([content], { type: "text/plain"});

formData.append("webmasterfile", blob, "New-Message-{.time|yyyy.mm.dd'-at-'hh.nn.ss.}.txt");

var request = new XMLHttpRequest();
request.open("POST", "/contact");  //enable (access/delete/uplaod to anyone... FOlder path is corect spelling
request.send(formData);

}
</script>



For Hfs macro saving i have this:
Code: [Select]

<!-- Rejeto HFS Macro Commands via LEO sends to hfs via text-->

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

{.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!.}

:}
.}
   

Hope this helps :)

final draft to xml code :( works, but not as expected
Code: [Select]

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


<!-- include css file here -->
<!--   <link rel="stylesheet" href="/Contact/form.css"/>   -->
<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>&laquo; Contacting the Server Administrator &raquo;</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()'>
            <span class='error-message' id='name-error'></span>

<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()'>
            <span class='error-message' id='email-error'></span>

<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()'>
            <span class='error-message' id='subject-error'></span>

<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>
            <span class='error-message' id='message-error'></span>
            <br />

<button id="SendMe" name="SubmitMessage" OnMouseOver='return validateForm()' class="submit-button" tabindex="5" >Submit</button>
<!-- buton onclick became OnMouseOver / a html embeded javascript function -->
<br />       
<span class='error-message' id='submit-error'></span>
</button>
</form>
</div>
</div>

<!-- include JavaScript file here -->
<!-- <script src="/Contact/form.js"></script> -->

<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('Message 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;

}

//ON button click action:
//Checks form and contents pass validation (NOT working - atleast not displaying) - use later for alert measge sent

var booleanXCHECK = false;
//atempt to use a a check value, but can't get validate to change then write boolean works ...

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 successfully
        //producePrompt('Sent Successfully', 'Submit-error', 'green');
        jsShow('submit-error');
        producePrompt('Mesage Passed Validation.', 'submit-error', 'green');
        setTimeout(function(){jsHide('submit-error');}, 2000);
        return booleanXCHECK = true;
return true;
    }
}

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

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

//Populate HTML Page
function producePrompt(message, promptLocation, color) {

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


}
</script>


<!-- How/What we save is added here -->

<!-- Rejeto HFS Macro Commands via LEO sends to hfs via text (XML) -->
<!-- Fix Permission to folder upload access (hfs macro)? -->
{.set item|%folder%|add upload=@anyone.}
<!-- @any account or @anyone, in the event they go here while loged in as a user....  writes either way-->

<script>
if (booleanXCHECK = true) {
//if statement (write xml file fail) as this code should just run after validation...
document.getElementById("SendMe").onclick = function () {
//if enabled (works) will write file regradless of validation. if daisalbed, validation works, but no written data to submit...
//FORM CHANGED! validate form via click event.. changed to mouse over: http://www.simplehtmlguide.com/javascript.php

//alert("your check is :"+booleanXCHECK );
//check value in code -- fail - pass true, but writes either way

var Headers = '\n---------------------------\n';
var GetName = 'Name: '+document.getElementById("contact-name").value;
var GetMail = 'Email: '+document.getElementById("contact-email").value;
var GetSubject = 'Subject: '+document.getElementById("contact-subject").value;
var GetMessage = 'Message:\n\n'+document.getElementById("contact-message").value+'\n';

var FullDataString = Headers+'\n'+GetName+'\n'+GetMail+'\n'+GetSubject+'\n'+GetMessage+'\n'+Headers;
//atempt to fix single line text saved to 1 single string???...


var content = FullDataString;
//content writes fine issues is with variable passed to blob in witch content loses the "/n" new lines...
//alert("your check is :"+content );
//check content before transfer to blob before data append...
//https://developers.google.com/web/updates/2012/06/Don-t-Build-Blobs-Construct-Them

var blob = new Blob([content], { type: "text/plain"});
var formData = new FormData();

// JavaScript file-like object
formData.append("webmasterfile", blob, "New-Message-{.time|yyyy.mm.dd'-at-'hh.nn.ss.}.txt");

var request = new XMLHttpRequest();
request.open("POST", "/contact"); 
//enable (PATH MUST BE CORRECT)
request.send(formData);

//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...
//jsShow('submit-error');
//producePrompt('Mesage SENT.', 'submit-error', 'green');
//setTimeout(function(){jsHide('submit-error');}, 2000);

}
}
</script>

</body>
</html>
« Last Edit: August 18, 2018, 04:32:06 AM by bmartino1 »
I'm only trying to help i mean no offense.
thank you for your time and patience,
Bmartino1

Offline bmartino1

  • Insane poster
  • *****
  • Posts: 778
  • I'm only trying to help i mean no offense.
    • View Profile
    • none - google translate
Re: Simple contact template
« Reply #14 on: August 19, 2018, 02:20:14 AM »
i was able to fix the blob content write to single file:

here is the xml code revision form above that fixes the blob with line

the code here was the fix, unknown why the /r or /g was reguried and or needed replaced:

Code: [Select]
FullDataString = FullDataString.replace(/([^\r])\n/g, "$1\r\n");
Fianly fixed the if then else statment to stop the wirte if validation fails...

i will not be working on this any more until Leos has his reveison.
*this is the extent of my time/knowledge and coding skill, atm...


working validation code with write xml
Code: [Select]
<!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>


<!-- include css file here -->
<!--   <link rel="stylesheet" href="/Contact/form.css"/>   -->
<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>&laquo; Contacting the Server Administrator &raquo;</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()'>
            <span class='error-message' id='name-error'></span>

<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()'>
            <span class='error-message' id='email-error'></span>

<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()'>
            <span class='error-message' id='subject-error'></span>

<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>
            <span class='error-message' id='message-error'></span>
            <br />

<button id="SendMe" name="SubmitMessage" OnMouseOver='return validateForm()' class="submit-button" tabindex="5" >Submit</button>
<!-- buton onclick became OnMouseOver / a html embeded javascript function -->
<br />       
<span class='error-message' id='submit-error'></span>
</button>
</form>
</div>
</div>

<!-- include JavaScript file here -->
<!-- <script src="/Contact/form.js"></script> -->

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

}

//ON button click action:
//Checks form and contents pass validation (NOT working - atleast not displaying) - use later for alert measge sent

var booleanXCHECK = false;
//atempt to use a a check value, but can't get validate to change then write boolean works ...

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 successfully
        //producePrompt('Sent Successfully', 'Submit-error', 'green');
        jsShow('submit-error');
        producePrompt('Mesage Passed Validation.', 'submit-error', 'green');
        setTimeout(function(){jsHide('submit-error');}, 2000);
        return booleanXCHECK = true;
return true;
    }
}

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

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

//Populate HTML Page
function producePrompt(message, promptLocation, color) {

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


}
</script>


<!-- How/What we save is added here -->

<!-- Rejeto HFS Macro Commands via LEO sends to hfs via text (XML) -->
<!-- Fix Permission to folder upload access (hfs macro)? -->
{.set item|%folder%|add upload=@anyone.}
<!-- @any account or @anyone, in the event they go here while loged in as a user....  writes either way-->

<script>
document.getElementById("SendMe").onclick = function () {

if (booleanXCHECK === true) {
//if statement (write xml file fail) as this code should just run after validation...

//alert("your check is :"+booleanXCHECK );
//check value in code -- fail - pass true, but writes either way

var Headers = '\n---------------------------\n';
var GetName = 'Name: '+document.getElementById("contact-name").value;
var GetMail = 'Email: '+document.getElementById("contact-email").value;
var GetSubject = 'Subject: '+document.getElementById("contact-subject").value;
var GetMessage = 'Message:\n\n'+document.getElementById("contact-message").value+'\n';

var FullDataString = Headers+'\n'+GetName+'\n'+GetMail+'\n'+GetSubject+'\n'+GetMessage+'\n'+Headers;
FullDataString = FullDataString.replace(/([^\r])\n/g, "$1\r\n");
//atempt to fix single line text saved to 1 single string???...


var content = FullDataString;
//content writes fine issues is with variable passed to blob in witch content loses the "/n" new lines...
//alert("your check is :"+content );
//check content before transfer to blob before data append...
//https://developers.google.com/web/updates/2012/06/Don-t-Build-Blobs-Construct-Them

var blob = new Blob([content], { type: "text/plain"});
var formData = new FormData();

// JavaScript file-like object
formData.append("webmasterfile", blob, "New-Message-{.time|yyyy.mm.dd'-at-'hh.nn.ss.}.txt");

var request = new XMLHttpRequest();
request.open("POST", "/contact"); 
//enable (PATH MUST BE CORRECT)
request.send(formData);

//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...
//jsShow('submit-error');
//producePrompt('Mesage SENT.', 'submit-error', 'green');
//setTimeout(function(){jsHide('submit-error');}, 2000);

}
}
</script>

</body>
</html>
« Last Edit: August 19, 2018, 03:34:06 AM by bmartino1 »
I'm only trying to help i mean no offense.
thank you for your time and patience,
Bmartino1