Файл: documentation.html
Строк: 477
<?php
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400' rel='stylesheet' type='text/css'>
<title>FormCraft - Documentation</title>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap.no-icons.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/demo.css">
</head>
<body data-spy='scroll' data-target="#navcover" class='local_docs'>
<div id='navcover'>
<ul class='nav sidebar'>
<li><a class='anchorLink' href='#home'>Home</a></li>
<li><a class='anchorLink' href='#install'>Installation</a></li>
<li><a class='anchorLink' href='#build'>Form Building</a></li>
<li><a class='anchorLink' href='#usage'>Using the Form</a></li>
<li><a class='anchorLink' href='#conditional'>Conditional Laws</a></li>
<li><a class='anchorLink' href='#submissions'>Form Submissions</a></li>
<li><a class='anchorLink' href='#file'>File Manager</a></li>
<li><a class='anchorLink' href='#support'>Support</a></li>
<li><a></a></li>
</ul>
</div>
<div class='cover_1_doc'>
<h1 id='home' style='position: relative'>FormCraft<span style='font-size: 26px; position: absolute; bottom: 0px; line-height: 50px; height: 59px; padding-left: 10px; color: #aaa'> for PHP</span></h1>
<p class='author'>by nCrafts</p>
<p class='author'><a href='http://ncrafts.net'>nCrafts.net</a></p>
<h2 style='margin-top: 420px;' id='install'>Installation</h2>
<div>
<ol>
<li>Extract the download package and edit the file <em class='surround'>config.fc.php.</em>
<ol>
<li>The default username and password is set to <em class='surround'>demo</em>, and <em class='surround'>demo</em>. You can change this here.</li>
<li>The database name, by default, is <em class='surround'>formcraft_123</em>. Change this name to any other long string. Think of this as a password. Example: <em class='surround'>aoidhjaoisdhaosicnaoicb</em>. Don't worry - you don't have to remember this.</li>
<li>Now, you need to set the $path to the location of the FormCraft directory on your site.</li>
</li></ol>
<li>Set the permissions of the directory <em class='surround'>formcraft/</em> and <em class='surround'>formcraft/file-upload/server/php/files/</em> to <strong>755</strong></li>
<li>Upload the formcraft directory to your website, say <em class='surround'>http://example.com/formcraft</em>. Then visit this URL: <em class='surround'>http://example.com/formcraft</em></li>
</ol>
</div>
<h2 id='build'>Form Building</h2>
<div>
<div class='l40'>
<p>To access the form builder, click on a form under <em class='surround'>Forms</em>. The form builder screen can be divided into two parts. The left part is the <em class='surround'>Dashboard</em> and the right part is our <em class='surround'>Form Preview</em>.</p>
<h3>Dashboard</h3>
<div>
<ol>
<li>List of Forms: Takes you back to the form index.</li>
<li>Save: The form saves every 30 seconds. Nevertheless, you can click on <em class='surround'>Save</em> to manually save it any time.</li>
<li>Form Options</li>
<li>Styling: This allows you to customize the various elements of the form.</li>
</ol>
<p>Below these options are the various form elements you can add. To add a form element, just click on the button.</p>
<p>File Upload and Captcha fields cannot be added more than once in a form.</p>
<p>You can embed Google Maps using the <em class='surround'>Custom</em> field. <a href='http://maps.google.co.in/help/maps/getmaps/plot-one.html' target='_blank'>Get the HTML link from Google Maps</a>, and paste it in the text box in the options for <em class='surround'>Custom</em> field.</p>
<p>Follow the same procedure to embed videos, and other widgets.</p>
</div>
<h3>Form Preview</h3>
<div>
<p>To view the options of the Form Title, Submit Button, or any added element, click on it.</p>
<p>You can drag and drop the elements to change their order.</p>
<p>The Live Form Preview tries to capture the form just as would appear on your page. However, the actual form might appear different depending on your theme, and other changes to basic CSS styles.</p>
</div>
<h2 id='usage'>Using the Forms</h2>
<p>Place these two line on your page where you want the form to appear</p>
<pre><?php
require_once('../function.php');
formcraft(1);
?></pre></p>
<p>
The first line should point to the <em class='surround'>function.php</em> file which is inside the formcraft directory.</p>
<p>
The second line tells the script which form to use here. You can alter this line to use different types of forms - fly in, sticky, popup, or inline form. See below for details:
</p>
<pre class='well' style='width: 90%'>formcraft($id, $type, $opened, $text, $class, $background, $text_color);</pre>
<ol>
<li><em class='surround'>id</em> This attribute is compulsory.</li>
<br>
<li><em class='surround'>type</em>
<br>
If you want the form to open in a popup box, set this to <strong>popup</strong>.<br>
If you want the form to open in a sliding tab, which rests in the bottom right corner of the page, set this as <strong>sticky</strong>.<br>
If you want the form to open in a popup box, with the trigger button resting on the right side of the page, set this as <strong>fly</strong>.<br>
Else, leave this attribute.</li><br>
<li><em class='surround'>opened</em> If set as <strong>1</strong>, the form will open / slide up, as soon as the page is loaded.<br>
<span style='color: red'>Works only if type is sticky or fly</span>
</li><br>
<li><em class='surround'>text</em> Text which will trigger the popup box on click.</li><br>
<li><em class='surround'>class</em> If you wish to give custom style to this text, you can set a class here. If you are not sure, leave this attribute.
<br>
<span style='color: red'>Works only if type is popup</span>
</li><br>
<li><em class='surround'>background</em> Set the background color of the trigger button. You can use values like red, white, blue etc... You can also use values like #333, #DD1, #45A etc...<Br>
<span style='color: red'>Works only if type is sticky or fly</span>
</li><br>
<li><em class='surround'>text_color</em> Set the text color of the trigger button. You can use values like red, white, blue etc... You can also use values like #333, #DD1, #45A etc...<br>
<span style='color: red'>Works only if type is sticky or fly</span>
</li><br>
</ol>
<pre class='well' style='width: 90%'><strong>Examples</strong>
<br>formcraft(20); // Use the inline / regular form
<br>formcraft(20, 'popup'); // Form opens on click, in a popup box
<br>formcraft(20, 'popup', 'Contact Us'); // Text of popup box is 'Contact Us'
<br>formcraft(20, 'sticky', '', 'Contact Us'); // There is a button on the bottom right corner of the page which will slide up the form on click
<br>formcraft(20, 'fly', 1, 'Contact Us', '', 'red', 'white' ); // There a red button on the right side of the page which will trigger the form on click. Also, the form would open on it's own when the page loads.
</pre>
</div>
</div>
<h2 id='conditional'>Understanding Conditional Laws</h2>
<div>
<h3>Basics</h3>
<p>You can use conditional laws to show / hide elements dynamically based on their value. However, conditional laws are not available for the following field types:
<ol>
<li>
Choice Matrix
</li>
<li>
Sliders
</li>
<li>
Range
</li>
<li>
Dividers
</li>
<li>
Hidden Field
</li>
<li>
Captcha
</li>
<li>
Custom
</li>
</ol>
</p>
<p>How Show / Hide Works:
<ol>
<li>
<p>
<strong>Show</strong><br>
If a certain value is selected / entered in the input field, a specific element is shown. It is recommended that the element which is to be shown should be <strong>Hidden by Default</strong>, from the options of the respective element.
</p>
<p>Example: I have a field #3 which is to be shown when the value of the input field #1 is set to test. If the value test is typed in this field, the field #3 will be shown, but when I type in any value other than test, the field #3 will hide (whether or not it was Hidden by Default)
</p>
</li>
<li>
<p>
<strong>Hide</strong><br>
If a certain value is selected / entered in the input field, a specific element is hidden.
</p>
<p>Example: I have a field #3 which is to be hidden when the value of the input field #1 is set to test. If the value test is typed in this field, the field #3 will hide, but when I type in any value other than test, the field #3 will be shown (whether or not it was Hidden by Default)
</p>
</li>
</ol>
</p>
<h3>Specifics</h3>
<ol>
<li>
<p>
<strong>
Fields: Star, Smiley, and Thumb
</strong><br>
Each selectable option of the fields Star and Smiley has a pre-defined value, from 1 to 5 (in case of Smileys) and 1 to 5 (or more, in case of Stars). If, say, you want to show field #3 when the lowest smiley rating is selected by the user, you will set the conditional law to
<pre class='well' style='width: 90%'>if this element <span style='font-weight: bold; font-size: 16px'>equals 1</span> <br>then <span style='font-weight: bold; font-size: 16px'>show</span> <br>element <span style='font-weight: bold; font-size: 16px'>3</span></pre>
Thumb fields have two predefined values: 1 for the positive rating (thumb up) and 0 for the negative rating (thumb down)
</p>
</li>
<li>
<p>
<strong>
Fields: CheckBox, MultiChoice, and DropDown
</strong><br>
Unlike star, smiley and thumb ratings, the value of each option is customizable here, and the show / hide event is triggered when a specific option is checked. In case of checkboxes, where multiple options can be selected, the show / hide event will be triggered if a specific option is checked, whether or not other options are also checked.
</p>
</li>
<li>
<p>
<strong>
Fields: Email, One Line Text, DateInput, and MultiLine
</strong><br>
The plugin also allows you to set conditional laws to text fields, and the show / hide events work live.
</p>
<p>Example: I have a field #3 which is to be hidden when the value of the One Line Input Field #1 is set to test. As soon as the value test is typed in this field, the field #3 will hide, but when I type in any value other than test, the field #3 will be shown (whether or not it was Hidden by Default)
</p>
<p>
Isn't it awesome?
</p>
</li>
<li>
<p>
<strong>
Fields: File
</strong><br>
The value of the File field will be the number of files uploaded
</p>
</li>
</ol>
</div>
<h2 id='submissions'>Form Submissions</h2>
<p>When a user submits a form, the form data is delivered to the email recipients, and is saved in a database.</p>
<p>Email recipients can be added under <em class='surround'>Form Options</em> inside the Form Builder screen.</p>
<p>All the form submissions can also be accessed from the <em class='surround'>Submissions</em> table in the Form Index screen.</p>
<p>On the same screen you can see statistics on form submissions.</p>
<p>You can also export the form submissions data to a spreadsheet by clicking on <em class='surround'>Export Data to CSV</em>.</p>
<h2 id='file'>File Manager</h2>
<p>
As you might know, FormCraft has a fantastic <em class='surround'>File Upload</em> field feature for your forms. All the files uploaded by users can be viewed from the <em class='surround'>File Manager</em> table from the Form Index screen.
</p>
<p>
You can also access the uploaded files by viewing the form submissions data.
</p>
<h2 id='support'>Support</h2>
<p>
In case of general queries or clarifications, you can post a comment in the Item Discussion section.
</p>
<p>
If you encounter bugs along the way, or wish to suggest some features in the plugin, please contact me through my <a href='http://codecanyon.net/user/nCrafts' target='_blank'>profile page</a>.
</p>
<p>
If you like the plugin, please give a rating :)
</p>
<div style='height: 480px'></div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
<script src="slider/js/jquery.anchor.js"></script>
</body>
</html>
?>