AJAX Form with CAPTCHA, Realtime Validation and PHP Backend

Create Unlimited Secure Forms with AJAX Form Pro

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>&nbsp;</label><INPUT class="button" type="submit" name="submit" value="Send Message">
</form>

</div>

</fieldset>

</div>

 </center>

 </body>
</html>

Ajax Contact Form - Show Errors

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.

Capture from the Firebug Console

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);
 });
 }  

  });

Ajax Contact Form - Message Sent

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.

Download | View Demo

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

Live Preview
Screeshots 1, 2, 3, 4, 5, 6, 7

Some of the features you get with AJAX Form Builder

Create unlimited AJAX Forms in the same page/multiple pages

You can generate as many forms as you like and easily include them anywhere you wish. Each form has its own configuration file. For instance, you can enable the CAPTCHA for a form, while you can disable it for another form.

RealTime Validator

This makes the form completion process interactive. The errors show/hide while the user fills the form. If this feature is disabled, then all the errors will show above the form once the user clicks the submit button.

Powerful CAPTCHA: Anti-Spam Verification Image

You can use letters, numbers or both (can be enabled/disabled). The verification image can be refreshed in case the user is having trouble in recognizing the characters. While the user types the security code the script verifies it in the background. Once the user types the right characters, it automatically shows (in real-time) a successful message to the user. Unlike many AJAX CAPTCHAs out there that rely on JavaScript as an Anti-spam measure and have a medium security level, the one I have chosen to implement uses PHP to securely generate and register the required code in the background. The comparison is a case-insensitive one in order to make the filling process easier without annoying the person who fills the security code.

Auto Responder

Useful to notify your visitors that their message was successfully sent (e.g. "Your message has been successfully sent. We will reply to your inquiry within 48 hours"). For instance, it can be used while you're in vacation and let the users know that you will reply to them as soon as possible. The headers (from name, email) can be set in the configuration file.

Send Mail with Attachments

This application supports adding file attachments to the data that is sent through the AJAX Forms. You can either receive the links to the uploaded files or the actual attachments to the mail message. I'd prefer the former method, because often the mails with many attachments are automatically reported as SPAM. This "file attachment" feature is also available if you use the AJAX Form inside a Lightbox.

Fully (CSS & HTML) Customizable: Supports any form element

Easily add/remove fields, change notifications, customize the mail settings. The following fields are supported: input text boxes, textareas, single/multiple selects, checkboxes, radios. This way, you can create more complex web forms and surveys without editing any HTML code.

Turns into a simple PHP Contact Form if JavaScript is disabled

Is the visitor in that 3% of people that have JS disabled? No worries! The form degrades gracefully into a basic non-AJAX PHP Contact Form.

Tableless

Clean Layout (uses LABELs, DIVs and Paragraphs)

Lightbox integration (Powered by Fancybox)

Display the form in a Mac-style "lightbox" that floats overtop of web page.

Modal Form with Sliding Transition (Left & Top)

Add some style to your pages by loading the forms in a fancy way

Redirect to Thank You page after Successful Submission

If you do not want to show the basic successful confirmation message, you can redirect the user to a customized thank you page

Send mails using either mail() function or through SMTP

Besides the basic mail() function, you can use the SMTP method to send the mail. This way, chances are higher the message won't end in the JUNK/SPAM folder, especially if lot of mails are sent.

Easily send mail to multiple recipients/webmasters

You have the option to set as many recipients you want to get the mail that is sent through the forms. Each form has its recipients. For instance, one can be set to send the form information to the Marketing Department while other can be set to send the information to the Billing Department.

HTML Code Separated from the PHP Code

The script is powered by the Smarty template which is meant to ease the process of web design by separating the (logic) PHP Code from the (output) HTML code. Beside the fact that things are kept clean, it is also easier for you to make changes to the HTML structure without touching the PHP code.

100% Source Code Available

You have the possibility to customize the script as you wish. NO encrypted or obfuscated code!

Documentation

A help page that guides you through the setup process (1. Basic Settings, 2. HTML Structure, 3. CSS Files and Structure, 4. JavaScript, 5. Sources and Credits)

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!

To get instant access to this script right now — simply select your license type below and click your desired payment method.

Suitable for installing on a single website or intranet site project. A single license is for one domain.

Lets you install unlimited copies of the script. Unlimited license is for unlimited personal hosts (domains or sub-domains).

Includes both the developer and the commercial license. You CAN use this script in your clients' projects. However, you DO NOT have the right to re-sell it. Example: you are allowed to incorporate the script in a Wordpress Theme that is sold on Themeforest.net or into a CMS you made for a client of yours.

After checkout, you'll get immediate access to the script. Place your order right now to get started and get all features of AJAX Form Builder.

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" - Jared (http://www.haroldsmithbicycle.com/)

"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." - Kevin Morrison (NW Interactive designs)

"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." - Rolando Martinez Barron (http://www.matamoros.com/)

"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." - Kayhan Yalinkilic

September 2, 2008
article by Gabriel C.
545 comments

Tags: ajax form builder, form, tableless, validate

545 Replies to "AJAX Form with CAPTCHA, Realtime Validation and PHP Backend"

« older comments 1 … 3 4 5 6 7 newer comments »

Anks
August 25, 2010 at 1:15 AM

Reply

Hey,
I wanted to know how to make this into SMTP method, cuz my server filters a lot of mails coming through phpmail!
1. Gabriel C.
  November 5, 2010 at 2:02 AM
  
  Reply
  
  In a couple of days, I will release the new version of the script that will have the feature “Send Mail through SMTP”.
George
September 8, 2010 at 6:51 AM

Reply

Thank you very much Gabriel for your quality work
IanA
October 3, 2010 at 12:43 AM

Reply

Hi,

I’ve download the premium version, which I’ve installed on my test site and all is working well.

The only problem I’ve got is that email notfications are sent twice to my webmaster address and also to the person who has completed the form.

Does anyone have any thoughts why this might be happening? (and no… I’m not pressing submit twice!! ;-) )

