Collecting data and information through custom forms.
Required Knowledge & Skills
- Forms development with JotForm
- Custom HTML5 forms
Part 1. BoatVentures (35 Points)
The BoatVentures website development is progressing. However, the SquareUp booking module is not working as well as Chris hoped and he would like to switch to a simpler reservations form where he can collect more information about the charter request. He has asked you to create a form using JotForm that looks as follows:
You will need to create a free account on JotForm and then create a form as defined above. Next, embed the form using an <iframe> into your existing Weebly Reservations page after removing the SquareUp module. You can get the entire <iframe> code fragment by going to the Publish section on JotForm.
- after submitting the form, a custom message must appear
- the form must not allow fewer than 1 and more than 12 charter guests; use a Number field for that
- an email must be sent to yourself when the form is submitted; here's what that email must look like (note the custom email subject header and reply-to email)
- the form must use the theme "Nova Theme" or similar; any theme is fine as long as it blends reasonably well with your Weebly theme
- the email field is of type "email" and not text
Part 2. Boat Brokerage (65 Points)
Chris' friend has contacted you to develop a form that allows people interested in buying a boat to contact him. In particular, he wants you to develop a form (using HTML5 and not a forms builder) that is based on the mockup below. Add the form to a new page in your AwardSapce web site that you created in a previous assignment and add the new page to your menu bar as another choice.
- the email must be entered through an e-mail field type
- turn on autocomplete for input fields
- when the page loads the focus should be on the first field of the form, i.e. the cursor should be in the first field of the form without the user having to click on it
- the form must be submitted through the forms processor "processRequest.php" on the web site boatventures.getenjoyment.net using the POST method -- we built that forms processor in PHP, you do not need to build it, just "call" it -- you need to build the correct absolute URL starting with http:// given this information and use that for the ACTION and METHOD attributes in the <form> tag; this PHP program has already been written -- you do NOT have to build it -- just figure out how to call it as the response to your form submission
- the name and email field must use placeholders and are required fields; the form should not be processed without those fields filled in
- the fields must have the following names so that the forms processor picks them up correctly: name (name), e-mail (email), preferred boat (boat), price range (price)
- the subject for the email message should be "Website Request" and must be sent to the forms processor in a hidden field with the name "subject" in the form (input type="hidden")
- your own email address must be in a hidden field with the name "senderEmail"; the forms processor expects this and will send the email to that address
- You can test if it works by seeing if you get an email (you will need to submit a copy of a received email as proof)
- This part is going to be done in AwardSpace. You can add the form page you create to the existing website you have created.
- the form does not send an email; it only packages the values of the fields and sends them to a PHP program -- the PHP program has been programmed to send an email to you with the field values as part of the body of the email
- are your fields spelled correctly? upper case and lower case matters
- did you spell the PHP program correctly? upper and lower case matters
- do you have hidden fields with the correct name?
- is your email address correct?
- did your email end up in your spam folder?
- did you close your form with a </form> tag?
- do you have by mistake two (or more) <form> tags?
- make sure that all of your form fields are within the <form> and </form> tags, i.e. within the form; any fields outside the form will not be submitted to the forms processor
- are you using a form submit button: <input type="submit" ...>; a simple <button> will NOT work
- small companies often use email processors like these but larger companies would put orders and requests into a database; PHP can do that as well but it's not necessary for us
- it is common for one person to create the front end HTML code and a programmer to develop the back-end PHP (or Zoho or ASP) code; the two programmers simply need to agree on field names to establish an interface
- did you specify the NAME attributes in the <input> fields correctly?
What to Submit
Submit your URL to your Weebly BoatVentures website and the URL to your AwardSpace Brokerage website through Blackboard. In addition, you must submit a screen shot of an email you received for BOTH questions.