In Progress

Wordpress: Single Page AJAX Form with jQuery Transitions

The work requested involves the creation of a database and a form that interacts with that database, all in the context of Wordpress. The form allows a visitor to fill in a number of details, and upon successful completion and submission, an email is generated and sent to a recipient. The user first identifies the particular occasion, i.e., they specify a holiday that they are celebrating. The selection of the holiday causes a query of the database, and corresponding backgrounds and poems are pulled and placed in front of the user for selection. The user is then able to select one of the backgrounds and poems that correspond to that occasion, fill in their name and email address, fill in the name and email address of a recipient, and enter a message. The user may also select whether the email should be sent anonymously. A button allows the user to see a preview of the email in a popup window. The user then clicks the checkbox that confirms that they agree to the terms and conditions, fills in a reCaptcha, and submits. An email is then generated and sent out using the Wordpress wp_mail() function.

The form should give the user the option of selecting no background, and no poem. Further, if there are no backgrounds or poems associated with the particular occasion, the form should not show those options at all. Additionally, only four (4) backgrounds and four (4) poems should be displayed at a time, and there should be functionality that allows the user to scroll through the various other options that are not immediately visible. The backgrounds will be presented in the form of thumbnails, while the poems are presented just by their title. Rolling over the title of a poem should allow the user to see the whole text of the poem in a bubble.

The whole form should make use of jquery and AJAX for updating, transitions, and validation. Accordingly, the page should never reload throughout the whole process. Backgrounds and poems should appear via a fade in and fading transition as the user clicks on the different available occasions, being drawn dynamically from the database. When the page loads initially, no occasion should be preselected. Rather, once the user clicks on an occasion, the various other options are inserted via sliding and fading transitions. Immediately before the email is sent, all of the information that the user entered should be committed to a user table in the database, with an associated unique identifier that allows for future retrieval of the data associated with the email (so that the email recipient may have a link that can be clicked that will show the email on the website itself). The sender and recipient names and email fields are required, and should be validated instantly when the field is filled in (whereby a red X beside the field changes to a green ‘check mark’ when the information is filled in correctly). The message field is optional. The terms and conditions should be checked, and this is also validated instantly.

The reCaptcha should be verified before the email is sent. If it is not correct, the user should be notified under the submit button, as well as next to the reCaptcha itself. If the user has not filled in other required information, there is a notification near the submit button, and near the fields that must be corrected. When everything is correctly submitted, they user is notified that the email was sent via a message near the submit button. The submit button that this point remains disabled and greyed out so that the user does not accidentally send another email. A link is displayed near the success notification that will reload the webpage to allow the sending of another email.

*Special note: The sender’s name and email fields must also be verified to not be spam via akismet. If akismet sees spam here, the user is notified simply that there was an error in sending the email, and that the administrator should be contacted.

Refer to the attached specification for further details.

Skills: AJAX, Javascript, MySQL, PHP, WordPress

See more: ajax wordpress single page, wordpress single page fading transitions, wordpress website creation of 0, wordpress preview, the future of wordpress, submission page, spam button, red point, preview on a wordpress website, note page, name validation in javascript, message scroll, mark may, mark fields, wordpress ajax single, wordpress transitions ajax, ajax wordpress single popup, successful names, reload page jquery, jquery reload page, i agree to the terms and conditions, wordpress x, wordpress error, WORDPRESS ADMINISTRATOR, red-x

About the Employer:
( 1 review ) Savoy, United States

Project ID: #1370442

Awarded to:


I am an experienced web developer. I have an experience of over 7 years as a developer for a major european company and I have a degree in Web Development after graduating Computer Science Faculty and other programming More

$200 USD in 2 days
(13 Reviews)

5 freelancers are bidding on average $148 for this job


Hi, Please check the PMB for details. Thanks

$150 USD in 7 days
(2 Reviews)

I have Good experience in wordpress and Jquery,ajax. Can provide all you need. Contact for details.

$140 USD in 4 days
(0 Reviews)

Jquery Expert

$150 USD in 5 days
(0 Reviews)

Hello, I am very interested in your project and have worked extensively with jQuery and PHP. I've read all the features you would like and I will make sure the form looks and functions exactly as you want it. Than More

$100 USD in 5 days
(0 Reviews)