Many thanks
1. Gabriel C.
  October 13, 2010 at 5:55 AM
  
  Reply
  
  @Iana, thanks for telling me about this. The script is made to send the mail only once, so I am surprised that you get the mails twice. Have you tried other scripts on your server that send mails? Perhaps it’s due to the server’s settings. What’s the URL to your form? I’d like to test it.
  1. IanA
    October 13, 2010 at 6:07 AM
    
    Reply
    
    Hi Gabriel,
    
    I’ve just sent you a mail with additional details to support [ - @ -) bitrepository ( :dot: ] com
    
    I hope they help!!
Steven
October 4, 2010 at 8:02 PM

Reply

Hi Gabriel,
Have you figured out yet how to add checkboxes and radiobuttons? It would be a great addition to your form. It would even make your form perfect :)
1. Gabriel C.
  October 13, 2010 at 5:53 AM
  
  Reply
  
  @Steven, I am working on it. You can manually add checkboxes at this time. I know this is an inconvenience for you. I will try to release the new version of the script as soon as possible since you are not the first that asks me for this feature. The new AJAX Contact Form Script will also have the option of sending mail(s) with attachment(s).
Chris
October 5, 2010 at 1:00 AM

Reply

Hello!

I would like to buy the Premium licence for this contact form, but it is important for me to know – is it possible to add custom checkboxes and dropdowns?

Thank you,
Chris.
1. Gabriel C.
  October 13, 2010 at 5:50 AM
  
  Reply
  
  @Chris, the addition of checkboxes is not possible yet. I am working on it and it will be possible when I will release the new version of the script. The only way to add checkboxes now is manually.
John
October 8, 2010 at 2:34 AM

Reply

where does

var str = $(“form”).serialize();

go? What page? Thanks I’m new to this.
togc
October 9, 2010 at 9:19 PM

Reply

Hello,

I am using this function for long time. I like it very much and it works wel. The problem is that from time to time I am getting support requests from my users who can’t submit forms with this function. They say that nothing happends when they click submit button.
I have 3 support requests from people who use Mini Opera browser and 1 support request from user who uses Internet Explorer (scripts are not disabled in their browsers).

Any ideas?
John
October 11, 2010 at 4:40 PM

Reply

I dont understand why I cant get this to work. I made copys of all the files in dreamweaver and uploaded it to my server
(should they be in a specific folder?,some file edited in a certain way)

config.php(added my email)
style.css(unaltered)
contact.html(unaltered)
functions.php(unaltered)
contact.php(unaltered)

I get to the ‘message sent’ dialogue after hitting send. But the email never transmits to my email??
Any feed back would be helpful. Would like to purchase the $5 upgrade but want to make sure I can make it work. Any feedback would be helpful.
1. Gabriel C.
  October 13, 2010 at 5:45 AM
  
  Reply
  
  @John, I’m really surprised that it shows “message sent” but you just don’t get the mail. Perhaps the mail arrived into SPAM folder. The mail() function returns true if the mail was accepted for delivery so it should have been sent if you’ve seen the successful confirmation message. Where do you have your e-mail hosted? Can you test using another e-mail address?
Deb
October 12, 2010 at 9:58 AM

Reply

Hi Gabriel I like the form, and I know how to add form field to contact.html, however I am not so clear where to add the parse info in contact.php.

Is it:

{
52.$mail = mail(WEBMASTER_EMAIL, $subject, $message,
53. “From: “.$name.” rn”
54. .”Reply-To: “.$email.”rn”
55. .”X-Mailer: PHP/” . phpversion());
1. Gabriel C.
  October 13, 2010 at 5:41 AM
  
  Reply
  
  I am not sure what you want to do. Just leave parse.php as it is. You can include the form in a HTML file. However, it will not work if the user has JavaScript disabled. If you want the form to degrade gracefully when the JS is disabled consider including it in a PHP file. Of course, you can use SEO Friendly URLs if you want (e.g. contact-us.html instead of contact-us.php).
  1. Deb
    October 13, 2010 at 6:44 AM
    
    Reply
    
    I was after additional form fields, but I have managed to achieve this – thank you.
Henri
October 18, 2010 at 8:26 AM

Reply

Hi, I’m having trouble with the script. When I click Send button it pops up an message window saying “success!” although there’s no data inserted to the fields. Also with correct data it shows the message and doesn’t send an email.
1. Gabriel C.
  October 19, 2010 at 6:48 PM
  
  Reply
  
  @Henri, this happens if you download the form and access it directly (by actually double clicking on the contact.html file after you unzip the script package) without uploading it to the (shared/dedicated) server (which should support PHP).
  1. Henri
    October 20, 2010 at 11:59 AM
    
    Reply
    
    No, I figured it out that it also happens in Safari 5 browser (at least under Macs) when loading from server. No problem with IE and Firefox in Windows.
    1. Henri
      October 21, 2010 at 1:44 AM
      
      Reply
      
      Also the same problem is with Chrome. Does someone know a solution for that?
    2. Gabriel C.
      October 21, 2010 at 8:41 AM
      
      Reply
      
      Can you share me the URL? I’d like to test it. Perhaps you didn’t setup the form correctly.
      1. Henri
        November 5, 2010 at 7:34 AM
        
        The link is http://www.henrilindeberg.com
        Also if you see a lot of mistakes there then take that to consideration that I am not a programmed :D.
Jan
October 22, 2010 at 11:15 AM

Reply

Hello Gabriel,

I’m thinking of buying an extended license, but I’d like to know if there will be an option to use SMTP instead of the mail function in the new version?
1. Gabriel C.
  October 26, 2010 at 10:07 AM
  
  Reply
  
  @Jan, I am almost done finishing the new version of the AJAX Contact Form that has support for adding checkboxes and radio buttons and also offers the possibility of sending SMTP mail. I’ll let you know when the new script will be ready for download.
  1. Jan
    October 26, 2010 at 10:11 AM
    
    Reply
    
    Great, looking forward to it.
Mike
October 26, 2010 at 5:49 AM

Reply

When I submit the form I just get “OK” above the first name input. Upon changing line 27 from:

if(msg == ‘OK’) // Message Sent? Show the ‘Thank You’ message and hide the form

to:

if(msg = ‘OK’) // Message Sent? Show the ‘Thank You’ message and hide the form

everything works but there is no validation (obviously). I went into contact.php and edited line 63 to mirror the error message div. I was able to get it to come up as it should with “1″ in place of the success message. On second thought, the hide function did not work. I’m not sure how to get the notification_ok message to work…

It DID work before, but I must have downloaded a newer version of the script?

any help is appreciated
1. Gabriel C.
  October 26, 2010 at 10:01 AM
  
  Reply
  
  @Mike, I suggest you re-download the script and check the differences between the original version and the one modified by you to see what’s wrong. Also, can you share the URL to the form here? I’d like to take a look at it, to see why you’re having these problems.
2. John S
  January 12, 2011 at 2:42 AM
  
  Reply
  
  I am having the same problem on the submit as you – it shows OK above the form after success. If I change it to ‘OK’, it hides fields and shows notification_ok. how was this resolved for you? Thanks!
George
October 29, 2010 at 8:53 AM

Reply

First off I’m a novice at this…..

I’m using a program called shutterbug to install the premium contact form.

it is not an html editor. It is designed to drag and drop html which is then linked to a web page manually.

I need to know which folders .. files to drag into Shutterbug … Is there a main file that will start the script?

Sorry for not knowing my html… maybe this is just way over my head.. Thanks
GS
simone
November 2, 2010 at 5:53 AM

Reply

Thank you man! good tutorial! really!
Felipe Bezerra
November 4, 2010 at 1:53 AM

Reply

Ola gabriel, gostei muito do seu tuto. Gostaria de saber como adicionar mais campos no corpo no email.

Exemplo: Mensagem, Nome, Email, Subject.

Isso tudo no corpo no email.
1. Gabriel C.
  November 5, 2010 at 1:57 AM
  
  Reply
  
  Ola Felipe :)! Please try to write me in English from now on. Are you talking about the basic or the premium script? For the basic one you just need to check the previous comments on the first page in this post. As for the premium one you can check the documentation. It contains a section that explains you how to add/edit/remove fields.
