rejetto forum

Software => HFS ~ HTTP File Server => HTML & templates => Topic started by: LeoNeeson on July 22, 2018, 09:26:42 AM

Title: Simple contact template
Post by: LeoNeeson 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.

(https://i.imgur.com/MEJIRbFm.png) (https://i.imgur.com/MEJIRbF.png)

» 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 (https://en.wikipedia.org/wiki/.eml) 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.-
Title: Re: Simple contact template
Post by: dj 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 (http://rejetto.com/forum/index.php?topic=11298.0))

update: https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects (https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects)
Title: Re: Simple contact template
Post by: LeoNeeson on July 22, 2018, 11:58:28 AM
alternativ this can also be done without macros
Without macros? How?... (I'm curious)

you can use a form without jquery
Yes, I already know that.

But I was trying to avoid using <form method="GET"></form> at all, if that's possible (that's why I haven't used it).

My mistake, I see that I've uploaded the wrong file. :-[ Now I've uploaded the correct file, but the .txt file is being generated only when the page loads, and not when clicking on the button. Is using a <form method="GET"> the only way to send the data to the server?...
Title: Re: Simple contact template
Post by: LeoNeeson 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 (http://rejetto.com/forum/index.php?topic=11298.0))

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

Thanks dj for your help! :)
Title: Re: Simple contact template
Post by: bmartino1 on July 24, 2018, 05:37:01 PM
???

https://stackoverflow.com/questions/21012580/is-it-possible-to-write-data-to-file-using-only-javascript

https://stackoverflow.com/questions/24128659/contact-form-validation-javascript

https://www.w3schools.com/howto/howto_css_contact_form.asp

https://www.formget.com/javascript-contact-form/

https://www.w3schools.com/js/js_validation.asp
Title: Re: Simple contact template
Post by: dj 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"

Title: Re: Simple contact template
Post by: bmartino1 on July 26, 2018, 02:13:51 AM
AS Per Leo Request.

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

HFS different template:

Code: [Select]
<!DOCTYPE html>
<html>
<!-- Rejeto HFS Macro CONTACT Form -->
<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()'>
            <div style="text-align: right"><span class='error-message' id='name-error'></span></div>

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

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

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

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

}

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

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

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

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

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


}


</script>

<!-- How we will write this to hfs:-->


</body>
</html>

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

Attached is a final reproduction picture of how validation looks
Title: Re: Simple contact template
Post by: username1565 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.
Title: Re: Simple contact template
Post by: bmartino1 on July 28, 2018, 07:53:04 AM
AS Per Leo Request.
Here is the post for the Macro code
Macro Version Final draft working full code

Code: [Select]
<!DOCTYPE html>
<html>
<!-- Rejeto HFS Macro CONTACT Form -->
<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()'>
            <div style="text-align: right"><span class='error-message' id='name-error'></span></div>

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

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

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

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

}

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

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

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

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

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


}


</script>

<!-- Rejeto HFS Macro Commands via LEO sends to hfs via text-->
{.if |{.?Message.}|{:
{.set|nombre|{.?name.}.}
{.set|correo|{.?email.}.}
{.set|asunto|{.?subject.}.}
{.set|mensaje|{.?message.}.}

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

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

Message:

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

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

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

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

</script>

</body>
</html>

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

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

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

Message:

pass hello world

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

attached is the tpl file for the macro version
Title: Re: Simple contact template
Post by: LeoNeeson 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).
Title: Re: Simple contact template
Post by: bmartino1 on August 10, 2018, 03:50:58 AM
AS Per Leo Request.

Here is the post for the XML code

Key Notes to codes/ help:
//////////////////////////
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=@anonymous.}

^ code will affect the folder the file is loading form, which needs to be the same folder for the path.

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.

*right now it is set for anyone and anythings, might be safer for @any account...
//////////////////

There is no User intervention required, after re-examining the original code and fixing variables, i have a %folder% parse working with data write... I shouldn't have changed the post wirte and file name append...)

SETUP:
I assume you created a real folder named "contact" > Right Mouse Click Properties > Different Template Tab > Pasted in the
code...

*There were changes done that is different to the JavaScript validation code and form html code to make this work a bit smother.
--See comments

