Create 4-step form with PHP/Mysql Backend
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Very simple.

Create a 4-step form with PHP / Mysql Backend, using Bootstrap and jquery-

Full specifications are here:
https://docs.google.com/document/d/1lJz4ED3uFj3eUAi07TgO9Mwv6gWmxBCqY7yDctKOWFE/edit#

They might look long, but if you see carefully, it is because all dropdown values are listed. The instructions are easy and fast to follow.

Please ensure to give a great presentation and give attention to all details.

Nice work on the solution! I wish I had this version when I applied for my Brazil visa! ;) (the one I used actually required IE on Windows!)
BSUK 21 days ago
awarded to gabrielsimoes

Crowdsource coding tasks.

1 Solution


EDIT: I have update the gist with all the features:

https://gist.github.com/gabrielsimoes/7e3fd91707e117c31f900cbdedcccfcb

You can find the database scheme under the sql file. The other files are the html (index.html), the css (form.css), the javascript part (form.js) and the php file which handles receiving the form (submit.php). By default images are stored in 'uploads/' folder. Each image receives its SHA1 as the filename.

There is a working example here (except for the database part):

https://afternoon-stream-86035.herokuapp.com/index.html

Fantastic. Thank you! I look forward to the rest of the code. Once done please post an online working version in addition to the git code. But from what I saw, it is looking great :)
georgefountain 25 days ago
Thank you! Great job. Small details: 1) can you please update the backgruond color white, changing it with one of the pastel colors from the color theme I provided? Same with the grey. Replace it with another color please. 2) Can you please add the final Submission confirmation page / step that should show after clicking on final submit button? Thanks!
georgefountain 24 days ago
This is what I am expecting from the color theme: https://imgur.com/a/C4c3j0C (see the background color is yellow pastel, fonts are brown and green..)
georgefountain 24 days ago
In addition please make these minor modifications: a) Make entryid primary key-: INT NOT NULL AUTOINCREMENT, the primary key b) Increase email field to 255 characters: email VARCHAR(255) NOT NULL, c) Have you checked if form submission works well for international charactesr? d) Can you please add a header at the top that says "Brasil Visa" and add an image slot for logo?
georgefountain 24 days ago
Also there are two broken images next to the images upload. Please remove them and ensure that the image preview shows only after the images are uploaded. Thank you so much!
georgefountain 24 days ago
Alright, I have made the requested changes. The page only wasn't showing up because the form submission wasn't being successful.
gabrielsimoes 24 days ago
The form works with international characters. If the web page looks strange, force cache reload with ctrl-f5.
gabrielsimoes 24 days ago
The prefill feature should be working as intended.
gabrielsimoes 24 days ago
Thank so much. Great job! Please review some of the correctionsl listed that are missing. Also check that the submit button is appearing on first step when it shouldn't. Thanks!
georgefountain 24 days ago
Also ensure that the header (with the logo) stays on every step, including Submit.
georgefountain 24 days ago
Also please center the whole thing, as it was before, and recheck on mobile if responsiveness is ok. Thank you so much!
georgefountain 24 days ago
Alright, done.
gabrielsimoes 24 days ago
I tested the prefill functionality with the following: ?firstname=John&lastname=Doe&passportNumber=123456&nationality=1&birthDate=2018-05-26&gender=2&bookingid=b123&passengerid=p345
gabrielsimoes 24 days ago
Fantastic! Final Submit button is not working. (edit) Actually it is working but no indication is shown. I suggest you show a loading gif while the post is being sent.
georgefountain 24 days ago
There is now a spinning animation after the button is clicked.
gabrielsimoes 24 days ago
Is there anything missing yet?
gabrielsimoes 23 days ago
Thanks Gabriel. It is looking fantastic! I have added additional corrections and specifications. The bounty is yours, but if you complete the following specs I will award you an additional $50 tip: https://docs.google.com/document/d/1jMB9-MLulHQ5qXsENwLWNS9vX6YuFnPPEWvtj5g6LYo/edit#
georgefountain 23 days ago
Alright, I'll implement these changes.
gabrielsimoes 23 days ago
Any updates?
georgefountain 20 days ago
I'm working on it. Do you prefer me to use a custom bootstrap css or override their css with the color changes?
gabrielsimoes 20 days ago
Also, are you sure you don't wan't japan to also be at the top?
gabrielsimoes 20 days ago
Nevermind about the bootstrap thing, I got the second option to work.
gabrielsimoes 20 days ago
ok! Add Japan too. About bootstrap, both choices are fine. Thanks!
georgefountain 20 days ago
I have implemented the crop modal. I modified some of the instructions to make sense. I'll proceed to implement the image conversion.
gabrielsimoes 19 days ago
Ok thanks for the update Gabriel. Let me know when there is a link to test. Thanks!
georgefountain 19 days ago
You can check the updates here: https://afternoon-stream-86035.herokuapp.com/
gabrielsimoes 19 days ago
Thanks so much! It is looking good. Regarding the logo at the top and page title "Visa application for guests" please have it centered. Thanks
georgefountain 19 days ago
I have decided to implement a plugin-free client-side image compression instead of using GD (reduces upload time if the user uploads large files). It worked great on my tests. Do you prefer the form to have labels on the left (as it is now), or labels above the input fields? I personally think the latter is better/more organized.
gabrielsimoes 18 days ago
Thank you for the creative solution! Client side seems to be working great and it was a great idea. Regarding labels on left or above, right now it looks nice; however, you could do a simple test for one page and show me and we can decide.
georgefountain 18 days ago
Please don't forget to center logo and header at the top. THanks!
georgefountain 18 days ago
Please don't forget to center logo and header at the top. THanks!
georgefountain 18 days ago
Regarding the Crop modal, please make it into a 2 step modal. The first should have only the instructions and next button, the second step should have just the crop. If not it is too much in just one modal. Thanks!
georgefountain 18 days ago
Regarding backgrounds: they look amazing! I saw also that you resized per screen size. Great job there. However, please ensure they change for every step. Step 1/2/3/4 should have different backgrounds. Just choose one for each and fix them. Thanks!
georgefountain 18 days ago
I suggest the following css changes for desktop: https://pastebin.com/aBnPYm3x. It will look like this: https://imgur.com/a/Tc7Ad78. Please make appropiate changes for mobile/tablet as my suggestion breaks mobile/tablet. Thanks!
georgefountain 18 days ago
Alright, I have implemented an equivalent CSS which I think suits both desktop/mobile. Take a look whether you want more/less space around the logo. Are you sure you don't want the backgrounds to show on mobile? The only thing left is to implement is JQuery form submission (with the new fields) and the PHP submission handling (SQL, pictures, etc...). I have updated the demo
gabrielsimoes 18 days ago
Thank you for such great work Gabriel. It is looking fantastic! a) Logo space is perfect! b) Backgrounds on mobile: go ahead and show them now that you have created a small background for each image. c) Preload background images: can you please preload the images so there is not loading "glitch" on background image when going to the next step?
georgefountain 18 days ago
d) Additional validation: "Monthly income in local currency " should be greater or equal to 250. On tooltip enter "Brazil Visa Administration requires that your monthly income is at least 250, even if you are a student."
georgefountain 18 days ago
e) Image size validation: 413x531 (width x height). Ensure that the crop tool does not let you crop less than that (if possible), and if the source image is less than that, it would be ideal to automatically resize it proportionally to meet any of those two limits. Thanks Gabriel. Again, amazing work!
georgefountain 18 days ago
f) "Is Minor Child" field should be removed. We already know if he is a child or not. g) United States and then Canada should be at the top (in that order) on all dropdows of country.
georgefountain 18 days ago
h) Justification letter must be a jpg or PDF upload.
georgefountain 18 days ago
1) Is it necessary to compress pdf files? 2) Which of the images should have the 413x531 restriction? Should the picture have an aspect ratio restriction?
gabrielsimoes 18 days ago
I just double checked the information on the visa site. 1) Justification letter should accept ONLY pdf. Restriction is 700kb max. There is a way to automatically reduce pdf file size if it is over this limit?
georgefountain 17 days ago
2) Image dimension restrictions ONLY apply to a) passport bio and b) photo. a) Passport bio has a minimum of 500x532.b) Photo has a minimum of 413x531. There are no restrictions on aspect ratio for the input image; however, the crop tool should force to an aspect ratio of a) Passport Bio: 1.41 (w/h) b) Photo: 0.778 (w/h) . This means that the crop tool should allow the user to move the crop tool and resize it, but NOT change the aspect ratio.
georgefountain 17 days ago
Check your email :)
georgefountain 17 days ago
I have implemented the aspect ratio (still gotta update the demo though). However, the 500x532 restriction does not follow the 1.41 aspect ratio, is that right? I don't know a practical way of compressing pdfs, sorry. Should the authorization letter only support pdfs too? I saw your email.
gabrielsimoes 17 days ago
Yes, 500x532 is the input file, it does not follow the restiction. But once you load it, the cropper works in the aspect ratios I provided. Omit compressing pdfs - I don't think it is possible. Yes, authorization letter should only support pdf - as original site. Thanks!
georgefountain 17 days ago
Alright, I think I have implemented all the features.
gabrielsimoes 17 days ago
Also, here are the GET parameters for the autofill: ?bookingid=b12&passengerid=p123&firstname=%E3%82%B3%E3%83%B3%E3%82%B5%E3%83%BC%E3%83%88%E3%81%AE%20%E3%81%AF%20%E3%81%A7%E3%81%97%E3%81%9F&lastname=%E6%98%A8%E5%A4%9C%20%E6%9C%80%E9%AB%98&passportNumber=123456&nationality=1&birthDate=2018-05-26&gender=2&streetaddress=ABC%20Street&city=Boston&country=4&state=362&zipcode=123123
gabrielsimoes 17 days ago
It is looking great! Regarding the image uploads I see that still the tooltips say "Only jpg/jpeg". That restriction has been removed and we are now converting the image to jpg automatically no matter the source type, correct? If that's correct, then please adjust the tooltip to all approved file image types. Thanks!
georgefountain 17 days ago
The formats are browser dependent. I think the only formats we can guarantee to be supported are jpeg/png/gif. I could put these file formats on the tooltip or a generic text like "Only images allowed".
gabrielsimoes 17 days ago
Ok great! Put jpg/jpeg/png/gif files are supported.
georgefountain 17 days ago
Ok, done!
gabrielsimoes 17 days ago
Excellent! What happens if the image is less than the minimum dimensions. Is it automatically upscaled for the crop? Is the rest all finished including backend? Thanks!
georgefountain 17 days ago
Excellent! What happens if the image is less than the minimum dimensions. Is it automatically upscaled for the crop? Is the rest all finished including backend? Thanks!
georgefountain 17 days ago
Regarding the sendmail. I suggest we replace it with PHPMailer: https://pastebin.com/J0TmFdsT . I believe PHPMailer is a good choice for being able to send a html / text message. What do you have in mind?
georgefountain 17 days ago
birthcertificatelocation VARCHAR(44) => file paths can get big and produce bugs. Change all file paths to 255 just in case.
georgefountain 17 days ago
The image is automatically upscaled. Backend seems finished, I have implemented verification for all input fields in the backend also. I don't have much experience with email backend in PHP, but I'll make the change. File paths should be limited to 44 chars, as filenames are generated from file SHA1 (40 for SHA1 + 4 for file extension), but I'll change it just in case of a future modification in the backend.
gabrielsimoes 17 days ago
I'll reply to you tomorrow morning.
gabrielsimoes 17 days ago
Thanks! Fantastic about the image upscaling. Have a good night I wait for tomorrow updates.
georgefountain 17 days ago
Alright, I have implemented PHPMailer (and tested it using my personal email account). Just don't forget to modify the parameters in submit.php to those of your company's email.
gabrielsimoes 16 days ago
Fantastic! Thanks so much. Did you ensure two emails are being sent? And did you create the text only version based on the html version using the plugin I provided? Shall I deploy the code and test it? (is it finished)? Thanks!
georgefountain 16 days ago
The two mails are sent. Company is at BCC, so that it can see who received the email, but the user doesn't see the company email. I have made an html version (which is the same as the review page + attachments) and text version as well. Code is finished and I have tested it.
gabrielsimoes 16 days ago
Please notice that you should configure the server or the uploads folder so that the users can't see it.
gabrielsimoes 16 days ago
That depends on the server software you're using on your server, not on the code I have written, as the folder should be configured as "not to be available publicly", or something like that.
gabrielsimoes 16 days ago
Gabriel what an amazing work you did. I am super happy. Please implement the "Final corrections" found at the end of this document: https://docs.google.com/document/d/1jMB9-MLulHQ5qXsENwLWNS9vX6YuFnPPEWvtj5g6LYo/edit#heading=h.kat108sewjsn
georgefountain 16 days ago
If email address is prefilled, should it be shown on the review page?
gabrielsimoes 16 days ago
Do you prefer me to hide the field or make it readonly? (like the phone number extension)
gabrielsimoes 16 days ago
If email address is prefilled, should it be shown on the review page? => YES. Do you prefer me to hide the field or make it readonly? (like the phone number extension) =>Hide field but show it on review page. Thanks so much!
georgefountain 16 days ago
Alright, I have pushed the changes.
gabrielsimoes 16 days ago
So, are we finished?
gabrielsimoes 13 days ago
Hi Gabriel! Yes.. seems like it. Give me some more time to finish checking everything and see if I find any minor things. Thanks a lot!
georgefountain 13 days ago
Gabriel sorry for the delay. I will get back to you on Monday. Thanks :)
georgefountain 8 days ago
Sure, no problem.
gabrielsimoes 6 days ago