Jeanne
November 4, 2010 at 7:08 AM

Reply

I previously purchased your contact form in the summer 2010. I am having a problem with the verified checkmark being missing when the captcha is correct and can’t figure out how to fix it.

Upon coming here to see if I could find the answer for a fix I noticed that the form on your site is now different.

How much does the form you are now showing for sale differ from the one I already purchased? And do I need to update mine to the newest? Are updates free or discounted?
1. Gabriel C.
  November 5, 2010 at 1:52 AM
  
  Reply
  
  Can you share me the URL to the form? I’d like to see if you installed everything correctly.
  
  The form that is on the site is not yet different. The new version of the script will be released in a couple of days. I have to finish writing the documentation for it. This update is free.
Felipe Bezerra
November 5, 2010 at 3:06 AM

Reply

Sorry Gabriel … For example I use google translator. But thanks for the clarification.
Henri
November 9, 2010 at 6:53 AM

Reply

Above I mentioned a problem in Safari and Chrome where it only pops up a message saying “success!” and gives an option to click OK.

Does anyone knows what the problem might be?
Link is: http://www.henrilindeberg.com/
1. Gabriel C.
  November 22, 2010 at 1:10 AM
  
  Reply
  
  I see that it does work fine now. You should not get any alert message if you have JavaScript enabled. However, consider doing some CSS customization too ;-)
Kiddi Geir
November 15, 2010 at 3:26 AM

Reply

Hello people,

How can I send to multiple emails in the line:
define(“WEBMASTER_EMAIL”, ‘your_name@domain.com’);

Can I add comma or ” ” or ‘your_name2@domain.com’ to send to more than one email?

For example: define(“WEBMASTER_EMAIL”, ‘your_name@domain.com, email2, email3′);
1. Gabriel C.
  November 22, 2010 at 1:09 AM
  
  Reply
  
  A response for your inquiry was already posted here: http://bit.ly/aZq156 ;-)
Albatros
November 27, 2010 at 12:07 PM

Reply

Hello,

I am interested in your contact form. Within this plugin, is there a way to make multiple forms easily? I am shopping around and not many seem to have an easy way to have more than one form run off the same file system.
1. Gabriel C.
  November 29, 2010 at 10:11 AM
  
  Reply
  
  At the moment, only one form per page can be added. You should have some knowledge of PHP and JavaScript to add more forms in the same page. If there is demand, I can work on such a feature and update the current script. Or, if you are willing to purchase the current “AJAX Contact Form”, I can help you to setup multiple forms per page, in exchange of a fee.
tomC
November 28, 2010 at 11:07 PM

Reply

Hi, i recently purchased the premium developer version after testing the free version.

all seems to work except on certain machines, in Chrome7 the security code will not work i have tried many times or get this to work. ui have used one of the examples and just changed the email in the common.php file and this still happens. here’s a link to a screenshot of it failing in chrome. i have also had a similar issue in FF 3.6.12 where the form fails to submit when the button is pressed, any help would be greatly appreciated. link to test form thanks
1. Gabriel C.
 November 29, 2010 at 10:07 AM
 
 Reply
 
 I’ve just tested the script in Chrome 7.0.5 and it works flawlessly. Consider testing my demo page using the following URL (it’s without frames): http://bit.ly/fRUQSG
 
 PS: I’ve recently noticed that the AJAX Captcha is not working properly in Safari if the contact form is inside an <iframe>. Consider making some tests on the form from the above URL and let me know how it works for you. Also, do not forget to use the refresh feature to generate a new verification code.
 1. tomC
 November 29, 2010 at 10:21 AM
 
 Reply
 
 hi, the script wasn’t in an iframe and i tried the refresh feature many times. However I was testing whilst at work(not a web firm unfortunately) and I noticed that when inspecting element, that each page had a bit of js added to the start of it by the network (called bluecoat I believe, it’s some kind of pop-up blocker from what i can see) could this be what’s affecting it? could you imagine any way around this? it seemed to work fine in IE6/7/8 and ff though. Many thanks for the quick reply.