XML Final Draft write option:

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()'>
            <div style="text-align: right"><span class='error-message' id='name-error'></span></div>

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

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

<label for='contactMessage'>Your Message:</label><br />
            <textarea class="form-control" rows="20" cols="20" id='contact-message' tabindex="4" name='message'  placeholder="Please Detail your needs - Enter a brief message" onkeyup='validateMessage()'></textarea>
            <div style="text-align: right"><span class='error-message' id='message-error'></span></div>
            <br /><br />
<div style="text-align: right"><span class='error-message' id='submit-error'></span></div>
<br />
<button id="SendMe" name="SubmitMessage" OnMouseOver='return validateForm()' class="submit-button" tabindex="5" >Submit</button>
<!-- buton onclick became OnMouseOver / a html embeded javascript function -->
</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;

}

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

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

//ON button click action:
var booleanXCHECK = false;
//use to check validation and change boolean value to check before writes ...

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


//Populates the HTML span tag
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 (XML) -->
<!-- Fix Permission to folder code is curently in for file 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 ... should write either way-->

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

if (booleanXCHECK === true) {
//if statement add to check before running write code... as this code should just run after validation...

//alert("your check is :"+booleanXCHECK );
//check value in code in event of issues that needs resolved fail/pass true

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';
GetMessage=GetMessage.replace(/([^\r])\n/g, "$1\r\n");
//atempt to fix single line text saved to 1 single string...

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

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

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

//var request = new XMLHttpRequest();
//request.open("POST", "/contact"); 
//upload acess must be enabled for write to work... (fixed via in tempalte macro comand...)
//Path Must be same path that %folder% points to (the folder where the code is located! 
//request.send(formData);
// ------------------------------------------

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

var request = new XMLHttpRequest();
request.open("POST", "./");  //enable upload in contact
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);

}
else { return false; }
}
</script>

</body>
</html>

log example:
7:40:41 AM 127.0.0.1:51207 Requested GET /
7:40:41 AM 127.0.0.1:51209 Requested GET /?mode=jquery
7:40:42 AM 127.0.0.1:51207 Requested GET /Contact/
7:41:02 AM 127.0.0.1:51207 Uploading New-Message-2018.08.26-at-07.40.42.txt
7:41:02 AM 127.0.0.1:51207 Fully uploaded New-Message-2018.08.26-at-07.40.42.txt - 150 @ 13.3 KB/s
7:41:06 AM 127.0.0.1:51210 Requested GET /Contact/?name=Brandon+Martino&email=my@test.com&subject=ff&message=i+pass+validation&SubmitMessage=
7:41:06 AM 127.0.0.1:51209 Requested GET /Contact/

file content example:

file name:New-Message-2018.08.26-at-07.40.42

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

Name: Brandon Martino
Email: my@test.com
Subject: ff
Message:

i pass validation


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



attached is the xml template code
Title: Re: Simple contact template
Post by: bmartino1 on August 10, 2018, 04:33:23 AM
As Per Leo Request.

Here is the post for the EML code

Using the xml final draft upgrades to the orginal eml version provided via leo:
Info and orgnall eml template write, and fixes from other codes/sources, i have finished my final working draft of the eml code

*This code is still a work in progress as there are some edits and sugestions about this on the post...

Current errors:

Form doesn't clear when finished after submit is clicked, but message is sent and written
-- I believe in the end of the code where the alert box is should be a clear end code... (as it should clear the form after a successful submit)


here is the code for view/quick review
Code: [Select]
<!DOCTYPE html>
<html>
<!-- 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=@anonymous.}

<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"> -->
<!-- https://www.w3schools.com/tags/att_input_type.asp -->
<label for="contact-name">Full Name:</label>
<input type="text" tabindex="1" class="form-control" name="NameA" id="NameB" placeholder="Please Enter Your Full Name.." onkeyup='validateName()'>
            <div style="text-align: right"><span class='error-message' id='name-error'></span></div>

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

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

<label for='contactMessage'>Your Message:</label><br />
            <textarea name="MessageA" id="MessageB" rows="20" cols="20" class="form-control" tabindex="4" placeholder="Please Detail your needs - Enter a brief message" onkeyup='validateMessage()'></textarea>
            <div style="text-align: right"><span class='error-message' id='message-error'></span></div>
            <br /><br />
