Documentation

Note that the code examples bellow does not contain your real SForms Account Number. You will automatically obtain one after you log in.

Full Example

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US" class="signedOut">
  <head>
	<title>SForms Example</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  </head>
  <body>
	<form>
	  <h1>Job Application Form</h1>

	  <table>
		<tr>
		  <th>First name</th><td><input type="text" name="First name" required/></td>
		</tr>
		<tr>
		  <th>Last name</th><td><input type="text" name="Last name" required/></td>
		</tr>
		<tr>
		  <th>Telephone</th><td><input type="tel" name="Telephone" required/></td>
		</tr>
		<tr>
		  <th>E-mail</th><td><input type="mail" name="E-mail"/></td>
		</tr>
		<tr>
		  <th>Message</th><td><textarea name="Message"></textarea></td>
		</tr>
		<tr>
		  <th>Upload your CV</th><td><input type="file" name="Curriculum vitae" required/></td>
		</tr>
	  </table>
	  <input type="submit"/>

	  <div class="sforms-thankyou">
		<h1>Thank you!</h1>
		<p>We will contact you within two business days.</p>
	  </div>
	</form>


  
    <script type="text/javascript">
      var sForms=sForms || [];
      sForms.push(["setAccount", "Loading...Account Number Here"]);
      sForms.push(["addForm", "*"]);
    
      (function() {
    	   var n=document.createElement('script'); n.type='text/javascript'; n.async=true;
    	   n.src='http://cdn.webdevelopers.eu/packages/sforms/v1/sforms.js';
    	   var s=document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(n, s);
      })();
    </script>

  </body>
</html>

Javascript Connector

The Standard Code

Copy and paste the Javascript below anywhere on your HTML page.

	
  
<script type="text/javascript">
  var sForms=sForms || [];
  sForms.push(["setAccount", "Loading...Account Number Here"]);
  sForms.push(["addForm", "*"]);

  (function() {
	   var n=document.createElement('script'); n.type='text/javascript'; n.async=true;
	   n.src='http://cdn.webdevelopers.eu/packages/sforms/v1/sforms.js';
	   var s=document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(n, s);
  })();
</script>

This Javascript code connects by default all existing HTML forms on your page to our database and to the email sending server.

Choosing A Particular HTML Form

The default javascript contains the CSS selector "*" which instructs SForms to connect all web forms on the page to the database. This behavior may be undesirable in certain cases.

You can replace the CSS selector in the addForm call by any other CSS selector that resolves to a form of your choice.

For example the initialization code to connect web forms with id attribute set to contact and all web forms with class name sforms would look as follows.

	
  
<script type="text/javascript">
  var sForms=sForms || [];
  sForms.push(["setAccount", "Loading...Account Number Here"]);
  sForms.push(["addForm", "#contact, .sforms"]);

  (function() {
	   var n=document.createElement('script'); n.type='text/javascript'; n.async=true;
	   n.src='http://cdn.webdevelopers.eu/packages/sforms/v1/sforms.js';
	   var s=document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(n, s);
  })();
</script>

Dynamically Created Forms

In rare situations you may create HTML form dynamically using Javascript code after a page was loaded. Such web forms will not be connected by initialization code and you must issue additional Javascript command to connect them: sForms.push("addForm", "CSS Selector");

Customizable Messages

We don't put any restrictions on how you design your HTML forms. They are fully standard HTML forms. However we add certain new functionality to make your life easier.

In particular we add support for a few custom messages through HTML form tag atributtes that will be automatically displayed when

a form is being submitted to the database (the form attribute sforms-sending)
a form was succesfully submitted (the form attribute sforms-thankyou)
there was an error while sending data to the database (the form attribute sforms-error)

Of course we provide you with default messages so no customization is required.

The attributes on a form tag may be of following types

plain text with the custom message
rich HTML code with the custom message
CSS selector pointing to your hidden element containing the custom message.
keyword "no" disables the default message completely.

Examples of the customized Thank You messages (Sending and Error messages behave the same way).

	  <form sforms-thankyou="We will contact you within 2 business days.">...</form>

	  <form sforms-thankyou="<h1>We will contact you within <b>2 business days</b>.</h1>">...</form>

	  <form sforms-thankyou="#myThankYou">...</form>
	  <div id="#myThankYou" style="display: none;"><h1>Thank you!</h1></div>

	  <form sforms-thankyou="no" sforms-onsuccess="showFancyThankYou();">...</form>

There is one more easy way: place an element containing a message having the same class name as the attributes above inside a form. For example:

	  <form>
		...
		<div class="sforms-thankyou">Thank you! We will contact you soon.</div>
		<div class="sforms-sending">Your files are being uploaded to the server...</div>
		<div class="sforms-error">Internet is broken. Pick up the phone and call 112.</div>
	  </form>

Javascript Hooks

We provide you with two additional form attributes that allows you to specify your own Javascript code that will be run when a form was submitted:

sforms-onsuccess will be executed on successfull submit
sforms-onerror will be executed when error happens

Example:

	  <form sforms-onsuccess="$.fn.fancybox.close();"
			sforms-onerror="alert('We cannot accept your submission!');">...</form>

Web Developers^®
Services For Professionals