pixi
November 29, 2010 at 3:35 AM

Reply

We bought an extended licence for AJAX Contact Form and we use it in some of our templates in themeforest. Few of our customers are having issues with the form. Some of them say the form gets stuck on “Submitting”. Some of them receive “The mail cannot be sent due to an internal error. Please retry later!” error. We think it is related to the SMTP authentication or some other settings regarding php, right? Do you have any idea about how we can solve these issues? How can we guide our clients? The form works fine with all of our templates on various hostings that we own. But 15% of our clients are having issues. We usually ask them to contact their hosting providers because we don’t have much knowledge on php and smtp authentication etc. But once we started to receive more and more complaints we thought we should ask you. We would appreciate if you could help us.

Lastly, does the extended version have any updates?
1. Gabriel C.
  November 29, 2010 at 9:59 AM
  
  Reply
  
  1) The output returned by parse.php is in JSON format. If more data is shown then the “Submitting…” bug appears. This is due to the fact that the format returned is not JSON anymore. In the new version of the AJAX Contact Form, I have added a debug tool that can be activated in order to see the response from parse.php. In most cases (I believe in all), parse.php generates a PHP error. This is usually a problem from the server settings (a missing PHP function, a very old PHP version) OR from the wrong setup of the ACF script. So, parse.php shows the JSON response + the generated error. That’s why it gets stuck on “Submitting…”.
  
  In the JavaScript file that handles the validation (either init.php or acf.init.php – depends on the script version) there is a line success: function(response) { (in the first AJAX call). After it, you can add the code alert(response);. This will show the response from parse.php and this way the customers can see what’s wrong on that side.
  
  2) “The mail cannot be sent due to an internal error. Please retry later!” – this is the most common error and is definitely due to the fact that the server is not configured properly to send mail. I hear this all the time (and I will hear again from now on) from around 10% of my customers. I give them the same answer: If the script is tested in localhost (and not on a live server with PHP mail() function enabled) it’s very likely the customers will see this error. They have to test if mail() works before using this script (it should work on any decent hosting environment).
  .
  My advice would be to update the template with the new AJAX Contact Form script, test it, including debugging etc. etc. then mail the customers to re-download it (hopefully they didn’t make many changes to the template). I have to point out that the new script can be configured to send mail via SMTP method too (not only the basic mail() function).
  
  Let me know if you need further assistance!
  
  PS: Do you have the latest version of the script? You can use the same link you got to download it. If it has expired, let me know and I’ll send you a new one!
  1. pixi
    November 30, 2010 at 11:40 PM
    
    Reply
    
    Hello,
    Thank you for your response. I sent an email to you regarding the download link for the latest version. Our link seems to be expired…
    1. Gabriel C.
      December 1, 2010 at 2:39 AM
      
      Reply
      
      I’ve just sent you a new download URL ;) Good luck!
tomC
November 29, 2010 at 11:21 PM

Reply

how can i reduce the amount that the form slides down when an error message is displayed.?
1. tomC
  November 30, 2010 at 11:43 PM
  
  Reply
  
  sorry stupid qustion, i had made a mistake in the css. one final question is how do i make the captcha background transparent. i found the related var in the class.captcha.php file and i have fiddled with the common.php but cant seem to get it to betransparant as i want to apply a background image to the containing div.
  many thanks
  1. Gabriel C.
    December 1, 2010 at 3:10 AM
    
    Reply
    
    To set the CAPTCHA background trasparent you should edit captcha.php (from the directory contact-app) and after:
    
    $captcha = new Captcha();
    
    ADD:
    
    $captcha->transparent_bg = true;
    
    This will make the background 100% transparent!
    
    PS: To change/remove the border consider editing #acf_captcha from stylesheet.css.
Sub Elahi
December 7, 2010 at 3:49 PM

Reply

Oh i love it . nice form btw ;)
Steve C
December 9, 2010 at 10:42 AM

Reply

Can your contact form do simple math so it could be used as a simple order form? Such as: “quantity” x “price” + “sales tax” + “shipping”
1. Gabriel C.
  December 9, 2010 at 10:44 AM
  
  Reply
  
  The AJAX Contact Form script is just not designed for this. You need to add this feature to the form.
  1. ChrisL
    January 20, 2011 at 11:26 AM
    
    Reply
    
    I am surprised that this functionality has to be added – your features list suggests it can be used as an order form:
    * 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
    1. Gabriel C.
      January 20, 2011 at 11:44 AM
      
      Reply
      
      Chris, I hope you are talking about the AJAX Form Builder, not the basic AJAX Contact Form. My feature list suggests indeed that it can be used as an order form. The list contains examples of forms that can be generated through the script. Some of the people who purchased it, already customized their forms (you can see the screenshots). It’s really easy to make an order form: you just have to edit one file, write the fields you want to have in the form (either text, textarea, checkboxes or radios) and the script will take care of everything (validation, send all the data to webmaster’s email address). Just let me know if you need more clarifications ;-)
      
      PS: Here’s a customized order form in action: http://muranolampadari.com/preventivi.php
      1. ChrisL
        January 22, 2011 at 2:15 PM
        
        Thanks for the response will purchase and try it out in the next few days.
Justin
December 12, 2010 at 11:32 AM

Reply

HI there. I am getting a depreciated message on the functions.php page. Seems eregi_replace() is no longer valid in PHP 5.3

Error Message is:
Function eregi_replace() is deprecated in functions.php on line 22

Do you know a fix for this? I’m trying to figure it out but am a PHP novice. Thanks. And thanks for making the form available!
1. Gabriel C.
  December 17, 2010 at 9:53 AM
  
  Reply
  
  You must have got an old code where I used eregi_replace().
  
  In the new version of the script I am using another function: preg_replace() ;-)
  1. Justin
    December 17, 2010 at 10:32 AM
    
    Reply
    
    Awesome. I’ll get the latest version. Many thanks. And many thanks again for such a great script. It has been hugely helpful.
