Wordpress: Single Page AJAX Form with jQuery Transitions
This project was awarded to websolutions2ffa for $200 USD.Get free quotes for a project like this
Project Budget$30 - $250 USD
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.
Looking to make some money?
- Set your budget and the timeframe
- Outline your proposal
- Get paid for your work
Hire Freelancers who also bid on this project
Looking for work?
Work on projects like this and make money from home!Sign Up Now
- The New York Times
- Wall Street Journal
- Times Online