CSS / HTML Advanced Form Behaviour
Budget: $15 – $25 AUD
Our goal is to enhance the user experience of our HTML/CSS checkout form by optimizing the visibility of labels and placeholder text.
Specifically, we aim to make labels invisible while ensuring that the placeholder text remains visible (by appearing/moving up to the top left hand corner of the form element) when users edit and complete the form. The solution must work for both input and text areas.
We also want to retain error messaging functionality for cases where values are missing upon form submission.
This desired behaviour is currently demonstrated in the standard Shopify checkout experience, and a similar code to https://codepen.io/czaras/pen/zYOqqR, and we seek a similar solution for our checkout at http://square.enfdev.com.
Notably, we use Bootstrap v3.3.5 and jQuery v1.10.2 and wish to maintain these versions.
Our ideal solution allows for easy integration into existing code for each form element, considering the substantial hidden logic within our checkout process. Moreover, we want the flexibility to control styles and CSS, enabling seamless customization for different visual sites.
The proposed solution must be compatible with all modern browsers on both desktop and mobile devices. To begin, you are required to provide a proof-of-concept code for validation on our server (server access cannot be provided). Subsequently, we will collaborate for real-time testing and implementation, with the potential for ongoing collaboration and further assistance.
This project offers the prospect of continued collaboration between us.
The project requires someone who can work with an existing design and specific requirements that I have provided. The timeline for this project is immediate, so I need someone who can start right away.
If you have the skills and experience needed for this project, please submit your proposal. Thank you.
Specifically, we aim to make labels invisible while ensuring that the placeholder text remains visible (by appearing/moving up to the top left hand corner of the form element) when users edit and complete the form. The solution must work for both input and text areas.
We also want to retain error messaging functionality for cases where values are missing upon form submission.
This desired behaviour is currently demonstrated in the standard Shopify checkout experience, and a similar code to https://codepen.io/czaras/pen/zYOqqR, and we seek a similar solution for our checkout at http://square.enfdev.com.
Notably, we use Bootstrap v3.3.5 and jQuery v1.10.2 and wish to maintain these versions.
Our ideal solution allows for easy integration into existing code for each form element, considering the substantial hidden logic within our checkout process. Moreover, we want the flexibility to control styles and CSS, enabling seamless customization for different visual sites.
The proposed solution must be compatible with all modern browsers on both desktop and mobile devices. To begin, you are required to provide a proof-of-concept code for validation on our server (server access cannot be provided). Subsequently, we will collaborate for real-time testing and implementation, with the potential for ongoing collaboration and further assistance.
This project offers the prospect of continued collaboration between us.
The project requires someone who can work with an existing design and specific requirements that I have provided. The timeline for this project is immediate, so I need someone who can start right away.
If you have the skills and experience needed for this project, please submit your proposal. Thank you.