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 5 months 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 5 months 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 5 months 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 5 months 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 5 months 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 5 months ago
Alright, I have made the requested changes. The page only wasn't showing up because the form submission wasn't being successful.
gabrielsimoes 5 months ago
The form works with international characters. If the web page looks strange, force cache reload with ctrl-f5.
gabrielsimoes 5 months ago
The prefill feature should be working as intended.
gabrielsimoes 5 months 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 5 months ago
Also ensure that the header (with the logo) stays on every step, including Submit.
georgefountain 5 months ago
Also please center the whole thing, as it was before, and recheck on mobile if responsiveness is ok. Thank you so much!
georgefountain 5 months ago
Alright, done.
gabrielsimoes 5 months 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 5 months 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 5 months ago
There is now a spinning animation after the button is clicked.
gabrielsimoes 5 months ago
Is there anything missing yet?
gabrielsimoes 5 months 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 5 months ago
Alright, I'll implement these changes.
gabrielsimoes 5 months ago
Any updates?
georgefountain 5 months 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 5 months ago
Also, are you sure you don't wan't japan to also be at the top?
gabrielsimoes 5 months ago
Nevermind about the bootstrap thing, I got the second option to work.
gabrielsimoes 5 months ago
ok! Add Japan too. About bootstrap, both choices are fine. Thanks!
georgefountain 5 months 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 5 months ago
Ok thanks for the update Gabriel. Let me know when there is a link to test. Thanks!
georgefountain 5 months ago
You can check the updates here: https://afternoon-stream-86035.herokuapp.com/
gabrielsimoes 5 months 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 5 months 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 5 months 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 5 months ago
Please don't forget to center logo and header at the top. THanks!
georgefountain 5 months ago
Please don't forget to center logo and header at the top. THanks!
georgefountain 5 months 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 5 months 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 5 months 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 5 months 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 5 months 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 5 months 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 5 months 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 5 months 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 5 months ago
h) Justification letter must be a jpg or PDF upload.
georgefountain 5 months 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 5 months 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 5 months 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 5 months ago
Check your email :)
georgefountain 5 months 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 5 months 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 5 months ago
Alright, I think I have implemented all the features.
gabrielsimoes 5 months 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 5 months 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 5 months 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 5 months ago
Ok great! Put jpg/jpeg/png/gif files are supported.
georgefountain 5 months ago
Ok, done!
gabrielsimoes 5 months 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 5 months 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 5 months 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 5 months ago
birthcertificatelocation VARCHAR(44) => file paths can get big and produce bugs. Change all file paths to 255 just in case.
georgefountain 5 months 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 5 months ago
I'll reply to you tomorrow morning.
gabrielsimoes 5 months ago
Thanks! Fantastic about the image upscaling. Have a good night I wait for tomorrow updates.
georgefountain 5 months 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 5 months 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 5 months 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 5 months ago
Please notice that you should configure the server or the uploads folder so that the users can't see it.
gabrielsimoes 5 months 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 5 months 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 5 months ago
If email address is prefilled, should it be shown on the review page?
gabrielsimoes 5 months ago
Do you prefer me to hide the field or make it readonly? (like the phone number extension)
gabrielsimoes 5 months 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 5 months ago
Alright, I have pushed the changes.
gabrielsimoes 5 months ago
So, are we finished?
gabrielsimoes 5 months 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 5 months ago
Gabriel sorry for the delay. I will get back to you on Monday. Thanks :)
georgefountain 4 months ago
Sure, no problem.
gabrielsimoes 4 months ago