mohammedmehdi
December 13, 2010 at 1:53 AM

Reply

the submit button doesnt even work
(yes im an amature)
1. Gabriel C.
  December 21, 2010 at 8:23 PM
  
  Reply
  
  I’d like to see the form live so I can check if everything was installed correctly. Perhaps, you have some JavaScript errors. You can check that in Firefox using Tools > Error Console > Errors. If possible, I’d like you to share us the URL to the form.
tomC
December 16, 2010 at 11:13 PM

Reply

Hi Gabriel. I purhcased the developer version of this script and managed to get it working perfectly on my test server HERE but having moved it over to the clients server HERE i seem to be getting javascript parse errors. i phoned the host (1&1) who told me the code was the issue. however i believe its something to do with their AJAX setup. i would be grateful if you could have a look at this for me. this is the error google chrome gives me

acf.init.php:1 Uncaught SyntaxError: Unexpected token <

and also a warning:

acf.init.php:-1 Resource interpreted as script but transferred with MIME type text/html.
1. Gabriel C.
 December 17, 2010 at 9:48 AM
 
 Reply
 
 Just checked the script from the clients server:
 
 I get the following error:
 
 Error: missing ; before statement Source File: http://www.brentwoodhairdresser.co.uk/contact-app/js/acf.init.php Line: 2, Column: 3 Source Code: Parse error: syntax error, unexpected T_CLASS, expecting ',' or ';' in ..../contact-app/libraries/javascript.packer/class.JavaScriptPacker.php4.php on line 69 
 
 Are you sure you haven’t changed anything in class.JavaScriptPacker.php4.php?
 
 Note: It looks like the host is using PHP4. Consider contacting them to upgrade to PHP5.
Oli
December 17, 2010 at 9:14 AM

Reply

Hey Gabriel,

I’ve setup this script and it works perfectly but i’m trying (and failing) to make a little change. Could you help me out?

At the moment when the form is submitted it hides the form and gives a thank you message. I’m trying to make it so that the form doesn’t hide, but instead disables the submit button and offers a reset button to clear the form. I found an example here: http://www.the-art-of-web.com/javascript/doublesubmit/ (see example 2. More User-Friendly)

If that’s not possible, could you show me a way of adding a “new message” button under the “thank you” message which un-hides the form and resets it?

That would seriously help me out right now!

A good will gesture?

Thanks.
1. Gabriel C.
  December 17, 2010 at 9:39 AM
  
  Reply
  
  In common.php, you have the following options:
  
  $acf_conf['hide_form_after_submit'] = false;
  $acf_conf['clear_fields_after_success_submit'] = true;
  
  If the first one if set to ‘true’ and the second to ‘false’ you should get the desired result. Do you have the latest version of the script? If you are using the old one you can find the constants that are defined (they have the same name as these variables: array keys).
Oli
December 17, 2010 at 10:23 AM

Reply

Hi Gabriel,

I’m using the free version of your script which doesn’t seem to come with a common.php file. I can’t find any reference to $acf_conf or clear_fields.

Could you please please show me how to add this option to the free version?
1. Gabriel C.
  December 21, 2010 at 8:20 PM
  
  Reply
  
  In contact.html, find the line:
  
  $("#fields").hide();
  
  Replace it with:
  
  $('#ajax-contact-form')[0].reset();
  
  This way, the form will not be hidden after successful submit and the fields will be cleared ;-)
  1. Oli
    December 23, 2010 at 2:41 AM
    
    Reply
    
    Hey ~~Gabriel~~ Santa,
    
    That’s exactly what I wanted!
    
    Merry Christmas!
Aldo
December 20, 2010 at 10:06 AM

Reply

Hi! This is a great contact form! I have a question: I am Spanish and we use accents and the “Ñ” letter. How can it works with the accents? Does it support utf-8? Anybody can help me? Thank you!
1. Gabriel C.
  December 31, 2010 at 12:56 AM
  
  Reply
  
  You should change the charset from $acf_conf['mail_charset'] = 'iso-8859-2'; to $acf_conf['mail_charset'] = 'utf-8';
  1. Aldo
    December 31, 2010 at 2:43 AM
    
    Reply
    
    Thank you very much Gabriel, however I can´t find that code line. Where is it? Thank you again!!
    1. Aldo
      December 31, 2010 at 4:06 AM
      
      Reply
      
      I forgot: I am using the free version. Thank you Gabriel!
James
January 3, 2011 at 5:32 AM

Reply

Hi all

am using the basic version of the contact form and I (think) I’ve followed everything from this tutorial. All working but when I submit my form it says message has been sent but I don’t receive an email. Any ideas why this is?

+ beening a newbie to all this the only thing I dont get is this section:

am I supposed to change the “WEBMASTER_EMAIL”? If so what to?

Thanks in advanced :)
1. Gabriel C.
  January 3, 2011 at 5:37 AM
  
  Reply
  
  First of all, make sure you test the script on a real server (not localhost). You should put your real e-mail address in config.php:
  
  define("WEBMASTER_EMAIL", 'your_email@domain');
  
  Just replace your_email@domain with your real e-mail address and it should work without any problems. Any decent hosting should have these days the mail() function enabled.
  1. James
    January 3, 2011 at 6:59 AM
    
    Reply
    
    Yeah it is live on my server and I have changed ‘your_email@domain’ to a vaild email address but still nothing.
    
    Just don’t make no sense
JP
January 8, 2011 at 9:11 AM

Reply

I’m having the exact same issue as James. Any update on this one?
1. James
  January 8, 2011 at 10:27 AM
  
  Reply
  
  Hi JP
  
  Yeah I finally got mine working, I was using a hotmail account email like e.g. james [ at ] hotmail [ . ] co [ . ] uk and that doesn’t work.
  
  I used the email from the domain name that I brought in the end and that worked perfect. e.g. info [ at ] webdesigner [ . ] co [ . ] uk.
  
  Hope this helps!
  1. JP
    January 9, 2011 at 8:27 AM
    
    Reply
    
    Hi James
    
    Thanks for the help. I tested other email clients and they also worked.
    
    Any reason why this happens with hotmail?