<div style="text-align: right"><span class='error-message' id='submit-error'></span></div>
<br />
<button id="SendMe" name="SubmitMessage" OnMouseOver='return validateForm()' class="submit-button" tabindex="5" onclick="sendMessage(); return false">{.!Submit.}</button>
<!-- ?cani have both in a single line or will one parse out before the other? buton onclick validation became OnMouseOver / a html embeded javascript function -->
<!-- </form> -->
</div>
</div>

<!-- Validation code using Leos ids -->

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

  var name = document.getElementById('NameB').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('SubjectB').value;
  var required = 2;
  var left = required - submessage.length;

  if (left > 0) {
    producePrompt(left + ' characters are 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('MailB').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('MessageB').value;
  var required = 10;
  var left = required - message.length;

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

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

}

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

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

//ON Sybmit button button click/ Mouse Over action(Validate form passes)://ON button click action:
var booleanXCHECK = false;
//use to check validation and change boolean value to check before writes ...

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

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

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


}


</script>

<!-- How we will write this to hfs:-->
<script type="text/javascript">
//variables to pass latter
var LoggedInUser = '[%user%]';
var LoggedUserIP = '%ip%';
</script>


<script>
document.getElementById("SendMe").onclick = function () {
//alert("your check is :"+booleanXCHECK );
//check value in code in event of issues that needs resolved fail/pass true

if (booleanXCHECK === true) {
//if statement add to check before running write code... as this code should just run after validation...


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 = document.getElementById("NameB").value;
var GetMail = document.getElementById("MailB").value;
var GetSubject = document.getElementById("SubjectB").value;
var GetMessage = '\n'+document.getElementById("MessageB").value+'\n';
//GetMessage=GetMessage.replace(/([^\r])\n/g, "$1\r\n");
//atempt to fix single line text saved to 1 single string... (i think eml write is oky as a 1 line string...)
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;


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, "%folder%New-Message-{.time|yyyy.mm.dd'-at-'hh.nn.ss.}.eml");

var request = new XMLHttpRequest();
request.open("POST", "./");  //enable upload in contact
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);
return true;

}
else { return false; }

}
</script>

</body>
</html>

log:
10:13:54 AM 127.0.0.1:52301 Requested GET /
10:13:54 AM 127.0.0.1:52302 Requested GET /?mode=jquery
10:13:56 AM 127.0.0.1:52305 Requested GET /contact/
10:14:40 AM 127.0.0.1:52305 Uploading New-Message-2018.08.28-at-10.13.56.eml
10:14:40 AM 127.0.0.1:52305 Fully uploaded New-Message-2018.08.28-at-10.13.56.eml - 317 @ 23.8 KB/s
10:14:40 AM 127.0.0.1:52305 Requested POST /contact/
10:15:10 AM 127.0.0.1:52305 Requested GET /
10:15:10 AM 127.0.0.1:52305 Requested GET /?mode=jquery
10:15:12 AM 127.0.0.1:52305 Requested GET /contact/

example file:
file name:New-Message-2018.08.28-at-10.13.56

------------
Received: from [] (127.0.0.1)
From: "brandon " <myemail@test.com>
To: "HFS Server Administrator"
Subject: test
Date: Tue, 28 Aug 2018 10:20:08 -0500
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Length: 48
Content-Transfer-Encoding: 8bit
X-Originating-IP: 127.0.0.1
X-Mailer: HFS Custom template

failed mesage baox validation(auto passes???...)

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

see pictures and finaly eml draft code atached
Title: Re: Simple contact template
Post by: LeoNeeson 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... (https://i.imgur.com/KL4Su77.png)

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) :-[
Title: Re: Simple contact template
Post by: LeoNeeson on August 25, 2018, 03:02:24 AM
@bmartino1: thanks again for you collaboration. :) I would suggest you to make a 'clean up' on all your messages in this thread (editing them and leaving only one working version of each: one for Macro, another for XML and another for the EML method, to avoid confusion with non-working versions). Then, I will edit my first post and add a link to each of your 3 versions, so, if someone wants to have form validation, it could directly use any of your versions (because, at the moment, I don't see the point of releasing a new own revision, since yours are working mostly correctly and I also don't have the enough free time for doing a detailed code revision now).

@JavaScript Experts: in the EML version I use this unoptimized code:

