Write some Software

I need a unique identifier form for a referral program. The form will consist of 2 pages i.e. the user input page and the confirmation page as the attached wireframe illustrates. The user input page will accept user input with the following rules: [input field 1] First Name: Accept alphabets only [a-z][A-Z] [input field 2] Last Name: Accept alphabets only [a-z][A-Z] [input field 3] Email: Accept general email string [input field 4] City: Accept alphabets only [a-z][A-Z] [input field 5] Mobile: Accept integers only starting with or without '0' after country code prefix [0-9] [input field 6] How did you find us? [hidden input ] Counter: To loop count in seconds from 1 - 60. Capture integer on Get Code trigger Before submit, the user will then generate a unique ID (with the Get Code button) based on their input with the following rules: Array = [Prefix 'U'][FName 1st char][LName 1st char][Email 2nd char][Mobile 3rd int][Mobile 4th int][Counter int] E.g. John/Doe/jdoe21[at]hotm..io/London/07032091234/Twitter Generated ID String: UJDD0342 (last 2 digits means Get Code button was triggered at counter 42nd second) Display the generated ID and activate the submit button at this point. The confirmation page will: display the generated ID on a static image. display a download link for the merged image with ID Other requirements include: The form must be compatible with major browsers and mobile friendly All fields except 'How did you find us' are required No submit until all required fields filled and ID generated Embed ID on a downloadable image on confirmation page Languages: HTML, PHP, JS, jQuery or as appropriate Append prefix 'U' to generated ID always Unique ID: 8 max char hexdec string Char text fields to accept lower cases but display ID in upper cases only Comment your code appropriately After form submit, auto send email to user with Unique Referral ID Note: See the attached image for guidance Don't worry about styling Page 2 static image should be editable