admin—
Project Description: Enhancing Solar Quote Website Functionality
Overview:
The goal of this project is to design and build a solar website with quoting abilities, ensuring a seamless user experience from form submission to detailed quote presentation. The website will incorporate interactive elements, dynamic content retrieval, and an intuitive user interface to facilitate the process of obtaining solar energy quotes. The core functionality includes form submission, data retrieval, dynamic content display, and a loading animation sequence.
Key Functionalities:
1. Form Submission and Data Handling:
– **Form Fields:** The home page form collects user details such as address, email, average power bill, and homeowner questions.
– **UUID Assignment:** A unique UUID is generated for each session to track user submissions and ensure data consistency.
– **Data Storage:** User data is stored in a CMS database (QuoteFormFill) upon form submission.
– **Error Handling:** The form submission process should handle errors gracefully and inform the user if the data submission fails.
2. Loading Page Animation:
– **Progress Bar Animation:** A progress bar displays a sequence of updates indicating the stages of data processing:
– Gathering all government incentives (33%)
– Putting the final touches on the design (66%)
– Numbers are ready (100%)
– **Redirection:** After the loading animation completes, the user is redirected to the quote section.
3. Dynamic Content Display on Quote Page:
– **Data Retrieval:** Upon loading the quote page, the system fetches user data from the CMS and additional data from external APIs (e.g., Google Geocoding API, Google Solar API).
– **Data Display:** Display the following dynamically retrieved information:
– Address
– Email
– Average power bill
– Solar potential data
– Number of panels needed
– System size in kW
– Total energy production in kWh
– Satellite image of the property
4. Toggle Switch Functionality:
– **Toggle Visibility:** A toggle switch controls the visibility of an additional information container (`#box23`).
– **Initial State:** The container is hidden initially and displayed when the toggle switch is turned on.
5. Scrolling and Anchors:
– **Smooth Scrolling:** Implement smooth scrolling to specific sections (anchors) on the page upon certain triggers, such as form submission.
– **Anchors:** The page will scroll to the loading section after form submission and then to the quote section after the loading animation completes.
6. Error Handling and User Feedback:
– **Error Messages:** Provide user-friendly error messages if data retrieval or form submission fails.
– **Loading Indicators:** Display loading indicators during data retrieval processes to inform the user of ongoing operations.
Detailed Requirements:
1. **Form Submission Process:**
– On form submission, generate a UUID for the session.
– Store the form data in the CMS database (QuoteFormFill) with the UUID.
– Handle errors and display appropriate messages if the submission fails.
2. **Loading Animation:**
– Hide the loading anchor initially.
– Show the loading anchor and scroll to it upon form submission.
– Run the progress bar animation sequence.
– Redirect to the quote section after the animation completes.
3. **Data Retrieval and Display:**
– Fetch user data from the CMS using the UUID.
– Fetch geocoding data and solar potential data using external APIs.
– Display the retrieved data in designated input fields and text elements.
– Calculate and display the number of panels needed, system size in kW, and total energy production in kWh.
– Fetch and display a satellite image of the property.
4. **Toggle Switch Functionality:**
– Hide the additional information container (`#box23`) initially.
– Display or hide the container based on the state of the toggle switch.
Hourly Range: $15.00-$30.00
Posted On: August 08, 2024 21:19 UTC
Category: Web Design
Skills:Custom Web Design, Web Development, Wix, Web Design, HTML, JavaScript, Website, Graphic Design
Country: United States
click to apply
Powered by WPeMatico