Sharmaine
January 15, 2011 at 5:41 AM

Reply

Hi, this is my first time I’m trying to create a form that works as opposed to just aesthetics. :)

I’m trying to get two jQuery scripts to work on one page.One the form, and the other is an accordion menu. After adding the form both cease working.

I’ve done all above and there doesn’t seem to be any syntax errors but I can’t get it working?

Please help me!
ES
January 19, 2011 at 6:14 AM

Reply

quick question, I know its 2011 and this post is old, but I have utilized this on my site. I’ve used the following fields:
name,email,phone,message.

the message field appears in the subject line of the email instead of the message

the phone, field does not get posted in the mail message. Any idea of how to get this to work.
Vladimir
January 26, 2011 at 10:52 AM

Reply

Hello,

I bought the developers license from you, thank you, everything works well. Right now I am currently creating a form using the right horizontal layout, and I would like to incorporate the DatePicker function, how would I do this? So far, in the directory “Right Horizontal Label” I have added an image of a calendar and I added a folder UI with all the included files, but I was not successful. Please help me as soon as possible.

Thank you,
1. Gabriel C.
 January 27, 2011 at 8:02 AM
 
 Reply
 
 Hello Vladimir,
 
 In the “in-field-labels-layout-dp” folder look for ‘contact-app/js/acf.init.php’ file. Open it and copy the all the var dates = ..... code before the code:
 
 // Show the 'Refresh' Icon: This will work if JavaScript is enabled! <?php echo $acf_jquery_prefix; ?>('#acf_captcha_refresh').show(); in
 acf.init.php from “Right Horizontal Label”.
 
 In common.php, you must specify “datepicker” as the class for the field where you need to activate the datepicker (see ‘check_in_date’ from common.php, in ‘in-field-labels-layout-dp’).
 
 Consider removing the line:
 <?php echo $acf_jquery_prefix; ?>(this).parent('div').children('label').css({opacity:0, display:'none'}); It’s for the “in-fields” layout. I am sorry for this inconveniece. Hopefully you will manage to make it work! If not, you can give me ftp access to your site (via email) and I will make the changes you need.
John
January 27, 2011 at 7:55 AM

Reply

Hi everybody! I’m testing the Free Version and I’ve a problem with special characters: Does it support utf-8? How can I set up it? Anybody can help me? Thank you very much!
1. Gabriel C.
  February 16, 2011 at 10:28 AM
  
  Reply
  
  Consider setting the utf-8 charset. You have an example at the following URL:
  
  http://www.php.net/manual/en/function.mail.php
Vladimir
January 27, 2011 at 7:58 PM

Reply

Hi Gabriel,

Thank you very much for answering my question, it works well. However, when I fixed the first issue, another one occured. Now, after putting in the verification code it checks it but does not show that it was successfully verified. The field completely disappears. What should I do?

Thanks.
Vladimir
January 27, 2011 at 8:40 PM

Reply

Nevermind, I fixed the problem, I took a part of the code from left-right-justified-horizontal-labels-layout from file acf.init.php starting from line “Security code” and ending in “/ Necessary if the form was reseted” and replaced the same part in the working file.

Thank you.
Rhodrey
January 28, 2011 at 5:53 PM

Reply

Hi Gabriel,
Nice tut. I managed to successfully implement this on a client website. I have an issue however. Using the localhost, the script worked perfect. Placing it on the web server is fine up to a point. The email is sent, but the fields are not hidden and the thank you message displayed. You can take a look at http://www.mpevaluation.net23.net/contact.html
1. Gabriel C.
 February 16, 2011 at 10:25 AM
 
 Reply
 
 It looks like you’re using a free hosting service. Am I right? The output from contact.php is indeed ‘OK’ but due to your hosting account some statistics code is added automatically into any opened page OR you have added that code yourself into contact.php.
 
 The code is:
 
 <noscript><a href="http://www.hosting24.com/"><img src="http://analytics.hosting24.com/count.php" alt="web hosting" /></a></noscript> 
 1. Rhodrey
 February 16, 2011 at 1:37 PM
 
 Reply
 
 You are indeed correct. I am using a free hosting service for testing purposes. Is that the reason why it fails to work as expected?
 1. Gabriel C.
 February 22, 2011 at 5:53 AM
 
 Reply
 
 Yes, that’s the reason. Do you have any paid hosting account where you can make tests? You could try Hostgator or Godaddy for a couple of bucks/month. They are quite cheap, indeed.
 1. Rhodrey
 March 15, 2011 at 11:18 AM
 
 You’re a genius! I disabled the analytics code and the script worked perfectly. Thanks a whole lot.
uptraffic
February 15, 2011 at 8:44 PM

Reply

Hi,

i have done some improvement in code like after submitting it shows message “your mail send successfully” and fields to be empty.

Thanks
Nikolas
February 15, 2011 at 9:22 PM

Reply

Hi, great form, especially Premium.

But I’ve got one question. I sent test message for my mail and got the next text:

[chars here] just sent you a message through the contact form:

E-Mail: email
IP: [ip here]

Your Name: [chars here]
Your E-Mail: email
Your Subject: Technical Question
Your Message: [chars here]

