rishipurwar1 / iframe-form

Netomi Iframe Form

Functionality

✅ Form is loaded in the iframe.
✅ The form has fields like Name, Email address, DOB, Contact number, Country and State.
✅ Users can see countries list in a drop down menu.(Countries list is pre-populated via an API call.)
✅ If a country is selected, only the states of the selected country will be populated in the state dropdown menu.
✅ Added these validations in the form fields:

• Name: Length should be between 4-10 characters.
• Email address: should only support valid email address
• Contact number: mobile number should be of 10 digits.
• Country, State, Name are mandatory fields.

✅ If all fields are valid, show the success message “All fields are valid” on the parent window or the error message.

👨‍💻 Demo

Try out the website : Netomi Iframe Form

👨‍🔧 Tech Stack

🛠️ Installation Steps

1. Fork this repository.
2. Clone your forked copy of the project.
3. Create a .env file at the root of the project folder and add the following environment variables:

REACT_APP_COUNTRY_API_URL=https://raw.githubusercontent.com/stefanbinder/countries-states/master/countries.json

4. Install dependencies using npm install command.
5. Run the app using npm start command.