Skip to content

Commit fd077c1

Browse files
RadiantSolarSolutionsRadiantSolarSolutions
authored
Add files via upload
1 parent eac41de commit fd077c1

File tree

2 files changed

+142
-60
lines changed

2 files changed

+142
-60
lines changed

‎index.html

+78-44
Original file line numberDiff line numberDiff line change
@@ -23,84 +23,105 @@ <h2>Get A Free Quote Today!</h2>
2323
<!-- Required Fields -->
2424
<div class="form-row">
2525
<div class="form-group">
26-
<label for="name">Full Name:</label>
26+
<label for="name">Full Name*</label>
2727
<input type="text" id="name" name="name" required>
2828
</div>
2929
<div class="form-group">
30-
<label for="phone">Phone Number:</label>
30+
<label for="phone">Phone Number*</label>
3131
<input type="tel" id="phone" name="phone" required>
3232
</div>
3333
</div>
3434

3535
<div class="form-row">
3636
<div class="form-group">
37-
<label for="email">Email:</label>
37+
<label for="address">Address*</label>
38+
<input type="text" id="address" name="address" required>
39+
</div>
40+
<div class="form-group">
41+
<label for="email">Email*</label>
3842
<input type="email" id="email" name="email" required>
3943
</div>
44+
</div>
45+
46+
<div class="form-row">
4047
<div class="form-group">
41-
<label for="zip">Zip Code:</label>
48+
<label for="zip">Zip Code*</label>
4249
<input type="text" id="zip" name="zip" required>
4350
</div>
4451
</div>
4552

46-
<div class="form-group">
47-
<label for="description" class="textarea-label">*Additional Information:</label>
48-
<textarea id="description" name="description" rows="4" cols="50" required></textarea>
49-
</div>
53+
<!-- Optional Fields Toggle Button -->
54+
<button type="button" id="toggle-optional-fields">Want to speed up the process? Tell us more by clicking here!</button>
5055

5156
<!-- Optional Fields -->
52-
<div class="form-row">
53-
<div class="form-group">
54-
<label for="system">System Model:</label>
55-
<select id="system" name="system">
56-
<option value="">Select System Model</option>
57-
<option value="System1">System 1</option>
58-
<option value="System2">System 2</option>
59-
<option value="System3">System 3</option>
60-
<option value="OTHER">OTHER (Specify)</option>
61-
</select>
62-
</div>
63-
<div id="other-system" class="form-group" style="display: none;">
64-
<label for="otherSystemInput">Specify Other System:</label>
65-
<input type="text" id="otherSystemInput" name="otherSystemInput">
57+
<div id="optional-fields" style="display: none;">
58+
59+
<div class="form-row">
60+
<div class="form-group">
61+
<label for="arrays">Number of Solar Arrays</label>
62+
<input type="number" id="arrays" name="arrays">
63+
</div>
64+
<div class="form-group">
65+
<label for="stories">Number of Stories</label>
66+
<input type="number" id="stories" name="stories">
67+
</div>
6668
</div>
67-
</div>
6869

69-
<div class="form-row">
70-
<div class="form-group">
71-
<label for="arrays">Number of Solar Arrays:</label>
72-
<input type="number" id="arrays" name="arrays">
70+
<div class="form-row">
71+
72+
73+
<div class="form-group">
74+
<label for="description" class="textarea-label">Additional Information</label>
75+
<textarea id="description" name="description" rows="1" cols="50"></textarea>
76+
</div>
77+
78+
<div class="form-group">
79+
<label for="system">System Model</label>
80+
<select id="system" name="system">
81+
<option value="">Select System Model</option>
82+
<option value="System1">System 1</option>
83+
<option value="System2">System 2</option>
84+
<option value="System3">System 3</option>
85+
<option value="OTHER">Other (Specify)</option>
86+
</select>
87+
</div>
88+
7389
</div>
74-
<div class="form-group">
75-
<label for="stories">Number of Stories:</label>
76-
<input type="number" id="stories" name="stories">
90+
91+
<div id="other-system" class="form-row" style="display: none;">
92+
<label for="otherSystem">Specify Other System</label>
93+
<input type="text" id="otherSystem" name="otherSystem">
7794
</div>
95+
96+
7897
</div>
7998

8099
<!-- Spam Protection -->
81100
<input type="text" name="_gotcha" style="display:none">
82101

83102
<!-- Submit Button -->
84-
<input type="submit" value="Send">
103+
<input type="submit" value="Submit">
85104
</form>
86105
</section>
87106

88107
<!-- Image and Text Description Section -->
89-
<section class="image-text-section">
90-
<div class="image-text-container left">
91-
<img src="images/image1.jpg" alt="Image 1">
108+
<section class="image-section">
109+
<div class="image-container">
110+
<img src="images/image1.png" alt="Image 1">
111+
<img src="images/image2.png" alt="Image 2">
92112
</div>
93-
94-
<div class="image-text-container right">
95-
<img src="images/image2.jpg" alt="Image 2">
113+
<div class="image-container">
114+
<img src="images/image3.png" alt="Image 3">
115+
<img src="images/image4.png" alt="Image 4">
96116
</div>
97-
98-
<div class="image-text-container left">
99-
<img src="images/image3.jpg" alt="Image 3">
117+
<div class="image-container">
118+
<img src="images/image5.png" alt="Image 5">
119+
<img src="images/image6.png" alt="Image 6">
100120
</div>
101121
</section>
102122

