Fast Form Setup

A website needed a form set up quickly. The form would ask a specific question.

It would be used for only a few days, so no spam blocking was required.

Fast Form Setup was written for that.

It was a quick write. Little error checking was required. Testing was fast. And it worked a treat.

There are two files that make up Fast Form Setup.

1. The web page with the form.

   The web page form has three sections: (i) The form. (ii) The thank-you message. (iii) The JavaScript.

2. The form handling script.

   The script receives the form information and sends it in an email to you.

When the web page with the form is loaded, the form is visible.

When the form is submitted, the form information is sent to the form handling script. The script sends the content to you in an email.

After the form is submitted, the form is replaced with a thank-you message.

Fast Form Setup Implementation

Implementation has two files, the web page and the form handling script.

Let's do the form handling script first because its URL needs to be known to do the web page.

The form handling script:

Here is the Fast Form Setup form handling script. Customization and installation notes follow.

<?php
/*
   Fast Form Setup Handler
   Version 1.0
   June 15, 2020
   Will Bontrager Software LLC
   https://www.willmaster.com/
*/
/* Customizations */
// There are two places to customize.

// Place 1:
// Email address destination for form contents

$EmailAddress='me@isp.com';

// Place 2:
//Email subject line

$EmailSubject='Form Info';

/* End of Customization */

$EmailContent = array();
foreach( $_POST as $k => $v )
{
   $field = array();
   if( ! preg_match('/^Field_(\d+)$/',$k,$match) ) { continue; }
   $field[] = "_____\nField # {$match[1]}";
   foreach( explode("\t",$v) as $pair )
   {
      $ta = explode(':',trim($pair),2);
      if( ! empty($ta[1]) ) { $ta[1] = "\n\t{$ta[1]}"; }
      $field[] = "{$ta[0]}{$ta[1]}";
   }
   $EmailContent[] = implode("\n",$field);
}
mail($EmailAddress,$EmailSubject,implode("\n\n",$EmailContent),"From: $EmailAddress");
exit;
?>

Customization notes —

There are two places to customize.

1. At the $EmailAddress='me@isp.com'; line, replace me@isp.com with the email address where form information shall be sent to.

2. At the $EmailSubject='Form Info'; line, replace Form Info with the subject for the email with the form information.

The email content is automatically composed and formatted. Each recognized form field of the form is listed, in order. The fields are numbered. Below each field is this information (as available):

• Field id.
• Field name.
• Field value.
• Field type.
• Checked or unchecked status — if the field is a radio button or a checkbox.

Here is an example of content that might be sent to the specified email address:

_____
Field # 1
name
	which_form
value
	quick temporary form
type
	hidden

_____
Field # 2
id
	name-field
name
	name
value
	Will Testing
type
	text

_____
Field # 3
id
	comment-field
name
	comment
value
	Will commenting
type
	textarea

_____
Field # 4
value
	Send Information
type
	button

Installation note —

Name the Fast Form Setup Handler script fast-form-handling.php or other .php file name that works for you. Upload the file to your domain in a publicly accessible directory.

Make a note of its URL. Determine its location by removing the http:// or https:// protocol and domain name from the URL. If the URL were https://example.com/php/fast-form-handling.php then the location would be /php/fast-form-handling.php

Location /php/fast-form-handling.php is what the example code in this article assumes.

The web page:

The web page source code for Fast Form Setup has three sections:

1. The form, in its own div.
2. The thank-you message, in its own div.
3. The JavaScript, independent of any specific div.

Each section is included in this source code. (Notes follow.)

<div id="sheet1ID" style="display:block;">

<p>
Use this form to let us know.
</p>

<form id="formID">
<p>
Your name:<br>
<input id="name-field" name="name" type="text" style="width:100%;">
</p>
<p>
Tell it like it is:<br>
<textarea id="comment-field" name="comment" style="width:100%; height:1in;"></textarea>
</p>
<p>
<input type="button" value="Send Information" onclick="ProcessFastFormSetup('sheet1ID','sheet2ID','formID')" style="width:100%;">
</p>
</div>


<div id="sheet2ID" style="display:none;">
<p>
Thank you!
</p>
</div>


<script type="text/javascript">
function ProcessFastFormSetup(content1id,content2id,formid)
{
   // One customization, the location of the form submission handling software.
   var FastFormHandler="/php/fast-form-handling.php";

   var http = new XMLHttpRequest();
   if(! http) { alert('Unable to connect.'); return; }
   var params = new Array();
   var fields = document.getElementById(formid).elements;
   for( var i=0; i<fields.length; i++ )
   {
      var valuesarray = new Array();
      if( fields[i].id ) { valuesarray.push("id:"+fields[i].id); }
      if( fields[i].name ) { valuesarray.push("name:"+fields[i].name); }
      if( fields[i].value ) { valuesarray.push("value:"+fields[i].value); }
      valuesarray.push("type:"+fields[i].type);
      if( fields[i].type=="radio" || fields[i].type=="checkbox" ) { valuesarray.push( (fields[i].checked?"checked":"unchecked") ); }
      params.push( "Field_"+(i+1)+"="+encodeURIComponent(valuesarray.join("\t")));
   }
   http.open("POST",FastFormHandler,true);
   http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
   http.send(params.join("&"));
   document.getElementById(content1id).style.display="none";
   document.getElementById(content2id).style.display="block";
}
</script>

Notes —

In the above source code:

1. The form is in the div with id="sheet1ID".

   The form tag has id="formID".

   Design the form as you please. In addition to text input and textarea fields, Fast Form Setup can also handle radio, checkbox, dropdown, and hidden fields. But no file-upload fields.

   The form's submit button has an onclick attribute that calls the JavaScript ProcessFastFormSetup() function. The function has three parameters:

   1. The id value of the div that contains the form (sheet1ID).
   2. The id value of the div that contains the thank-you message (sheet2ID).
   3. The id value of the form tag (formID).

   If any of the three id values change, corresponding changes need to be made in the HTML tags and the submit button's onclick ProcessFastFormSetup() function.

2. The thank-you message is in the div with id="sheet2ID".

3. The JavaScript is below those two divs. It has one place to be customized. Find this line:

   var FastFormHandler="/php/fast-form-handling.php";
   

   Replace /php/fast-form-handling.php with the location of the Fast Form Setup form handling script installed on your server.

   (The JavaScript isn't required to be immediately below the two divs. It may be anywhere on the page when Fast Form Setup is implemented.)

When the customizations are done, the source code is ready to paste into your web page.

When the page loads, the form is presented. When the form is submitted, the form is replaced with the thank-you message.

The Fast Form Setup form handling script sends the form submission information to the email address specified in the script.

It is a quick-to-implement system for when you need a form now.

(This article first appeared with an issue of the Possibilities newsletter.)

Will Bontrager