SMAM (short for Send Me A Mail) is a free (as in freedom) contact form embedding software.

form.js 4.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  1. var items = {
  2. name: 'form_name',
  3. addr: 'form_addr',
  4. subj: 'form_subj',
  5. text: 'form_text',
  6. };
  7. var server = getServer();
  8. var xhrSend = new XMLHttpRequest();
  9. xhrSend.onreadystatechange = function() {
  10. if (xhrSend.readyState == XMLHttpRequest.DONE) {
  11. console.log(xhrSend.response);
  12. }
  13. };
  14. // Returns the server's base URI based on the user's script tag
  15. // return: the SMAM server's base URI
  16. function getServer() {
  17. var scripts = document.getElementsByTagName('script');
  18. // Parsing all the <script> tags to find the URL to our file
  19. for(var i = 0; i < scripts.length; i++) {
  20. let script = scripts[i];
  21. if(script.src) {
  22. let url = script.src;
  23. // This should be our script
  24. if(url.match(/:[0-9]+\/form\.js$/)) {
  25. // Port has been found
  26. return url.match(/^(http:\/\/[^\/]+)/)[1];
  27. }
  28. }
  29. }
  30. }
  31. // Creates a form
  32. // id: HTML identifier of the document's block to create the form into
  33. // return: nothing
  34. function generateForm(id) {
  35. var el = document.getElementById(id);
  36. var input = {
  37. name: getField(items.name, 'Your name', false, 'input'), // TODO: configurable prefix
  38. addr: getField(items.addr, 'Your e-mail address', true, 'input'),
  39. subj: getField(items.subj, 'Your message\'s subject', false, 'input'),
  40. text: getField(items.text, 'Your message', false, 'textarea')
  41. };
  42. // Adding nodes to document
  43. el.appendChild(input.name);
  44. el.appendChild(input.addr);
  45. el.appendChild(input.subj);
  46. el.appendChild(input.text);
  47. // Adding submit button
  48. el.appendChild(getSubmitButton('form_subm', 'Send the mail'));
  49. }
  50. // Returns a form field
  51. // id: field HTML identifier
  52. // placeholder: placeholder text
  53. // email: boolean: is it an email field?
  54. // type: 'input' or 'textarea'
  55. // return: a div node containing a label and an input text field
  56. function getField(id, placeholder, email, type) {
  57. var field = document.createElement('div');
  58. field.setAttribute('id', id); // TODO: configurable prefix
  59. field.appendChild(getLabel(id, placeholder, type));
  60. field.appendChild(getInputField(id, placeholder, email, type));
  61. return field;
  62. }
  63. // Returns a label
  64. // id: field HTML identifier
  65. // content: label's inner content
  66. // type: 'input' or 'textarea'
  67. // return: a label node the field's description
  68. function getLabel(id, content, type) {
  69. var label = document.createElement('label');
  70. label.setAttribute('for', id + '_' + type);
  71. label.innerHTML = content;
  72. return label;
  73. }
  74. // Returns an input text field
  75. // id: field HTML identifier
  76. // placeholder: placeholder text, field description
  77. // email: boolean: is it an email field?
  78. // type: 'input' or 'textarea'
  79. // return: an input text or email field (depending on "email"'s value') with an
  80. // HTML id and a placeholder text
  81. function getInputField(id, placeholder, email, type) {
  82. var input = document.createElement(type);
  83. if(!type.localeCompare('input')) { // Set input type if input
  84. if(email) {
  85. input.setAttribute('type', 'email');
  86. } else {
  87. input.setAttribute('type', 'text');
  88. }
  89. }
  90. input.setAttribute('required', 'required');
  91. input.setAttribute('placeholder', placeholder);
  92. input.setAttribute('id', id + '_' + type);
  93. return input;
  94. }
  95. // Returns a submit button
  96. // id: button HTML identifier
  97. // text: button text
  98. // return: a div node containing the button
  99. function getSubmitButton(id, text) {
  100. var submit = document.createElement('div');
  101. submit.setAttribute('id', id);
  102. var button = document.createElement('button');
  103. button.setAttribute('type', 'submit');
  104. button.setAttribute('id', id);
  105. // Disable button's default action
  106. button.setAttribute('onSubmit', 'return false;');
  107. button.innerHTML = text;
  108. submit.appendChild(button);
  109. return submit;
  110. }
  111. // Send form data through the XHR object
  112. // return: nothing
  113. function sendForm() {
  114. xhrSend.open('POST', server + '/send');
  115. xhrSend.setRequestHeader('Content-Type', 'application/json');
  116. xhrSend.send(JSON.stringify(getFormData()));
  117. }
  118. // Fetch form inputs from HTML elements
  119. // return: an object containing all the user's input
  120. function getFormData() {
  121. return {
  122. name: document.getElementById(items.name + '_input').value,
  123. addr: document.getElementById(items.addr + '_input').value,
  124. subj: document.getElementById(items.subj + '_input').value,
  125. text: document.getElementById(items.text + '_textarea').value
  126. }
  127. }