Software > HTML & templates

Simple contact template

(1/5) > >>

LeoNeeson:
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: ---[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>
--- End code ---

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

Cheers,
Leo.-

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

LeoNeeson:
I've updated the first post and released a working template (v1.0)


--- Quote from: LeoNeeson on July 22, 2018, 09:26:42 AM ---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.-

--- End quote ---


--- Quote from: 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)

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

--- End quote ---

Thanks dj for your help! :)

bmartino1:
???

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

dj:

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

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


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

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

--- End code ---

Navigation

[0] Message Index

[#] Next page

Go to full version