103-
<!-- JavaScript for Form Submission Handling and OTHER System Input Toggle -->
123+
124+
<!-- JavaScript for Form Submission Handling and Optional Fields Toggle -->
104125
<script>
105126
document.getElementById('quote-form').addEventListener('submit', function(event) {
106127
event.preventDefault(); // Prevent default form submission
@@ -113,6 +134,7 @@ <h2>Get A Free Quote Today!</h2>
113134
if (response.ok) {
114135
alert('SUCCESS! Your quote request has been sent.');
115136
this.reset();
137+
document.getElementById('optional-fields').style.display = 'none'; // Hide optional fields after form reset
116138
document.getElementById('other-system').style.display = 'none'; // Hide OTHER input after form reset
117139
} else {
118140
alert('FAILED... Please try again later.');
@@ -124,11 +146,23 @@ <h2>Get A Free Quote Today!</h2>
124146

125147
// JavaScript to toggle "Specify Other System" input
126148
document.getElementById('system').addEventListener('change', function() {
127-
const otherSystemInput = document.getElementById('other-system');
149+
const otherSystem = document.getElementById('other-system');
128150
if (this.value === 'OTHER') {
129-
otherSystemInput.style.display = 'block';
151+
otherSystem.style.display = 'block';
152+
} else {
153+
otherSystem.style.display = 'none';
154+
}
155+
});
156+
157+
// JavaScript to toggle optional fields visibility
158+
document.getElementById('toggle-optional-fields').addEventListener('click', function() {
159+
const optionalFields = document.getElementById('optional-fields');
160+
if (optionalFields.style.display === 'none') {
161+
optionalFields.style.display = 'block';
162+
this.textContent = 'The below fields are not required. Click here to hide them!';
130163
} else {
131-
otherSystemInput.style.display = 'none';
164+
optionalFields.style.display = 'none';
165+
this.textContent = 'Want to speed up the process? Tell us more by clicking here!';
132166
}
133167
});
134168
</script>

‎styles.css

+64-16
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,10 @@ body {
3030

3131
/* Quote Form */
3232
#quote-form-section {
33-
padding: 36px 18px; /* Padding */
33+
padding: 4px 18px; /* Padding */
3434
background-color: #2e3850; /* Background color */
3535
color: white;
36+
font-size: 32px;
3637
}
3738

3839
#quote-form {
@@ -53,15 +54,39 @@ body {
5354

5455
#quote-form label {
5556
display: block;
56-
margin-bottom: 5px; /* Margin */
57-
font-size: 24px; /* Font size */
57+
margin-bottom: 0px; /* Margin */
58+
font-size: 18px; /* Font size */
5859
color: white;
5960
}
6061

61-
#quote-form input[type="text"],
62-
#quote-form input[type="email"],
62+
#quote-form input[type="text"] {
63+
font-size: 18px;
64+
padding: 8px;
65+
}
66+
67+
#quote-form input[type="email"] {
68+
font-size: 18px;
69+
padding: 8px;
70+
}
71+
72+
#quote-form input[type="tel"] {
73+
font-size: 18px;
74+
padding: 8px;
75+
}
76+
77+
#quote-form input[type="number"] {
78+
font-size: 18px;
79+
padding: 8px;
80+
}
81+
82+
#quote-form input[type="address"] {
83+
font-size: 18px;
84+
padding: 8px;
85+
}
86+
87+
/* #quote-form input[type="email"],
6388
#quote-form input[type="tel"],
64-
#quote-form input[type="number"],
89+
#quote-form input[type="number"], */
6590
#quote-form select,
6691
#quote-form textarea {
6792
width: 100%; /* Width */
@@ -81,35 +106,40 @@ body {
81106
width: 100%; /* Width */
82107
padding: 20px; /* Padding */
83108
background-color: #007BFF;
109+
/* background-color: #007BFF; */
84110
color: #fff;
85111
border: none;
86112
border-radius: 4.5px; /* Border radius */
87-
font-size: 18px; /* Font size */
113+
font-size: 24px; /* Font size */
88114
cursor: pointer;
115+
margin-bottom: 48px; /* Margin */
116+
font-family: 'Corbel', sans-serif;
89117
}
90118

91119
#quote-form input[type="submit"]:hover {
92120
background-color: #0056b3;
93121
}
94122

95-
/* Image and Text Description Section */
96-
.image-text-section {
123+
124+
/* Image Section */
125+
.image-section {
97126
padding: 18px; /* Padding */
127+
text-align: center;
98128
}
99129

100-
.image-text-container {
101-
margin: 18px auto; /* Margin */
102-
padding: 9px 0; /* Padding */
130+
.image-container {
103131
display: flex;
104-
align-items: center;
105132
justify-content: center;
133+
margin-bottom: 18px; /* Space between rows */
106134
}
107135

108-
.image-text-container img {
109-
width: 906.66px; /* Width */
110-
height: 388.8px; /* Height */
136+
.image-container img {
137+
width: 540px; /* Adjust width as needed */
138+
height: 540px; /* Adjust height as needed */
139+
margin: 0 9px; /* Space between images */
111140
}
112141

142+
113143
/* Adjust for left and right alignment */
114144
.image-text-container.left {
115145
flex-direction: row;
@@ -120,3 +150,21 @@ body {
120150
flex-direction: row-reverse;
121151
margin-left: 400px;
122152
}
153+
154+
/* Optional Fields Toggle Button */
155+
#toggle-optional-fields {
156+
display: block;
157+
margin: 20px auto;
158+
padding: 10px;
159+
background-color: #cfcfcf;
160+
color: #000000;
161+
border: none;
162+
border-radius: 4.5px; /* Border radius */
163+
font-size: 18px; /* Font size */
164+
cursor: pointer;
165+
}
166+
167+
#toggle-optional-fields:hover {
168+
background-color: #cfcfcf;
169+
}
170+

0 commit comments

Comments
 (0)