Code: [Select]
var FullHeaders = Header0+Header1+Header2+Header3+Header4+Header5+Header6+Header7+Header8+Header9+Header10;
Is there a more efficient way of doing this in, using plain vanilla JavaScript (https://plainjs.com/)? How we could make the variable 'FullHeaders' much shorter, concatenating the variables Header 0 to 10 (perhaps, using an loop array (https://www.w3schools.com/js/js_array_methods.asp)?). But how?... ???

Cheers,
Leo.-
Title: Re: Simple contact template
Post by: dj on August 25, 2018, 06:33:49 PM
@JavaScript Experts: in the EML version I use this unoptimized code:

Code: [Select]
var FullHeaders = Header0+Header1+Header2+Header3+Header4+Header5+Header6+Header7+Header8+Header9+Header10;
Is there a more efficient way of doing this in, using plain vanilla JavaScript (https://plainjs.com/)? How we could make the variable 'FullHeaders' much shorter, concatenating the variables Header 0 to 10 (perhaps, using an loop array (https://www.w3schools.com/js/js_array_methods.asp)?). But how?... ???

Cheers,
Leo.-


simply write
Code: [Select]
var FullHeaders =
'Received: from '+LoggedInUser+' ('+LoggedUserIP+')'+'\n' +
'From: "'+GetName+'" <'+GetMail+'>'+'\n' +
'To: "HFS Server Administrator"'+'\n'
...
Title: Re: Simple contact template
Post by: LeoNeeson on August 27, 2018, 05:10:16 PM
i don't think the eml is constructed correctly either:
https://github.com/ropensci/EML/blob/master/docs/articles/creating-EML.html
@bmartino1: Did you check the link you have posted?... (http://yoursmiles.org/ssmile/negative/s0959.gif) (https://encyclopediadramatica.rs/Facepalm)

It's NOT that kind of EML format (Ecological Metadata Language (https://en.wikipedia.org/wiki/Ecological_Metadata_Language)).
It IS this kind of EML format (Electronic Mail, file name extension (https://www.online-convert.com/file-format/eml)).

Quote
"EML is a file extension for an e-mail message saved to a file in the MIME RFC 822 standard format by Microsoft Outlook Express as well as some other email programs."

Also, the EML format does NOT start/end with this headers "-----[ BEGIN MESSAGE ]-----" and "-----[ END MESSAGE ]-----". Anyway, please read THIS (http://cr.yp.to/immhf.html) and THIS (https://www.npmjs.com/package/eml-format) page about the EML format before messing with it and making it worst... ::)

Don't worry, if you can't do it (because it's too complex), it's better you leave all as is, until I have enough free time to do a deep review of your code and find the errors. Don't take me wrong, you did a lot of effort and I appreciate it. :)
Title: Re: Simple contact template
Post by: bmartino1 on August 27, 2018, 08:03:06 PM
@Leo,

I believe i have enough info no on how to write the correct content to a text file for a true el structure...
The original eml file you have in your original post was missing JavaScript variables, and in the end would not work after code fixes and changes I made, before I started the validation implementation.

I was having a hard time finding a good true example to put the data together, as i find the macro write for this to be a tad easier then the xml post, ill re edit the eml after i change things around and fix what i have on my end. at that point, i'm will to leave it alone, (Because now i know what i'm trying to write/put data content together :p )

thank you for the clarification and example file i have here:

https://www.online-convert.com/file-format/eml

file: https://cdn.online-convert.com/example-file/document/eml/example.eml

Code: [Select]
Return-Path: <time2talk@online-convert.com>
X-Original-To: time2help@online-convert.com
Delivered-To: time2help@online-convert.com
Received: from vwp0096.webpack.hosteurope.de (vwp0096.webpack.hosteurope.de [87.230.60.103])
by tectrend.de (Postfix) with ESMTPS id AFFC171C0091
for <time2help@online-convert.com>; Wed, 17 Feb 2016 08:11:25 +0100 (CET)
Received: from p549a9204.dip0.t-ipconnect.de ([84.154.146.4] helo=[192.168.2.107]); authenticated
by vwp0096.webpack.hosteurope.de running ExIM with esmtpsa (TLS1.0:DHE_RSA_AES_128_CBC_SHA1:16)
id 1aVwGj-0002PO-95; Wed, 17 Feb 2016 08:11:25 +0100
From: Online-Convert.com <time2talk@online-convert.com>
Subject: =?UTF-8?Q?_EML Example File?=
References: <time2talk@online-convert.com>
To: Online-Convert.com <time2help@online-convert.com>
Message-ID: <56C41D18.3060102@online-convert.com>
Date: Wed, 17 Feb 2016 08:11:20 +0100
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:38.0) Gecko/20100101
 Thunderbird/38.5.1
MIME-Version: 1.0
In-Reply-To: <1SOLws-0BH0K00@online-convert.com>
Content-Type: multipart/alternative;
 boundary="------------050008080707050500070109"
X-bounce-key: webpack.hosteurope.de;time2talk@online-convert.com;1455693085;1ff5b968;

This is a multi-part message in MIME format.
--------------050008080707050500070109
Content-Type: text/plain; charset=utf-8; format=flowed
Content-Transfer-Encoding: 8bit

**
EML test file
Purpose: Provide example of this file type
Document file type: EML
Version: 1.0
Remark:

Example content:
The names "John Doe" for males, "Jane Doe" or "Jane Roe" for females, or "Jonnie Doe" and "Janie Doe" for children, or just "Doe" non-gender-specifically are used as placeholder names for a party whose true identity is unknown or must be withheld in a legal action, case, or discussion. The names are also used to refer to acorpse or hospital patient whose identity is unknown. This practice is widely used in the United States and Canada, but is rarely used in other English-speaking countries including the United Kingdom itself, from where the use of "John Doe" in a legal context originates. The names Joe Bloggs or John Smith are used in the UK instead, as well as in Australia and New Zealand.

John Doe is sometimes used to refer to a typical male in other contexts as well, in a similar manner to John Q. Public, known in Great Britain as Joe Public, John Smith or Joe Bloggs. For example, the first name listed on a form is often John Doe, along with a fictional address or other fictional information to provide an example of how to fill in the form. The name is also used frequently in popular culture, for example in the Frank Capra film Meet John Doe. John Doe was also the name of a 2002 American television series.

Similarly, a child or baby whose identity is unknown may be referred to as Baby Doe. A notorious murder case in Kansas City, Missouri, referred to the baby victim as Precious Doe. Other unidentified female murder victims are Cali Doe and Princess Doe. Additional persons may be called James Doe, Judy Doe, etc. However, to avoid possible confusion, if two anonymous or unknown parties are cited in a specific case or action, the surnames Doe and Roe may be used simultaneously; for example, "John Doe v. Jane Roe". If several anonymous parties are referenced, they may simply be labelled John Doe #1, John Doe #2, etc. (the U.S. Operation Delego cited 21 (numbered) "John Doe"s) or labelled with other variants of Doe / Roe / Poe / etc. Other early alternatives such as John Stiles and Richard Miles are now rarely used, and Mary Major has been used in some American federal cases.



File created by http://www.online-convert.com
More example files: http://www.online-convert.com/file-type
Text of Example content: Wikipedia (http://en.wikipedia.org/wiki/John_Doe)
License: Attribution-ShareAlike 3.0 Unported (http://creativecommons.org/licenses/by-sa/3.0/)

Feel free to use and share the file according to the license above.




--------------050008080707050500070109
Content-Type: text/html; charset=utf-8
Content-Transfer-Encoding: 8bit

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
  </head>
  <body text="#000000" bgcolor="#FFFFFF">
    <font style="font-family: arial,helvetica,sans-serif;" size="2"> </font><b><font
        color="#660b23" face="Arial"> </font></b> <font
      style="font-family: arial,helvetica,sans-serif;" size="2">
      <div style="POSITION: relative">
<h2>EML test file</h2>
Purpose: Provide example of this file type<br>
Document file type: EML<br>
Version: 1.0<br>
Remark:<br><br>

Example content:<br>
The names "<b>John Doe</b>" for males, "<b>Jane Doe</b>" or "<b>Jane Roe</b>" for females, or "Jonnie Doe" and "Janie Doe" for children, or just "Doe" non-gender-specifically are used as placeholder names for a party whose true identity is unknown or must be withheld in a legal action, case, or discussion. The names are also used to refer to acorpse or hospital patient whose identity is unknown. This practice is widely used in the United States and Canada, but is rarely used in other English-speaking countries including the United Kingdom itself, from where the use of "John Doe" in a legal context originates. The names Joe Bloggs or John Smith are used in the UK instead, as well as in Australia and New Zealand.
<br><br>
John Doe is sometimes used to refer to a typical male in other contexts as well, in a similar manner to John Q. Public, known in Great Britain as Joe Public, John Smith or Joe Bloggs. For example, the first name listed on a form is often John Doe, along with a fictional address or other fictional information to provide an example of how to fill in the form. The name is also used frequently in popular culture, for example in the Frank Capra film Meet John Doe. John Doe was also the name of a 2002 American television series.
<br><br>
Similarly, a child or baby whose identity is unknown may be referred to as Baby Doe. A notorious murder case in Kansas City, Missouri, referred to the baby victim as Precious Doe. Other unidentified female murder victims are Cali Doe and Princess Doe. Additional persons may be called James Doe, Judy Doe, etc. However, to avoid possible confusion, if two anonymous or unknown parties are cited in a specific case or action, the surnames Doe and Roe may be used simultaneously; for example, "John Doe v. Jane Roe". If several anonymous parties are referenced, they may simply be labelled John Doe #1, John Doe #2, etc. (the U.S. Operation Delego cited 21 (numbered) "John Doe"s) or labelled with other variants of Doe / Roe / Poe / etc. Other early alternatives such as John Stiles and Richard Miles are now rarely used, and Mary Major has been used in some American federal cases.
<br><br>


File created by <a href="http://www.online-convert.com" target="_blank">http://www.online-convert.com</a><br>
More example files: <a href="http://www.online-convert.com/file-type" target="_blank">http://www.online-convert.com/file-type</a><br>
Text of Example content: <a href="http://en.wikipedia.org/wiki/John_Doe" target="_blank">Wikipedia</a><br>
License: <a href="http://creativecommons.org/licenses/by-sa/3.0/" target="_blank">Attribution-ShareAlike 3.0 Unported</a><br><br>

Feel free to use and share the file according to the license above.<br>
          <br>
        </font><br>
        <br>
      </div>
    </font>
  </body>
</html>

--------------050008080707050500070109--

it looks like we will be construing a eml html webpage of sorts to fill in true header and message content. Now that i also have the uscert rf288 mimetype, i can look deeper into the bare min for the eml file and write constrution.

atm i will leave the code alone as i'm also on a curtent time crunch.
Title: Re: Simple contact template
Post by: Fysack on October 26, 2018, 09:02:01 PM
18  8) hardcore
Title: Re: Simple contact template
Post by: sergio on March 24, 2019, 05:30:01 PM
What is the final file?
Title: Re: Simple contact template
Post by: bmartino1 on March 24, 2019, 08:04:10 PM
For witch one? I put this project aside I could fox the various bugs here and there...

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

Either pull from the first post on here by leo or go to my post with detail and code change (adds validation).
Title: Re: Simple contact template
Post by: LeoNeeson on March 25, 2019, 07:58:56 AM
What is the final file?
Hi Sergio!. You can choose any file posted on my first (http://rejetto.com/forum/index.php?topic=12122.msg1062955#msg1062955) post (since those are 'final' stable versions). I didn't have the time to release a quality tested version 2.0, but it will come on the future for sure (yet, I don't have plans to work on this on the near future).

Currently, I recommend you to use this 'Simple-Contact_v1.0a-Macro-Method.zip (http://rejetto.com/forum/index.php?action=dlattach;topic=12122.0;attach=8593 .zip)'. Usage is very simple: you simply create a 'real folder' named "contact", and then copy there the file 'hfs.diff.tpl' (from the .zip file), and it's all ready to use. It has been tested to be working fine, without bugs. If you have any other doubts, feel free to open a question in the Spanish section of the forum (and I will help you there). :)

Cheers,
Leo.-
Title: Re: Simple contact template
Post by: sergio on March 25, 2019, 02:42:09 PM
Thanks LeoNeeson.
Title: Re: Simple contact template
Post by: Fysack on October 12, 2019, 02:13:21 AM
Thanks LeoNeeson.
thx, yes, agree  :-* :-* :-*