AJAX Form with CAPTCHA, Realtime Validation and PHP Backend
Create Unlimited Secure Forms with AJAX Form Pro * now with Control Panel
This is a professional multi-usage AJAX Form Builder meant to enhance the functionality of your website by providing an interactive user experience for your readers that need to reach you, whether they need to send a feedback, share their opinion regarding your website, fill a survey, leave a testimonial or even make a room reservation online.
Beside the premium AJAX Form, I would like to offer you a short tutorial regarding the creation of a basic AJAX Contact Form. It will give you an idea of how you can create similar web applications using jQuery and AJAX.
The aim of the tutorial is to help you to create a simple (tableless) ajax contact form using AJAX, JQuery & PHP. We will have a HTML page which will contain the form, a CSS file, a php page where the data will be sent and another file where the validation function(s) will be located. JQuery is a new and powerful library which simplifies the way that you write JavaScript.
Step 1 – Creating the configuration file
config.php
<?php
// To
define("WEBMASTER_EMAIL", 'your_name@domain.com');
?>
Here you should fill the e-mail address where you wish to receive the mail as well as the address where you wish to receive the replies (usually the same).
Step 2 – Creating the css file
style.css
/*
Credits: Bit Repository
CSS Library: http://www.bitrepository.com/
*/
html, body { padding: 0; border: 0px none; }
.notification_error
{
border: 1px solid #A25965;
height: auto;
width: 90%;
padding: 4px;
background: #F8F0F1;
text-align: left;
-moz-border-radius: 5px;
}
.notification_ok
{
border: 1px #567397 solid;
height: auto;
width: 90%
padding: 8px;
background: #f5f9fd;
text-align: center;
-moz-border-radius: 5px;
}
.info_fieldset { -moz-border-radius: 7px; border: 1px #dddddd solid; }
.info_fieldset legend
{
border: 1px #dddddd solid;
color: black;
font: 13px Verdana;
padding: 2px 5px 2px 5px;
-moz-border-radius: 3px;
}
.button
{
border: 1px solid #999999;
border-top-color: #CCCCCC;
border-left-color: #CCCCCC;
background: white;
color: #333333;
font: 11px Verdana, Helvetica, Arial, sans-serif;
-moz-border-radius: 3px;
}
/* Label */
label {width: 140px; padding-left: 20px; margin: 5px; float: left; text-align: left;}
/* Input, Textarea */
input, textarea
{
margin: 5px;
padding: 0px;
float: left;
border: 1px solid #999999;
border-top-color: #CCCCCC;
border-left-color: #CCCCCC;
color: #333333;
font: 11px Verdana, Helvetica, Arial, sans-serif;
-moz-border-radius: 3px;
}
/* BR */
br { clear: left; }
Step 3 – Creating the html contact page
This is the page where the AJAX call to contact.php is made. I will explain you the JavaScript Code in detail below:
contact.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>TableLess Ajax Contact Form (Demo)</TITLE>
<meta name="Keywords" content="form, divs">
<meta name="Description" content="A CSS Tableless Ajax Contact Form">
<!-- JQuery -->
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript">
// we will add our javascript code here
$(document).ready(function(){
$("#ajax-contact-form").submit(function(){
// 'this' refers to the current submitted form
var str = $(this).serialize();
$.ajax({
type: "POST",
url: "contact.php",
data: str,
success: function(msg){
$("#note").ajaxComplete(function(event, request, settings){
if(msg == 'OK') // Message Sent? Show the 'Thank You' message and hide the form
{
result = '<div class="notification_ok">Your message has been sent. Thank you!</div>';
$("#fields").hide();
}
else
{
result = msg;
}
$(this).html(result);
});
}
});
return false;
});
});
</script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<center>
<center><h3>A Tableless Contact Form (JQuery & AJAX)</h3></center>
<div align="left" style="width: 500px;">
<fieldset class="info_fieldset"><legend>Contact</legend>
<div id="note"></div>
<div id="fields">
<form id="ajax-contact-form" action="javascript:alert('success!');">
<label>Name</label><INPUT class="textbox" type="text" name="name" value=""><br />
<label>E-Mail</label><INPUT class="textbox" type="text" name="email" value=""><br />
<label>Subject</label><INPUT class="textbox" type="text" name="subject" value=""><br />
<label>Comments</label><TEXTAREA class="textbox" NAME="message" ROWS="5" COLS="25"></TEXTAREA><br />
<label> </label><INPUT class="button" type="submit" name="submit" value="Send Message">
</form>
</div>
</fieldset>
</div>
</center>
</body>
</html>
Once the DOM is loaded (we determine this by using $(document).ready()), the script checks if the user submitted the form by using $(“form”).submit(). If it is, the form elements (names & values) are serialized in order to pass them to the AJAX Call:
var str = $("form").serialize();
$.ajax() takes one argument, an object of key/value pairs, that are used to initalize and handle the request, and returns the XMLHttpRequest object for post-processing (like manual aborting) if needed.
Some options are used to control the behaviour of $.ajax. The information is from JQuery Documentation:
(String) type – This is to determine the type of request that is made: ‘POST’ or ‘GET’. (default is ‘GET’)
(String) url – The URL to request
(Object|String) data – Data to be sent to the server. It is converted to a query string, if not already a string. Is appended to the url for GET-requests. See processData option to prevent this automatic processing.
(Function) success – A function to be called if the request succeeds. The function gets passed one argument: The data returned from the server, formatted according to the ‘dataType’ parameter.
To find out more about $.ajax consider visiting http://docs.jquery.com/API/1.1/AJAX.
The request succeded? In this case we will call the ajaxComplete(callback) function, which executes whenever an AJAX request is completed. The XMLHttpRequest and settings used for that request are passed as arguments to the callback.
I recommend you using the Firefox Extension Firebug, a popular and powerful web development tool. It adds a global variable named “console” to all web pages loaded in Firefox. This object contains many methods that allow you to write to the Firebug console to expose information that is flowing through your scripts. While executing AJAX Code you can check the console to see how the data is sent to the remote files, in this case parse.php.
If ‘OK’ is returned the form hides and a thank you message is shown. If any other text is shown (beside ‘OK’), then there are errors and they will be shown above the form.
$.ajax({
type: "POST",
url: "contact.php",
data: str,
success: function(msg){
$("#note").ajaxComplete(function(event, request, settings){
if(msg == 'OK') // Message Sent? Show the 'Thank You' message and hide the form
{
result = '<div class="notification_ok">Your message has been sent. Thank you!</div>';
$("#fields").hide();
}
else
{
result = msg;
}
$(this).html(result);
});
}
});
In the next page of our tutorial we will create: functions.php (which has the e-mail address validator) and contact.php (which is the script that parses the submitted data).
Step 4 – Creating the functions’ script.
functions.php
<?php
function ValidateEmail($email)
{
/*
(Name) Letters, Numbers, Dots, Hyphens and Underscores
(@ sign)
(Domain) (with possible subdomain(s) ).
Contains only letters, numbers, dots and hyphens (up to 255 characters)
(. sign)
(Extension) Letters only (up to 10 (can be increased in the future) characters)
*/
$regex = '/([a-z0-9_.-]+)'. # name
'@'. # at
'([a-z0-9.-]+){1,255}'. # domain & possibly subdomains
'.'. # period
"([a-z]+){2,10}/i"; # domain extension
if($email == '') {
return false;
}
else {
$eregi = preg_replace($regex, '', $email);
}
return empty($eregi) ? true : false;
}
?>
This file contains only the e-mail address validator, in our sample, but you can use it to add more (validation) functions which can be used in the contact.php page.
Step 5 – Creating the page which parses the data
contact.php
<?php
/*
Credits: Bit Repository
URL: http://www.bitrepository.com/a-simple-ajax-contact-form-with-php-validation.html
*/
include 'config.php';
error_reporting (E_ALL ^ E_NOTICE);
$post = (!empty($_POST)) ? true : false;
if($post)
{
include 'functions.php';
$name = stripslashes($_POST['name']);
$email = $_POST['email'];
$subject = stripslashes($_POST['subject']);
$message = stripslashes($_POST['message']);
$error = '';
// Check name
if(!$name)
{
$error .= 'Please enter your name.';
}
// Check email
if(!$email)
{
$error .= 'Please enter an e-mail address.';
}
if($email && !ValidateEmail($email))
{
$error .= 'Please enter a valid e-mail address.';
}
// Check message (length)
if(!$message || strlen($message) < 15)
{
$error .= "Please enter your message. It should have at least 15 characters.";
}
if(!$error)
{
$mail = mail(WEBMASTER_EMAIL, $subject, $message,
"From: ".$name." <".$email.">rn"
."Reply-To: ".$email."rn"
."X-Mailer: PHP/" . phpversion());
if($mail)
{
echo 'OK';
}
}
else
{
echo '<div class="notification_error">'.$error.'</div>';
}
}
?>
In contact.php, we have to determine first if a POST request was sent to the file. If $post is not null, the functions.php file is included (containing the e-mail validator) and the POST fields are declared. Each required field is checked. If any error is found, the $error variable will be filled with that error message. At the end, if $error is null (as it was initially) & the mail is sent, contact.php will output ‘OK’ (which is checked in contact.html). It is is not null, contact.php will output the error(s), which will be shown, of course, in contact.html.
Get Basic (Limited)
This version contains the basic features that were discussed in the tutorial.
Get Premium (Professional)
This is a professional Multi-usage AJAX (Contact) Form with lots of features and support for all form elements.
The script can be practically used to create any type of form that collects data and sends it to your email inbox including but not limited to:
- Contact/Feedback Form
- Support Form
- Customer Survey Form
- Online Product Order Form
- Event Registration Form
- Employment Form
- Make a Room Reservation Online Form
- Send Testimonial Form
- Subscribe to Newsletter Form
- Gift Order Form
Some of the features you get with AJAX Form Builder
Additional features include:
- 3 Layouts Available: 'Left' and 'Right' Justified Horizontal Labels, Vertical Labels, In-Field Labels (for Developer and Extended Licenses)
- The e-mail templates (message, subject) are customizable
- The errors and the notifications can be easily changed
- The script works in conjunction with other libraries beside jQuery such as MooTools or Prototype
- Set a custom subject for the mail that you receive if the subject field is removed
- "Send me a copy of the mail" feature: if activated, the user receives exactly the same mail as you get.
Server Requirements
- PHP5+
- GD Library Enabled (only if you want to use the Anti-Spam Image)
Browser Compatibility
- This script is compatible with all major browsers.
- It was tested in FireFox 3.5, IE 6, IE 7 & IE 8, Google Chrome 3.0, Opera 10, Safari 4.0, SeaMonkey 2.0, Flock 2.5.6
Is AJAX Form Pro the right script for me?
- This product is aimed to:
- Webmasters that want to improve the contact forms from their website(s)
- Web Developers that have multiple websites and need to install (contact) forms on them
- Freelance Web Developers that are looking to create interactive forms for their client(s) / website(s) / project(s)
- AJAX Form Pro is a PHP tool to build interactive forms, not just a basic Contact Form nor a WYSIWYG application.
Money Back Risk Free Trial
- I offer a 60 days money back guarantee.
- If for any reason you are not satisfied with this script you can request a refund and I will buy the script back from you. No questions asked!
 | or |  |
- Licenses are lifetime
- Customer Support is offered within 24 hours
- Payments are processed through PayPal or 2Checkout
- Digital delivery is provided by E-Junkie
Customer Testimonials
"Very nice! We went through 8 different scripts, only to be frustrated with broken code, links, and tutorials, to finally find one so simple, beautiful and it works! We are avid PHP programmers, but are not yet too versed with AJAX, so this solution was perfect! Thanks" -
"I had a real need for a clean and stylish contact form. I tried some 11 forms before I decided on one. I have to say your form was the winning choice hands down." -
"It works very good and it solved the problem of needing a form validation as well a as a success message in the same page." -
"I am working a project for patisserie web site in Turkey and i used your form form this web site contact page. Belong to me, your form is very useful and successful, thanks a lot." -
- September 2, 2008
- article by Gabriel C.
- 547 comments
TESTIMONIALS
547 Replies to "AJAX Form with CAPTCHA, Realtime Validation and PHP Backend"
March 4, 2011 at 3:06 PM
tried Clicking on your live demo site of the premium contact script, but its not working:(
March 5, 2011 at 12:06 AM
This is indeed weird. I can access it without any problems. Can you tell me what browser are you using and how did you actually tried to access the live demo site? (e.g. through a link, directly by typing the URL address.). If you can make a screenshot while you are trying to access it, what would be better! You can use a service like http://www.techsmith.com/jing/ for this.
March 5, 2011 at 12:11 AM
Hello!
1. Is it possible to add file-attachment field to the form?
2. Is it possible to disable form-level error messages untill “send message” (submit) button is pressed? Field-level validation is done in real-time, and that’s perfect.
I am trying to integrate it but not sure how to do above things.
Thanks
March 5, 2011 at 4:13 AM
1. The form doesn’t support this feature yet. However, I am currently working on a new version of the AJAX Form Builder that will have this feature. You will get the updated version once it’s done. If you do not have patience until then, you can add file attachment using the phpMailer class (just google for its documentation and you will see how attachments can be added).
2. Yes, it is possible. You only need to use the afb_check_status() function when the submit button is pressed. At the moment, the afb_check_status() function is triggered each time a field is completed in real-time. Are you familiar with jQuery (JavaScript)? Do you think you can do that?
Do not hesitate to contact me if you have further questions ;-)
March 15, 2011 at 10:05 AM
Yes, please, if file attachments is possible, let me know.
March 15, 2011 at 10:10 PM
Sure Marnix, I will let you know via email when the new version will be released. It will be more expensive but since you are a customer, you can just pay for the upgrade which will be a couple of bucks (the difference between the price you paid and the price of the the new script).
June 10, 2011 at 7:49 AM
Gabriel,
I’m also needing the file upload feature but am using Lasso instead of PHP. Do you know approximately when/if that feature will be added? Do you think there will be anything hindering it working with non-PHP middleware?
Thanks,
Stephen
June 14, 2011 at 11:21 AM
I believe you are talking about the Lasso CRM (that’s at least what I’ve found via Google). If your server supports PHP, then you should be able to use the script. I’ve just finished work at the “File Attachment” feature in case you are interested. There’s no way I can make the script work on a non-PHP server. You can put the script on a server that supports PHP and then use an IFRAME to load the data from that server from one that doesn’t support PHP.
March 10, 2011 at 7:18 AM
this does not work at all for me, email does not get sent, error doesn’t print.. nothing prints from the back-end after I submit.. do you provide a zipped-up package w/all files to download for this example?
thank you..
March 10, 2011 at 10:58 AM
Of course, the download link can be found inside the post. It’s quite visible if you are talking about the Basic AJAX Contact Form.
March 15, 2011 at 12:29 AM
We have an older version of the script from August 2010 and were looking to add checkboxes and radio buttons to the form, do we need to buy a new license to download the new version of the script?
March 15, 2011 at 10:04 PM
No, you do not need to purchase a new license. Just sent you the new version! Let me know if you had any problems receiving the new download URL! Good luck!
March 16, 2011 at 1:54 AM
Great, Thanks!
March 15, 2011 at 12:35 PM
Hi. I’m currently using the free version and i have one question. How can i change the “Please enter your name.” with cyrillic letters because my default language on the site is not english?
I tryed to change it in Feedback.php but it still shows the same “Please enter your name.”, nothing changes.
March 16, 2011 at 8:04 AM
You need to change it in contact.php too. For future scripts, the best way to found what you are looking for is to search for the text inside each file from the folder.
March 17, 2011 at 11:27 PM
Hi,
I notice that on your demo page the php page used is parse.php not contact.php
Is there a difference in the code because it does not work at all using the files for the Basic you have for download or when I copy the code from the tutorial.
March 17, 2011 at 11:30 PM
Chip, parse.php is for the premium version of the script while contact.php is for the basic version. And yes, it is a big difference between these two.
April 3, 2011 at 11:42 PM
Hi,
I just bought the form and i would like to add this datepicker (http://jqueryui.com/demos/datepicker/)
Is it possible and what do i have to do exactly?
There should also be dynamic default values in my 2 date fields.
arrival: tomorrow
departure: tomorrow in 1 week
And it shouldn’t be possible to pick a departure date before arrival and a arrival date after departure.
Thank you for your help.
Cheers,
Roman
April 4, 2011 at 3:31 AM
First, you should include the jQuery UI file needed for this datepicker. Make sure you select the “Datepicker” checkbox when you want to make the inclusion. The second thing would be to call the datepicker (see “view source” for the example you want from the URL you just posted). The input boxes should have the ‘datepicker’ class. I hope you got the point. The most important is to view the sources for those examples and you will understand.
PS: The developer version of this script has an example with date-picker integration. You can upgrade to that version if you are interested.
August 16, 2011 at 12:07 AM
I have been able to implement the jQuery UI datepicker successfully on my form, is it possible to have any field using the datepicker set as mandatory? when I do this it trip the validation warning with the first action on the datepicker, e.g selecting the year and the warning only disappears after the next field is completed.
April 5, 2011 at 11:33 AM
Broadcast for everyone:
After countless hours of development, I am happy to announce you that I’ve released the AJAX Form Pro. It allows you to easily create unlimited forms in the same page or multiple pages, add multiple recipients that get the mail, integrate the form in a Lightbox and 2 sliders: ‘top slide in’ and ‘left slide in’.
A demo can be viewed here:
http://bit.ly/ejwdks
You can use the new script in any website that you own. The license is lifetime and you get free script updates for one year.
Let me know if you have any questions. For those who are already customers and want to get the new version, I will send you tomorrow a special upgrade link.
April 9, 2011 at 5:11 AM
How can I get it to sent to multiple addresses?!?
$acf_conf['webmaster_email'] = ‘email1@email2.com’;
I’ve tried
$acf_conf['webmaster_email'] = ‘email1@email1.com, email2@email2.com‘;
$acf_conf['webmaster_email'] = ‘email1@email1.com’, ‘email2@email2.com’;
etc etc etc etc – can’t find any documentation either.. maybe I’m looking in the wrong place?
Any thoughts?
April 9, 2011 at 7:10 AM
Consider checking the following URL: http://bit.ly/gk8hf6
It will give you clear instructions about configuring the script to send to multiple recipients.
April 25, 2011 at 12:38 AM
HI!
Ihave found the code of Get Basic (Limited) in the download link.
How can i found the code of the Get Premium (Professional) in the download link.
I will be highly pleased if i get the code of the Get Premium (Professional) in the download link.Otherwise if possible please send me the code by email.
April 25, 2011 at 7:42 AM
AJAX Form Pro can be purchased for $27. Only the basic version is offered for free.
April 30, 2011 at 12:30 PM
Hi, i’ve got a site and i want to change all the forms to a good system made. I like yours but i need to know somethings first.
1. Can i check if a username or email already exists?
2. I need to upload some images asociated to the form. Can i do it with ajax before the form is sent?
If i didnt explain well you can check my site. Thx a lot.
April 30, 2011 at 6:01 PM
1. Yes, you can check it if you modify the script. You can use another script of mine that checks the availability of the username.
2. The file attachment feature is on its way. I am working on it and planning to release it very soon (within a week). If you just need to upload images associated with the form (without sending them as attachments) you can do that too. I recommend Uploadify, a powerful jQuery File Upload Plugin Script.
May 1, 2011 at 2:49 AM
I purchased your script and like it. I am having trouble however getting it to work outside the /examples directory. Everything works fine as long as I leave the page with the form in the examples directory.
Anytime I try to move it to try and implement it into my main page index.php located in the parent directory, I cannot get it to work properly. I updated all links I can find but the form won’t work. What am I missing or doing wrong?
As an example instead of ‘../ajax-form-app/common.php’ (in the page located in the examples directory)
I have ‘ajax-form-app/common.php’ (in the page now located in the parent directory)
What I am wanting to do is have the contact form integrated into my index.php page in the website root directory, without having to direct them to the examples/ directory because then I am no longer using index.php.
I have searched this thread I could not find an answer and have spent hours trying to figure it out.
Thanks.
May 1, 2011 at 3:00 AM
You should follow the guidelines from the online documentation. Integrating a form in index.php is quite easy, especially if you analyze how each form was added in the sample files. Are you sure you are using the right form ID and the right path to make the inclusions? Send me index.php and common.php (from ajax-form-app) – via email – so I can check them and see what’s wrong there.
May 4, 2011 at 10:50 AM
I have installed the script and I added to the form the date picker for a date field. The only problem is that it returns the US way of showing the date M,D,Y I need it to be the UK way – D,M,Y. Is there any setting I can change to do this?
May 5, 2011 at 8:45 AM
The attribute dateFormat should be defined when the datepicker is initialized.
Here’s what you need to do:
In class.afb.php (from the “includes” directory) find:
buttonImageOnly: true,UNDER it add the following code:
dateFormat: 'dd-mm-yy',Result:
buttonImageOnly: true,dateFormat: 'dd-mm-yy',
View more information about this feature here:
http://docs.jquery.com/UI/Datepicker#option-dateFormat
May 6, 2011 at 1:31 AM
Hi Gabriel,
Thanks works great.
Duncan
May 16, 2011 at 4:40 AM
Hi, Gabriel!
I´m very pleased with the script and all its functions! I managed to localize almost everything (German), the last thing left is the datepicker. I found some hints via Google and got the language.js but couldn´t get it to work though. So I hope I´ll get some help here!
Regards, SiGa!
May 17, 2011 at 2:42 AM
Isn’t the date-picker triggering? There are some examples of forms with the date-picker integrated in the “examples” folder (if you purchased the premium version of the AJAX form). Would you share the URL to the form so I can check if everything was installed correctly?
May 17, 2011 at 2:55 AM
Hi, Gabriel!
I purchased the extended version, used the make-a-reservation-template and the date-picker is working fine. I only need it to use German as language instead of English. Unfortunately I can´t provide a URL, the site isn´t live yet, I´m testing onboard (Xampp). So how do I add the de-language file for the datepicker (I already downloaded) in the right way?
Regards, SiGa!
May 17, 2011 at 6:44 AM
The datepicker integrated in AJAX Form Pro is the one from jQuery UI. Here are 2 links that can help you:
http://jqueryui.com/demos/datepicker/#localization (select german)
http://jqueryui.com/demos/datepicker/localization.html (view source to see how it’s done)
May 19, 2011 at 9:47 PM
I want to make a confirm email input field with validation(equalTo), how do I make that? I did edit the “parse.php” added
#equal
if($afb_value['validation']['equal'] == 1) {
if($_POST[$afb_key] != ($afb_value($_POST[$afb_key]))) {
$afb_error[$afb_key.'_none'] = 1;
}
but it doesn’t work, i want to check the equal between field.
May 24, 2011 at 6:56 AM
In the
'email_two'field add the ‘equal’ to the ‘validation’ array like this:'validation' = array('equal' => 'email').In this case ‘email’ is the field id of the ‘Email’ Field…
if($afb_value['validation']['equal'] == 'email') {if($_POST[$afb_key] != $_POST['email']) {
$afb_error[$afb_key.'_none'] = 1;
}
}
I hope this does make sense. If you think you need help, I can connect to the FTP and do the necessary changes for you in exchange of a small fee.
May 20, 2011 at 4:53 AM
Hi Gabriel,
I have purchased your script, and I’m having a problem. My form gets stuck on “Submitting…” when multiple forms are on the same page. Please open your demo at http://www.bitrepository.com/demo/ajax-form-pro/examples/multiple.php, fill in the form “Make a Room Reservation” and click “Send message”. Then “Submitting…” is continuously shown at the bottom, but the message is never sent (Tested in Firefox, IE and Opera) I have exactly the same problem on my website. Could you please help me?
May 24, 2011 at 7:00 AM
It gets stuck on submitting because you have an error in parse.php. I recommend you enabling the debug tool (in the form’s configuration file) to see what’s going on. Indeed, the form got stuck on “Submitting…” on the examples pages because it could not connect to my SMTP settings. Now, I’ve fixed it and it works. So, please do what I told you and let me know if I can further assist you. Good luck!
May 21, 2011 at 4:12 PM
Hi Gabriel,
I’ve been playing with this for days, and I can’t figure out how to correctly link everything (so it seems). I get the error: The form file does not exist. I’m trying to load the form in the Fancybox window. The JavaScript behavior works just fine, but instead of seeing the form, I see that error.
Would you like me to send you my entire folder so you can see how everything is linked and where the files are in relation to each other? I could try describing that for you, but that’s more painful for us both.
I think I need to make changes inside common.php, but right now I’m hacking around without any finesse. I don’t exactly understand how to retrieve the basic.php file, which is why I think I’m getting this error.
Your help/advice is much appreciated.
Thanks,
Nima
May 23, 2011 at 5:18 AM
Update: The form shows up in the Fancybox window, but there is no styling, the text is partially inline and partially outside of the textbox, at the same time. captcha image doesn’t appear, and at the bottom, it says, “submitting…”
What am I doing wrong. I feel embarrassed to admit that I’ve been working on this for days, and hours each day.
Still awaiting your guidance.
Thanks,
Nima
May 24, 2011 at 7:13 AM
I am sorry to hear this. It looks like you didn’t set the right path to the files..especially to the CSS files..since from what you told me that’s the main issue here. You should have told me earlier about this, instead of spending hours on this. I can connect to the ftp where you form is located and make the required changes in exchange for a small fee, if you feel you can’t do it yourself.
May 24, 2011 at 7:04 AM
Most likely, you do not have the basic.php file (the form’s configuration file) in ‘forms_config’ directory. That’s why you see that error. Please take a look at the ‘examples’ folder to see how they are linked to the ones from ‘forms_config’. Yes, you could send me your files to my e-mail address. I’ll check to see what you’ve done there.
May 25, 2011 at 4:08 PM
Here was the problem: The folder, “ajax-form-app,” and the file, “index.php,” were in the same (root) directory. To make everything suddenly work, in “common.php,” the following needed to be changed:
$afb_conf['root_path'] = ‘../’; TO –> $afb_conf['root_path'] = ‘/’;
AND
$afb_conf['script_path'] = $afb_conf['root_path'].’ajax-form-app/’; TO –> $afb_conf['script_path'] = ‘ajax-form-app/’;
In case this is not obvious to others as well, I’m posting here in hopes of making it easier for everyone else.
Also, yes, “style-in-field-labels.css.php” must be linked to. Even though this is obvious, it was not mentioned in the documentation.
My last, problem, Gabriel, is getting the email to SEND, successfully. I can’t manage to make it work. : (
Please, uhm, what do I do? And where do I do it?
Thank you for your help,
Nima
May 25, 2011 at 4:35 PM
I should also mention what I have tried so far:
In “basic.php” I’ve filled out all the proper fields for Email/UN/PW/Port/etc. I know the values are correct, because it works in Outlook 07. However, when I fill the form and attempt to send it, I get this error in debug mode:
Could not instantiate mail function. {“status”:2}
I can’t figure out what I’m doing wrong. Assuming I want the submitted forms to be sent to an email with a private domain, and not GMAIL, etc. what is it that I need to do?
May 26, 2011 at 10:43 AM
Never mind. It works great, once I upload to the actual server. For some reason, it doesn’t work when running on xampp.
May 27, 2011 at 4:22 AM
Usually, sending mail does not work by default on localhosts unless you configure them to do that (you could also send mails through SMTP on localhost if you make the right configurations). I am glad you tested it live and got it work.
May 22, 2011 at 6:07 AM
Bought the script 2 weeks ago, mailed you several times, but no response :-(
I butchered the reservation-form: it gives a PHP error and I can’t fix it -http://qr.net/b7w2 (complete form) and the config-form: http://qr.net/b7xd – this is the text-version: http://qr.net/b7xh
Also, would it be possible to integrate this plugin: http://qr.net/b7xj – as it looks better than the form-jumping in your script: people might not see the error-messages at the top and they have to scroll up and down.
Thanks!
May 24, 2011 at 7:11 AM
You didn’t close properly the main array –
$AfbFormFields[$formId]['fields']– at the end (after the ‘comment’ key). That’s why you see that error. Yes, that integration should be possible, but you might want to disable the real-time validation from the AJAX Form Pro script. Otherwise, duplicate errors might show and it’s not that nice for aesthetics.May 25, 2011 at 2:36 AM
Got it to work – I used an online PHP-code checker and it told me the error was on a completely different line…
Few questions: http://qr.net/b861 –
1) I added ‘*’ in the labels of the required fields – as a visual indicator – I would like those ‘*’ to be red – and not within the label (which is the fieldname in the emails);
2) I added ‘King of Bafuri room (Luxury)’ and want it to be a label only – fieldsize is 0, but it still shows some white/length – it should function as a ‘grouping header’ for the next fields, so I can reduce their label-length – basically it is a line only – but I don’t want it to be included in the mails – any change that is possible?
3) Would it be possible to display the error-messages right of the fields – instead of underneath? That way the form is not stretched, users keeps seeing the fields he was filling out and doesn’t need to scroll – that would also eliminate the error-message at the top, as that might appear out of sight as well;
4) Sending the form I get an error (‘method’), but both mails are delivered properly, with correct data – how do I debug that?
Thanks!
May 24, 2011 at 4:41 AM
Hi
I have a question. Incoming messages seend from page are with Polish characters but the descriptions of the name, message, send me a copy, etc.. on the web don’t have Polish characters.
when I change the encoding to UTF-8 scripts stop working (captcha and fading descriptions).files are converts in notepad + +. What i can change and where? Sorry for poor English I am a beginner
May 24, 2011 at 7:33 AM
The script can’t just stop working because you have only changed the charset. Perhaps you did something else too that stopped the script from working again. The ‘utf-8′ charset is already set as the default chaset…Did you try to change the HTML page’s charset? I’d like to see the form in action if possible. You can give me the URL if you wish.
May 24, 2011 at 10:51 PM
I have the answer.
The problem is that a program which edits the php file (notepad++) is inserted at the beginning php file 3 characters “?»?”.
I do not see this in windows notepad, notepad++…..
When I open the file in the php editor, surprise!!! I see something new “?»?” :)
I remove unwanted characters and everything is OK
Thank you for your quick hint
Your ajax form is the best ;)
May 27, 2011 at 3:49 AM
Hi, I purchased the extender licence and am trying to add an extra select field to the array of a copy of the ‘make_a_reservation’ form config (which already has a select field – ‘sender_subject’).
I have successfully added other field types but as soon as I add another ‘select’ field the form (and most of the HTML) completely disappears from my contactus.php page. Please help!
Thanks,
Matt
May 27, 2011 at 4:17 AM
From what you are telling me, it could be a syntax error or a wrong added field in the ‘make_a_reservation’ form config. Do you have errors enabled for PHP? Make sure the “fields” array has the right syntax (no forgotten parenthesis or comma etc.). Please take a look at the other forms in the configuration folder to see how it’s done.
PS: You can share the URL to the form, to see what happens when you add that extra field. I could tell you what’s wrong…if you still can’t manage to fix this, send me the configuration file (make_a_reservation.php) and I will check it.
May 27, 2011 at 4:30 AM
I gave it one more try and it works now! Can’t think what I had done wrong, as I just copied the ‘sender_subject’ field array and then changed the selection options. Had done that before though. Maybe I had missed a comma or bracket! Thanks for the quick response.
May 29, 2011 at 5:07 AM
Hi again, I am trying to add a slide-in feedback form to my site. I presume I can use any of the form config files? However, having checked the ‘examples’ folder the slide-in form seems to require a lot more php code than the fixed forms do (and more than is shown in the documentation), and references files not even in the ‘ajax-form-app’ folder.
Am I meant to copy all the extra files required into the folder I need them in, or are all the files I need for the slide-in already in the ajax-form-app folder? Thanks. Matt
May 30, 2011 at 5:28 PM
There are 2 additional folders for the Slide-In Feedback form: media (for the images) and js (which contains slide-feedback.js.php). So make sure you add these folders too (rename them if you wish) when including the Fancybox AJAX Form into any of the pages. It’s all about the paths here. That’s where many people are having problems. If you put the right paths, it should work without any problems. Hope this makes sense.
June 6, 2011 at 3:12 AM
I am considering purchasing the premium script for use right now as a contact form, and would like to know if it is possible to incorporate CSS3 features, i.e. transitions on mouseover, box drop shadows, rounded corners, gradients, in the css code? It is for a danish website so danish letters ÆØÅæøå can be also sent I imagine? And one last question are the email addresses the form gets sent too, both the receiver and sender, protected from spambots, trolling by and snapping them up for spam mail? I know the captcha helps stop them from hijacking the form for their own nefarious uses, but are the emails the results are being sent to encrypted or protected in any way.
Tankyou, hope to hear from you soon
June 14, 2011 at 11:13 AM
Yes, of course the CSS files can be modified so you can add the effects you need if you know how to edit them. Some effects can be achieved with jQuery, while others using CSS3 (note that not all browsers support it). The email addresses are not revealed in any way in the pages. They are set by you in the script and the data sent from the forms will end in the inbox of the receiver. The email text is sent in clear text (not encrypted). If you are using SMTP to send the mails through a secure connection (using SSL), then the data sent (including the password) to the mail server is encrypted through a digital security certificate, making it almost impossible to be stolen.
June 8, 2011 at 12:03 AM
Ajax & jQuery – Basic Contact Form for Cubecart 3.0.12 to 3.0.20
http://www.cubecartforums.org/index.php?autocom=downloads&showfile=650
I´ve tried to contact you through your contact form here.
Please let me know if I should quit the download there and from my site.
Sorry about any incovenience anb thanks for your work.
June 14, 2011 at 11:15 AM
Make sure you put the link the actual post and not the direct link to the download file [each time you are linking to any of the files from BitRepository].
June 9, 2011 at 12:25 AM
Hi I purchased the developer version of this form a while back. It works great but for some reason I can get the ‘verified’ field to disappear on form submit.
I even added my own jQuery to detect the hidden value and when it changes to ’1′ then hide the div. However the hidden value only seems to change intermittently.
everything working apart from this, is there a setting to get this field removed after successful submission. Heres a live example Form Example
June 10, 2011 at 11:53 PM
sorted it with jQuery check the link in my first comment above if you are interested in the solution.
June 14, 2011 at 3:21 AM
Deprecated: Function eregi_replace() is deprecated in /home/bitrepository/public_html/demo/ajax-contact-form/functions.php on line 20
June 14, 2011 at 11:23 AM
Thanks for telling me about it. I’ve just updated PHP with the latest version and some old functions are now considered deprecated. I will update the demo page for the basic form.
June 18, 2011 at 7:35 AM
Hi there,
I was using the pro version a couple of months ago and it worked better than expected! However, now I’m trying to get the form to work with a new host and I’m having issues with the captcha image and the reload button; neither show up (as seen here: http://www.akrilic.com/contact-script.php)
I’ve looked through everything I can think of and can’t seem to find the problem.
If anyone knows of any mistakes that have caused this in the past, please let me know, I’d really appreciate it :)
Thanks,
Adam
PS: Everything works fine when I disable the captcha in the ‘common.php’ file, but it would be great to get it to work somehow.
June 18, 2011 at 9:18 AM
Just took a look on that page you shown me. It looks like the CAPTCHA font can’t be loaded. Try to open http://www.akrilic.com/contact-app/captcha/image.php separately and you will see the errors. Make sure the font you are trying to use exists.
If it still doesn’t work consider removing the following line:
$captcha->ttFont = $afb_path_to_captcha_fonts.$config['tt_font'].'.ttf';This way, it will not use TrueType Font, but a standard font.
June 18, 2011 at 10:53 AM
Thanks for the quick reply Gabriel
Removing the line specifying to use the ttf font made the captcha show up – it works now! But unfortunately, this is a superficial solution. Whatever was causing the ttf not to work is probably the same cause behind the refresh icon not showing up (also, the formatting on the ‘send message’ is different than from what I remember)
I’m pretty sure they’re all caused by the same issue, and whatever it is, is really frustrating me. I can’t figure it out. Any ideas?
Thanks,
Adam
June 18, 2011 at 10:08 AM
How do I set a default value for radio-buttons?
I tried this:
‘BafAdults’ => array(‘name’ => ‘Adults’, ‘columns’ => 3, ‘validation’ => array(‘radio’ => 1),
‘type’ => array(‘radios’ => array(‘baf-0′ => ’0′, ‘baf-1′ => ’1′, ‘baf-2′ => ’2′)), ‘value’ => ’0′),
(set value at 0)
but that doesn’t work. Any suggestions?
June 18, 2011 at 10:15 AM
I use this for the subject line of the auto-response message, and it works fine:
// AutoResponder Mail Subject
‘ar_subject’ => ‘Your – enquiry – arrival: {arrival}’,
However, using a similar line for the admin-mail, the placeholders are not filled with the actual field-values:
// if the ‘sender_subject’ field is not set, then add a custom mail subject
‘custom_mail_subject’ => ‘Enquiry from {last_name} for {arrival}’,
The admin-mail literally has this subject: ‘Enquiry from {last_name} for {arrival}’ (without the quotes – it is treated as text only – not as placeholders)
How to fix this?
July 7, 2011 at 11:42 PM
Can’t get the LIGHTBOX/SLIDE buttons to work – what might I do wrong?
July 7, 2011 at 11:52 PM
Take a look at the example and view the source code. You will notice that the trigger buttons have specific IDs that are referred in the JavaScript code that opens the Lightbox/Slider.
July 8, 2011 at 1:45 AM
…moved the files from EXAMPLES to the root folder and updated the links, also the files in the JS folder. The ordinary forms works but not the lightbox ones (links). Guess I missed something…
July 8, 2011 at 7:05 AM
Bought the package at Code Canyon
and installed it without changing anything, besides adding ‘from_email’
and ‘from_name’ in the config-files.
Still can’t get LIGHTBOX to work,
what am I missing ?
Regards – Immer Online
July 8, 2011 at 4:55 PM
Yes, you must have missed something important. Please share us the URL to the pages that have the form with lightboxes. I can tell you very fast what’s the problem: you need to use the right ID that is triggered in the JavaScript code. The Fancybox should load. It has support for many browsers. It’s one of the most popular lightboxes out there.
July 8, 2011 at 7:58 PM
Thanks for your reply. I agree with you that the Fancybox is a cool feature and I would like to get it to work. For test purpuses I put the package here:
“http://www.immeronline.dk/test/forms/examples/lightbox.php”
Regards – Immer Online
July 9, 2011 at 10:43 AM
Checked the URL. The paths to the jQuery file and the CSS files are not properly set. As you can see, if you view the source code and try to load the jQuery file (the path that it’s set now) you will see that it doesn’t work. Please send me privately your common.php and I will take a look at it and tell you what has to be changed there. You must have typed a wrong path there.
July 10, 2011 at 12:10 AM
Thanks for the hint Gabriel!
Fixed the “$script_path” and now its working. GREAT.
July 13, 2011 at 3:59 AM
I was looking to track how many times the form was submitted in Google Analytics in order to set up a funnell, obviously this poses some problems as the form is AJAX and has no thank-you.php page, I managed to figure out how to do this so thought I would share it, it seems to be working fine so far.
so if anyone needs to track when a form has been successfully submitted in google analytics (you must be using asynchronous tracking first) change the following in the acf.init.php file at around line 157 and after the following code: <?php if($acf_conf['custom_thank_you_url'] === false) { ?>
enter your GA virtual link:
// Google Analytics Tracking for form submission
_gaq.push(['_trackPageview', '/form-success.php']);
now when anyone fills out the form it will appear in your top content in GA.
if you want to track how many times the submit button was pressed but not submitted successfully enter your GA virtual link inside the <input> for the submit button:
<input id="acf_submit_button" class="acf_button" type="submit" name="submit" value="<?php echo $acf_conf['send_message_text']; ?>" onclick="_gaq.push(['_trackPageview','/virtual/customer_services/contact-form-submit']);">
July 13, 2011 at 7:47 AM
Thank you for sharing us this integration. I suppose the feature to redirect the user to a thank-you.php page after submit was not a feasible option for you, since you could have added the Google Analytics code on that page. However, most of those who are using AJAX Form Pro are not using the feature and prefer to keep their visitors on the same page. So, I hope your comment would be helpful for those who are looking to setup a funnel.
July 26, 2011 at 12:31 AM
Hi,I just paid for AJAX Form Pro.
But attachment on lightbox is not working! when i click on it nothing happened?
I use contact from example folder.
any help please.
July 26, 2011 at 12:37 AM
I would to check the URL to your page and see what’s going on there. I can tell you what was not done right. It might be the fact that you didn’t set up the right path to the JavaScript files.
July 26, 2011 at 1:46 AM
Hi,I have big mess there, AM trying to use it on script use smarty and big mess there
please take a look
http://zcommunity.net/help_contact.php
August 4, 2011 at 2:17 AM
Hmm I need to put two contact forms on the same page,go to 2 different email addresses trying to make sure I have no conflicts. any idea what file I should edit?
August 8, 2011 at 2:33 AM
I bought your tool for sending email.
Please, I want to save the form data into a MySQL database table
You can guide me how to do this?
August 9, 2011 at 2:21 AM
Sure! You need to edit the file parse.php that sends the form information to the email address of the webmaster.
Look for the line:
$afb_error['status'] = 0;After it, add the code that inserts the information to the database. Write me privately if you need more assistance.
August 10, 2011 at 9:12 AM
Hi Gabriel,
Thanks for your help.
I need some practical examples. Is it possible?
August 10, 2011 at 2:14 AM
I also bought your tool for sending email blasts. Is there a help forum to help me get started? I am having a little trouble.
August 10, 2011 at 7:42 AM
This address should be a start to find more about setting up the script: http://www.ajaxformpro.com/wiki/
In case you need more assistance, please write me privately.
August 21, 2011 at 12:16 PM
I am searching for a form tool that creates & processes. This one looks very promising! The form needs to support end user submissions that will be stored to a database and emailed to an admin. Only three fields are needed: Email, Subject & Comment.
Is this tool able to do this out of the box? If not is customization as a purchased service available?
Thanks
Julie
August 22, 2011 at 3:07 AM
@Julie, the script can create the form you want. However, it doesn’t have the feature of adding the data into a MySQL database. If you purchase the extended version of the script, I will add that customization for you (add form data into database and page to see the data that was previously inserted).
August 23, 2011 at 4:25 PM
Well, I just purchased the developer version today and applied to one of my client’s web page and I can tell this will save me some quality time on my other projects as well :). Thank you for putting this together. It is def. worth for the money.
September 8, 2011 at 10:07 AM
hi dude!
i was experiencing an issue with checkboxes on your premium version of the afp.
i was stuck with false option values getting setted if i use dropdowns.
so the html was something like:
Technical Question
the solution was, after a lot of checking out ;), that i have to set the layout to 1 instead of 3…
this brought me to the desired output of:
Technical Question
i am using this on a facebook app!
on a usual webpage this issue does not appear somehow!
regards,
guntram
September 8, 2011 at 10:12 AM
@keoal:
if the datepicker is empty and you set the option to validate it, the form shows the error and does not submit.
but i did not want this to be an option so i just setted the datepicker to a start date so that there will always be a date picked and the user can only change it.
if you concentrate on that a little, you can also check if the user deletes the field and set a date again into the field.
don’t know if you can verify a certain date frame, but i think you can set the datepicker itself to some range of valid dates…
September 8, 2011 at 10:14 AM
sorry for the frequency of my posts right now :(
but i wrote
“i was experiencing an issue with checkboxes on your premium version of the afp.”
of course i was experiencing an issue with dropdown-select boxes and not with checkboxes!!
September 16, 2011 at 3:21 PM
Hi,
Can this be used on Microsoft-IIS/7.5 Server?
Clearly a lot of these forms integrate with Linux php mail and the Sendmail program.
But Ive been asked to host on Microsoft-IIS/7.5 Server. I believe it has php installed but uses SMTP only.
Ive no experience of Microsoft-IIS/7.5 Server.
Honest feedback required because im happy to pay a fix if it can work under Microsoft-IIS/7.5 Server
September 19, 2011 at 9:22 AM
Hi Gabriel,
Great script! Purchased the Pro version and am very happy. Couple of questions:
1. Can I set a hidden field in the form?
2. Is it possible to do inline Ajax validation, i.e. is user name already in a database etc?
Many thanks, Thomas
September 26, 2011 at 9:28 PM
Is it possible to have a field using jquery datepicker set as a mandatory field in the new pro version?
October 10, 2011 at 3:20 AM
I had some problems getting this to work on IE, but recently got it working. I like the functionality and cleanliness of your basic form and have modified the CSS to my own needs.
Then I decided to upgrade a contact form with this one. This form would be nested in mb_container, only that plugin uses newer Jquery and I can’t get them to play nice. Your demo files used jquery.1.2.6-min, I tried a version four and a fiver, which work for the container, but they don’t animate the notifications of your form. My setup looks too PRO to go back, so what are my options? Can you think of something I would need to update to get this to work with newer jquery libraries?
Great work otherwise. Kudos.
October 23, 2011 at 1:04 PM
Hi,
I purchased the extender version back in June this year. I can’t seem to find any documentation or example of using the attachment upload feature. Please can you help me? Also, are there updated versions of the scripts available, as I think I read you did some sort of update in July?
Thanks.
October 26, 2011 at 4:40 AM
Hello, I have two questions before I buy this. 1) I downloaded the free form and I realised that the email that it sends, doesn not have subject nor sender nor header.Why is this? Is the premium one different? 2)About Developer License: Does it mean I cant use the form in a site I design for clients? It says unlimited and unlimited hosts so I should be able to use it on clients sites, no?
October 31, 2011 at 4:46 PM
Hi Gabriel
Impressive script, and the form exactly what I have been looking for. But does appear to be for developers and people who know how to write code.
Fopr someone like myself, who has limited experience with websites and code, the comments posted are scary, if they have problems with the code then a layman definitely will.
Your extended version explains you will configure and upload 2 forms to 2 websites, but does not explain how this script comes, is it a complete form then it gets modified? Not enough information for people like myself who like your script and forms to purchase and not know if there is proper help afterwards
Kind Regards
Mike
November 28, 2011 at 11:03 AM
Thank you for sharing us this integration. I suppose the feature to redirect the user to a thank-you.php page after submit was not a feasible option for you, since you could have added the Google Analytics code on that page. However, most of those who are using AJAX Form Pro are not using the feature and prefer to keep their visitors on the same page. So, I hope your comment would be helpful for those who are looking to setup a funnel.