Created: 01/14/2010
By: Gabriel Comarita
Email: support@bitrepository.com
Site: http://www.bitrepository.com/
Get the RSS Feed
Thank you for subscribing to our newsletter. If you have any questions that are beyond the scope of this help file, please feel free to contact me.
1) Include the 'contact-script.php' file in the page area where you want to see the contact form. Just make sure that 'contact-script.php' and 'contact-app' are on the same directory (just as they are in the archive). This is the more convenient way, otherwise you would have to set the path manually in contact-script.php (line 8).
Let's say that you have the file contact-us.php in which you want to integrate the form script. Use PHP's include function. In contact-us.php use the following:
<?php include '/path/to/public_html/yourwebsite.com/contact-script.php'; ?>If you want to keep the contact form script in a specific folder (not in the main root) then you could do something like this (assuming that 'ajax-contact-form' contains 'contact-script.php' and 'contact-app':
<?php include '/path/to/public_html/yourwebsite.com/ajax-contact-form/contact-script.php'; ?>
3) Basic Configuration:
* set the email where you want to receive the messagesdefine("WEBMASTER_EMAIL", 'yourname@yourdomain.com');
* Do you want to send an automatic email to the users who filled the form notifying him that the message was successfully sent? Set to 'true'
define('AUTO_RESPONDER', true);
* Set the mandatory fields (1 - required; 0 - optional) - all are required by default
<?php $mandatoryFields = array('sender_name' => 1, 'sender_email' => 1, 'sender_subject' => 1, 'sender_message' => 1); ?>
The tableless contact form is included inside the div with the id "contact-area". The first element is the heading (h1) "Contact us". Feel free to modify or replace this element with anything you want (e.g. could be a paragraph with some contact information regarding your company).
<h1>Contact us</h1>
If you would like to edit the color, font, or style go to contact-app/style/stylesheet.css and edit line 30:
#contact-area h1 { font-family:"Myriad Pro",Arial,Helvetica,Tahoma,sans-serif; font-size: 19px; font-weight:lighter; background: white url('../images/icon-mail.png') no-repeat scroll 34% 47%; height: 27px; text-align: center; margin: 10px 0px 10px 0px; }
The second element is the DIV with the id equal with 'note'. This DIV is necessary to notify the user whether there are errors during the filling process or the form has been successfully submitted. The HTML contents (innerHTML) for this element are added in realtime using JavaScript. The DIV starts with no text, since there are no notifications (either errors or success message) to show to the user who didn't start filling the form.
<div id="note"></div>
Inside the form there are divs, each containing the text (left side) and the field (right side). As you can see in the left side, the text is surrounded by the label attribute, while the input is left unwrapped.
Both the label and the input/textarea form element are floated on the left side using CSS. The class 'required' is appended to every input that is mandatory (see common.php file, line 20). e.g: the email area:<div> <label>E-Mail</label> <input class="textbox <?php if($mandatoryFields['sender_email'] == 1) { echo 'required'; } ?> " type="text" name="sender_email" id="sender_email" value=""> <br /> </div>
Let's continue to the CAPTCHA field. First, a verification is made to determine whether CAPTCHA is enabled or not. If it is, then the CAPTCHA area will show in the form:
<?php if(USE_CAPTCHA == 1) { ?> <div><label id="scL">Security Code</label><div id="sec_div"><input class="textbox required" type="text" id="security_code" name="security_code" /></div><br /></div> <div id="captcha_div"><label> </label><img border="0" id="captcha" src="<?php echo $urlPath; ?>contact-app/captcha/image.php" alt=""> <a id="captcha-refresh" href="#"><img id="icon-refresh" border="0" alt="" src="<?php echo $urlPath; ?>contact-app/images/icon-refresh.png" align="bottom"></a><br /></div> <?php } ?>
Note: To use the CAPTCHA feature, the GD library must be enabled. To determine if this library is activated, create a PHP file (set any name you want, e.g. info.php) and put the following content in it:
<?php phpinfo(); ?>
Upload it to the server and open it in the browser (e.g. http://www.yoursite.com/files/info.php). The phpinfo() function outputs lots of PHP information. Just search in that page for "GD Support" and see if it is "enabled". If it is not, then consider enabling it or ask help from your site administrator / developer.
Important: After you check this, make sure you remove the info.php file, because it contains confidential information that should not be available to public.
The icon next to the CAPTCHA (with the 'icon-refresh' id) is used to reload the CAPTCHA image so the user can enter a different security code in case he/she has difficulties reading the characters from the image.
The submit button triggers the JavaScript validator. If everything is ok (all fields are completed correctly) the script sends the data to contact-app/parse.php and the mail is sent to the webmaster's e-mail address.<label> </label><input id="submit-button" class="button" type="submit" name="submit" value="Send Message">
In this script one main CSS file - stylesheet.css - is used. There is a second file - ie-style.css - where some adjustments are made for Internet Explorer users.
The contact form is wrapped by the DIV with the 'contact-form' id:
/* Main Wrapper */ #contact-area { margin-left: auto; margin-right: auto; width: 530px; font-family: Verdana; font-size: 12px; padding: 0; border: 0px none; }
The H1 tag contains the heading text and the mail icon:
/* Heading Tag */ #contact-area h1 { font-family:"Myriad Pro",Arial,Helvetica,Tahoma,sans-serif; font-size: 19px; font-weight:lighter; background: white url('../images/icon-mail.png') no-repeat scroll 34% 47%; height: 27px; text-align: center; margin: 10px 0px 10px 0px; }
The element with 'note' ID is not shown by default. Once the user fills the form it will be filled by either an error warning or a successful notification.
#note { display:none; }
The notifications (error, success):
.notification_ok { margin: 0 auto; background: #f5f9fd url('../images/icon-button-ok.png') no-repeat scroll 15px 50%; height: 26px; width: 90%; padding: 8px 0px 0px 46px; text-align: left; -moz-border-radius: 5px; } .notification_error { margin: 0 auto; background: #FDF4F5 url('../images/icon-dialog-error.png') no-repeat scroll 4% 4px; height: auto; width: 90%; padding: 8px 0px 8px 46px; text-align: left; -moz-border-radius: 5px; }
label, input, textarea, br
/* Label */ #fields label { width: 130px; padding-left: 20px; margin: 8px 19px 8px 8px; float: left; text-align: right; }
/* Input, Textarea */ #fields input { background-color: #fefefe; margin: 5px; padding: 0px; float: left; margin: 5 5 5 0; padding: 2px; border: 1px solid #dedede; color: #333333; -moz-border-radius: 3px; } #fields textarea { background-color: #fefefe; width: 300px; margin: 5px; padding: 0px; float: left; margin: 5 5 5 0; padding: 2px; border: 1px solid #dedede; color: #333333; -moz-border-radius: 3px; } #fields input.error, textarea.error { border: 1px solid #F3CCBE; } #fields input.ok, textarea.ok { border: 1px solid #B9E7AE; } /* Submit Button */ #fields .button { cursor: pointer; width: 135px; background: white url('../images/icon-submit.png') no-repeat scroll 11px 50%; border-color:#EDEDED #999999 #999999 #EDEDED; border: 1px solid #999999; color: #333333; padding: 6px 1px 8px 25px; -moz-border-radius: 3px; } /* Label Error */ #fields label.error { font-size: 11px; color: red; margin: 0px 0px 9px 178px; width: 300px; text-align: left; padding: 0px; } /* br */ #fields br { clear: left; }
Other Styling Elements
/* The icon used to reload the CATPCHA */ #icon-refresh { margin: 0 0 7px 0; } /* CAPTCHA Verified */ #verified .ok { margin: 0px; } /* A CAPTCHA DIV */ #sec_div { float: left; } /* Highlight Rows */ .highlighted { width: 530px; background-color: #FFFFEF; } /* Style the error messages */ .styled { font-style: italic; }
If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.
This script imports three Javascript files.
$(document).ready(function() { // put all your jQuery goodness in here. });OR a short one that I used in init.js:
$(function() { // put all your jQuery goodness in here. });
All the code inside this function will be executed after all pages elements are loaded (when DOM is ready to be manipulated)
b) Events/submit - submit( fn )
$("form").submit(function() { // validation here });
Trigger the submit event of each matched element. This causes all of the functions that have been bound to that submit event to be executed, and calls the browser's default submit action on the matching element(s). This default action can be prevented by returning false from one of the functions bound to the submit event.
c) Events/change - change( fn )
$("input[type='text']").change( function() { // check input ($(this).val()) for validity here });
Triggers the change event of each matched element. This causes all of the functions that have been bound to that change event to be executed, and calls the browser's default change action on the matching element(s). This default action can be prevented by returning false from one of the functions bound to the change event. The change event usually fires when a control loses the input focus and its value has been modified since gaining focus.
d) Ajax/jQuery.ajax - jQuery.ajax( options )
$.ajax({ type: "POST", url: "some.php", data: "name=John&location=Boston", success: function(msg){ alert( "Data Saved: " + msg ); } });
Load a remote page using an HTTP request. This is jQuery's low-level AJAX implementation. See $.get, $.post etc. for higher-level abstractions that are often easier to understand and use, but don't offer as much functionality (such as error callbacks). $.ajax() returns the XMLHttpRequest that it creates. In most cases you won't need that object to manipulate directly, but it is available if you need to abort the request manually. $.ajax() takes one argument, an object of key/value pairs, that are used to initialize and handle the request. See the Options tab for a full list of the key/values that can be used.
var thing = {plugin: 'jquery-json', version: 2.2}; var encoded = $.toJSON(thing); //'{"plugin":"jquery-json","version":2.2}' var name = $.evalJSON(encoded).plugin; //"jquery-json" var version = $.evalJSON(encoded).version; // 2.2
JSON plugin for jQuery, provides simple ways to convert to JSON and back again.
I've used the following images, icons or other files as listed.
Once again, thank you so much for purchasing this script. As I said at the beginning, I'd be glad to help you if you have any questions relating to this application. No guarantees, but I'll do my best to assist.
Gabriel Comarita