“Desgin to HTML Application Form” Documentation by “Stefan Petrov” v1.0
“Desgin to HTML Application Form”
Table of Contents
- Preamble
- Requirements
- Features
- Installation & Configuration
- Package
- PHP Code Explanation
- JavaScript Code Explanation
A) Preamble - top
Design-HTML Application Form is a simple standalone highly customizable application form powered by xHTML, PHP and jQuery.
It will help you to make it easer for your clients to reach you and send the design for slicing via your site.
In config you can set package for slicing, options and extras, prices, days needed, discounts and more.
All this can be done with simple text editor in well documented config.php file. Form is a spam protected with google reCaptcha.
In order to use it you need to obtain a private and public keys from google with you google account.
If you wish to use google's recaptcha you can get key's from here https://www.google.com/recaptcha/admin/create
B) Requirements - top
All you need to run the form is ordinary web server with PHP4 and Javascript enabled browser. You can embed it into your website just by copy/paste file structure in separate folder. In lib/config.php you can set redirect after successfully submission.
C) Features - top
- Highly configurable with simple logic in one PHP file
- Easy installation
- Email validation
- Antispam protection with reCaptcha
- Fully customizable via css and xHTML
- Calculate price, time and discounts
- Compatible with PHP 4 PHP 5
- Custom packages, options and extras
- File uploads
D) Installation & Configuration - top
- Unzip contents in separate web dir with web access.
- With simple text editor set desired variables in config.php
- $currency - the currency symbol
- $currency_position -the position of the currency symbol - before or after the digits
- $packages - array with preset data. The structure is name as string, price as digits and days for execution as digits
$packages = array(
array('name' => 'Simple', 'price' => 100, 'days' => 5),
array('name' => 'Proffesional', 'price' => 150, 'days' => 4),
array('name' => 'Ultra', 'price' => 250, 'days' => 3),
);
- $options - array with preset data. The structure is name as string, price as digits and days for execution as digits
$options = array(
array('name' => 'none'),
array('name' => 'Wordpress', 'price' => 10, 'days' => 1),
array('name' => 'Drupal', 'price' => 20, 'days' => 1),
array('name' => 'Joomla', 'price' => 30, 'days' => 1),
array('name' => 'Magento', 'price' => 40, 'days' => 1),
);
- $extras - array with preset data. The structure is name as string, price as digits and days for execution as digits
$extras = array(
array('name' => 'Nivo slider', 'price' => 10, 'days' => 0),
array('name' => 'Drop down menu', 'price' => 20, 'days' => 0),
array('name' => 'Cuffon fonts', 'price' => 30, 'days' => 0),
array('name' => 'Comenteted Markup and CSS', 'price' => 40, 'days' => 0),
);
- $pages - Coefficients for calculating the discount price of more than one page. The price is calculated as the base package price is multiplied by the rate and number of pages
$pages = array(1, 0.95, 0.9, 0.85, 0.8);
- $email - valid email to receive submited data
- $subject - the email subject as string
- $mail_body - Mail body template. If you wish to hide some data elements just delete the row with key in brackets. Do not change labels in brackets
- $publickey - public key for google's recaptcha - you can obtain the key for free with your google account here. Set empty or FALSE to skip reCaptcha
- $privatekey - private key for google's recaptcha - you can obtain the key for free with your google account here. Set empty or FALSE to skip reCaptcha
- $redirect_to - valid full URL (do not forget http:// )where user should land after success submission. Leave empty to show the form again.
E) Package - top
I've used the following images, icons or other files as listed.
- /index.php - main php container
- /lib/images - images folder
- /lib/recaptcha - reCaptcha php files
- /lib/config.php - file with cofigurable varaibles
- /lib/functions.php - file with helper functions
- /lib/ie7-fix.css - fix for The browser :-)
- /lib/jquery.min.js - jQuery library
- /lib/js.js - my js code
- /lib/mail.php - file with mail php code
- /lib/style.css - stylesheet file
E) PHP Code Explanation - top
Generation of the HTML depends on packages, options and extras arrays. Packages are mandatory while options and extras are optional. Schema of these arrays is name as string, price as integer and days as integer. Name is used to display to user, price is used for calculation of the final price, days are used for calculation of the needed time.
At the end of the /lib/functions.php you will find script that sanitizes the posted variables. I recommend do not using variables directly from $_POST array.
Functions
- format_price($price = FALSE, $plus = TRUE, $currency = '$', $currency_position = 'after') - generates html for displaying of the price. $price is value of the price, $plus is flag for displaying of the plus sign before price, $currency is currency symbol, $currency_position the position of the currency symbol.
- message() – generates html for displaying the messages to the user. This function works with session data. When form is submit script generates messages and put them in one session array. This session array is used for generation of html for messages.
- valid_email($email) – helper function for email verification
E) JavaScript Code Explanation - top
Forms uses jQuery library. It is easy to use and customize. Main JavaScript file is /lib/js.js. Themming of radios and checkboxes is done with css class and small JS code.
Functions
- htmlRow(p, pr, l) – generate html for row in panel. P is a class name, l is a label, pr is a price value.
- formatPrice(price) – generates html for price displaying. Price is a price value.
- calcPrice(price) – calculate total price. Price is a price value.
- isValidEmailAddress(emailAddress) – validate email address.
Stefan Petrov
Go To Table of Contents