So the problem is next. Russian letters came as [chars here].
Can I fix it and how?
Thank you.)
1. Gabriel C.
 February 16, 2011 at 12:00 PM
 
 Reply
 
 In common.php, find the line $acf_conf['mail_charset'] = 'iso-8859-2'; and replace iso-8859-2 with utf-8. Let me know how it works for you. It usually does for most of the people that want special characters in their mail message.
 
 PS: Your mail was initially marked as SPAM (perhaps due to the fact that you mentioned ‘xxx’ multiple times in the comment).
 1. nikolas
 February 18, 2011 at 4:30 AM
 
 Reply
 
 Thank you.)
 This helps, but partially.
 The same problem stay with verification fields (‘errors’ – acf_form_fields) and acf_form_notifications ( ‘security_code_e’, ‘security_code_i_e’, ‘correct_errors_e’ and so on) Норе for your help.)
 1. Gabriel C.
 February 22, 2011 at 5:46 AM
 
 Reply
 
 Make sure you set the right charset in the HTML page too. That’s important if you want to use Russian characters.
 
 Example:
 <meta http-equiv="content-type" content="text/html;charset=utf-8" />
 
 More information:
 http://webdesign.about.com/od/localization/l/blhtmlcodes-ru.htm
 1. nikolas
 February 22, 2011 at 8:50 AM
 
 Of course I set the right charset in the HTML page too.)
 In fact the problem only with jquery validation (when js disabled everything is ok.) I think that somewhere in json2 i just need change:
 “Letters”:{
 “regex”:”/^[a-zA-Z\ \']+$/”,
 }
 on
 “Letters”:{
 “regex”:”/^[a-zA-Zа-яА-Я' ]+$/”,
 }
 or something like this.
 But I can’t do it by myself, json2 minified.)
 2. Gabriel C.
 February 22, 2011 at 11:33 AM
 
 Reply
 
 Consider setting the utf-8 charset before the AJAX call in acf.init.php:
 
 <?php echo $acf_jquery_prefix; ?>$.ajaxSetup({ scriptCharset: "utf-8" , contentType: "application/json; charset=utf-8"});
 
 See the following URL for more information:
 
 http://stackoverflow.com/questions/26620/how-to-set-encoding-in-getjson-jquery
 
 If this problem will persist, I will do my best to find an effective solution for this problem with non-latin characters ;-)
 3. Gabriel C.
 February 22, 2011 at 11:36 AM
 
 Reply
 
 If the previous code won’t solve your problem, consider making the following change too:
 
 ADD header("Content-type: text/html; charset=utf-8"); in parse.php too (before any other line of code)
Dan
February 17, 2011 at 5:26 AM

Reply

Love the script but struggling to manipulate it into a 2 column version. Any advice?
1. Gabriel C.
  February 17, 2011 at 9:04 AM
  
  Reply
  
  Do you want to have half of the fields in the left side and the other half in the right side? In this case you need to edit contact-script.php and add CSS Floats: left & right. Are you familiar with HTML and CSS? Can you handle it? While looping through the form fields you need to stop at a specific field, close the first div (floating to left) then start the second div (floating to right). Make sure you use a final DIV with the style “clear:both;” ;-) I hope I was clear enough :D
  1. Dan
    March 1, 2011 at 4:38 AM
    
    Reply
    
    Hi Gabriel, Yeh thats exactly what I want to do. Im ok on css and html but the php not so much :-( At the moment I cant close a div at a specific point and then start another.
Rafael
February 19, 2011 at 8:38 PM

Reply

This is great, works good for me. Just one question though. Is there any way not to hide the form when the message was successfully sent?
1. Rafael
  February 22, 2011 at 5:05 AM
  
  Reply
  
  Any response so far?
  1. Gabriel C.
    February 22, 2011 at 5:44 AM
    
    Reply
    
    Find $acf_conf['hide_form_after_submit'] = true;
    
    Just set it to ‘false’ and it will work ;-)
    
    If you are talking about the free AJAX Contact Form then remove the $("#fields").hide(); line from the script.
Paul
February 24, 2011 at 12:31 AM

Reply

Is anyone having problems with receiving email to a Google Apps account that is using the new account infrastructure with the free or the paid version? (see here for more details – http://www.google.com/support/a/bin/answer.py?hlrm=en&answer=181873)

Even when all I do is change the email in the config.php or the common.php (depending on what version being used) it still doesn’t work.
1. Paul
  February 24, 2011 at 1:53 AM
  
  Reply
  
  To follow up on this. I’ve solved the problem.
  Please read – http://www.google.com/support/a/bin/answer.py?hl=en&answer=55299
2. Gabriel C.
  February 25, 2011 at 10:07 AM
  
  Reply
  
  I suggest you to try sending the mails through SMTP. It’s always better than the basic send mail method. Chances are also higher the message won’t end in the SPAM/Junk Folder.
Tony
February 24, 2011 at 2:04 PM

Reply

How can I add additional fields to be emailed, say a phone number? Thanks!
1. ChrisL
  February 28, 2011 at 4:50 PM
  
  Reply
  
  are you using the free or paid script? The paid one has very easy methods to add the fields you require.
2. Gabriel C.
  February 28, 2011 at 9:20 PM
  
  Reply
  
  Yes, for the paid one you just need to edit the $acf_form_fields array. You don’t even need any programming knowledge to do that.
  
  As for the free one, checkout the following comment: http://bit.ly/areryY
ChrisL
February 28, 2011 at 4:48 PM

Reply

working on getting the premium script form set up as an order form – problem i have at the moment is 2 copies of the messages are sent – i.e. 2 to person filling in form and 2 to me.
Any suggestions where I should look to correct this?
1. Gabriel C.
  February 28, 2011 at 9:25 PM
  
  Reply
  
  Have you managed to setup the Order Form without any problems? It’s interesting that about 5% of my customers are having this issue: getting 2 emails instead of one. At this percent, it’s very likely that they are having a problem with their hosting or they have changed the script in such a way that it sends the message twice. I remember I had this problem when I used the ajaxComplete(callback) Method but I removed it and the number of complaints dropped dramatically. Have you tested the same form (as you changed it) on another web hosting? Does it act the same? I am not sure why it submits the form twice. I never had this problem on my end. I am thinking of implementing some protection that only allows the form to be submitted once.
  1. ChrisL
    March 1, 2011 at 6:36 AM
    
    Reply
    
    Hi G Thx for the reply. Yes no problems setting up, added many fields and extra selects and check/radios all working well – tested after each mod but each time it sends 2 messages . I have noticed that it is not sending the content of the form to the person completing it, even though the setting is to do so.
    1. ChrisL
      March 1, 2011 at 9:18 AM
      
      Reply
      
      made some edits and am trying to get 2 fields to be parsed in parse.php but get errors:
      $acf_mail->FromName = $contact_firstname $contact_lastname; have tried () around variables with a comma between but still get errors. Any suggestions?
      1. Gabriel C.
        March 3, 2011 at 7:01 AM
        
        You should have a bit of PHP knowledge before editing parse.php. For instance you didn’t add the . for concatenation. Here’s how it should be:
        $acf_mail->FromName = $contact_firstname.' '.$contact_lastname;
        
        I assume that you already used the ‘contact_firstname’ and ‘contact_lastname’ keys in $acf_form_fields.
      2. ChrisL
        March 3, 2011 at 9:57 AM
        
        any ideas please – tried several with no success.
        Have a nearly finished example here
        Would prefer the T & C in a popup but so far not getting that to work.
      3. Gabriel C.
        March 3, 2011 at 10:06 AM
        
        Consider setting the margin for #acf_fields div.wrap label.in_field to 8px 5px 5px 6px! It’s better for aesthetics. Regarding the “Terms and Conditions”, you can google for “javascript new window” or load the contents inside a modal box. The latter is a more fancy approach. Checkout Fancybox.net (click “Inline – modal window”) to see how it works ;-)
        
        PS: The form looks nice, really! I am glad that web forms like this one can be created with my AJAX Form Builder tool!
      4. ChrisL
        March 3, 2011 at 12:41 PM
        
        Thanks
        “duh” :)
        Was looking at the line below for addreply to and thinking that format would work!
ChrisL
February 28, 2011 at 4:53 PM

Reply

see the contact form intrsruction at the top of this page for the free version – should be self-explanatory :)
Chin
March 3, 2011 at 8:54 AM

Reply

Hi ! I tested the premium version and have two concerns. I want to send you screenshot to explain my concern. I can’t attach file here. Where can I send it?

My two concerns are:
1. The error message that appears on top “Fix the error, resubmit the form” is not appropriate.. This error message should appear only OnSubmit. User has not even tried to submit the form yet, so that error message makes no sense.Let user “submit” and then show that error message.

Inline validation errors (fix email address, message should be more than 15 chars) are fine. They should appear as user types.

2. When the top error message appears (“fix and resubmit”), the form actually moves. Is it possible to have the form NOT move. Maybe you can leave some space on top so error messages can appear without moving the form position. Or maybe error messages can appear above submit button or on the side of submit button.

Thanks
1. ChrisL
  March 3, 2011 at 9:58 AM
  
  Reply
  
  chin – use a service like jing – you can then post the url of the screenshot :)
2. Gabriel C.
  March 3, 2011 at 10:01 AM
  
  Reply
  
  Chin, send me the screenshots to my e-mail address that can be found on the bottom of this page.
  
  1. That is the purpose of the real-time validation. If the user makes a mistake while filling the form, then it will see a message like “Fix the bottom errors”. This message is automatically removed once all the errors are gone. I never had any complaints regarding this functionality so far. I hope I was clear enough. Do you have any suggestions? I’d love to hear them.
  
  2. The form is designed that way: to move once errors show up. There are many forms out there that have the same behavior. However, your point is taken into consideration and I will think of implementing a new layout of the form that will show errors next to the fields and also the top errors without actually moving the form at all. I’ve worked hard on developing this script but I admit that it has its limitations. Taking into account that I offer a lifetime license for this AJAX Form Builder, I believe that the price is a lot cheaper (starting at 9 euros) than the ones that are charged monthly (such as $29/month) by other Online Form Builders (that don’t even offer AJAXified forms).
  
  PS: I am currently working on a new version of premium AJAX (Contact) Form. Some of the new features are: Load form inside Lightbox, Slider AJAX Form and Multiple AJAX Forms per page.
  1. Chin
    March 3, 2011 at 10:11 AM
    
    Reply
    
    Hi Gabriel:
    So, your email is support…? I thought you’d have an email like Gabriel@..
    
    Anyway, I have uploaded screenshot here:
    http://i51.tinypic.com/3508iz4.gif
    
    Basically, I agree with the error.
    I think the top error message should appear after user clicks on “submit” button.
    
    The error message should appear. That’s no problem. But only after I click on submit.
    
    Red colored error messages appear when I type. And that’s fine. That error should appear when I go to a field and do something incorrect. That’s fine.
    
    You’ve two errors:
    1. field level errors — and they are fine
    2. form level errors — they should appear after I click submit.
    
    This is just a suggestion. I hope you don’t mind.
    
    See screenshot.
    1. Chin
      March 3, 2011 at 11:17 AM
      
      Reply
      
      By the way, I am purchasing this script. I hope you can help with removing “form level error message” until I press submit.
      
      Field level error messages are OK as I type.
Chin
March 3, 2011 at 11:21 AM

Reply

I purchased. But used a different email id (ch…83…@hot..)

« older comments 1 … 3 4 5 6 7 newer comments »

* = required fields

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

Jared: http://www.haroldsmithbicycle.com/

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.

Kevin Morrison: NW Interactive Designs)

It's really not easy to write a homepage as a beginner but the contact form was to complicated for me! So I looked for a script but they never worked! I was frustrated! Then I was lucky and I found the script from Gabriel with a very simple and very nice design! The best is the suport from Gabriel! He saved me!

Yves: http://www.creation360.de

It's very great validation. I haven't problem with it. I was very busy web designer from Slovakia and my friends need it for his webpage. Your contact form is very clear, easy and like me.

Marián Baránek

I have tried many form scripts before and they were more hassle than making one yourself. This one did the trick, I have tried it out on my website using the lightbox feature and it was too easy. Really this form creator is amazing and expertly designed to look clean and smart. Check out my lightbox form on the website where I have 2 links to the same form on the page.

Alan @ http://www.museumofcommonsense.com/

Do you like the AJAX Form Generator or are you a happy customer? Spread the word by letting others know about it!