Sorry in advance if this is a dumb question.
I’m a beginner coder and having trouble creating a newsletter signup similar to Smartwater or Monster Energy Drink. They have their sign-up located in the footer, and once you enter your information, it gives you a confirmation message without redirecting you to a different page. I am trying to emulate that design but am stuck with the Javascript and CSS transitions.
HTML:
<section class="footerForm" style="padding: 10px;" id="newsletterSignup">
<form action="welcome.php" method="post">
<fieldset>
<legend><h1 style="color:#443627;">Come Along!</h1>Sign Up to our newsletter to hear our latest updates, promotions, and more.</legend><br>
<label for="email">Email Address*</label><br>
<input type="email" name="email" id="email" required="required"><br>
<label for="dob">Date Of Birth*</label><br>
<select name="dob" size="1" required="required" id="month">
<option></option>
<option>January</option>
<option>Febuary</option>
<option>March</option>
<option>Abril</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>August</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select>
<select name="dob" size="1" required="required" id="day">
<option></option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
<select name="dob" size="1" required="required" id="year">
<option>2023</option>
<option>2022</option>
<option>2021</option>
<option>2020</option>
<option>2019</option>
<option>2018</option>
<option>2017</option>
<option>2016</option>
<option>2015</option>
<option>2014</option>
<option>2013</option>
<option>2012</option>
<option>2011</option>
<option>2010</option>
<option>2009</option>
<option>2008</option>
<option>2007</option>
<option>2006</option>
<option>2005</option>
<option>2004</option>
<option>2003</option>
<option>2002</option>
<option>2001</option>
<option>2000</option>
<option>1999</option>
<option>1998</option>
<option>1997</option>
<option>1996</option>
<option>1995</option>
<option>1994</option>
<option>1993</option>
<option>1992</option>
<option>1991</option>
<option>1990</option>
<option>1989</option>
<option>1988</option>
<option>1987</option>
<option>1986</option>
<option>1985</option>
<option>1984</option>
<option>1983</option>
<option>1982</option>
<option>1981</option>
<option>1980</option>
<option>1979</option>
<option>1978</option>
<option>1977</option>
<option>1976</option>
<option>1975</option>
<option>1974</option>
<option>1973</option>
<option>1972</option>
<option>1971</option>
<option>1970</option>
<option>1969</option>
<option>1968</option>
<option>1967</option>
<option>1966</option>
<option>1965</option>
<option>1964</option>
<option>1963</option>
<option>1962</option>
</select><br><br>
<label for="tos">I agree to the Terms of Use and Privacy Policy of AguaVida</label>
<input type="checkbox" id="tos" name="tos"> <br>
</fieldset>
<input type="button" value="Submit" class="button" id="newsletterButton">
</form>
<div class="confirmationNews">
<h3>You're all set! Wait for a confirmation email.</h3>
</div>
</section>
CSS:
@keyframes disappear{
from{
opacity: 100%;
display: block;
}
to{
opacity: 0%;
display:none;
}
}
@keyframes appear{
from{
opacity: 0%;
display:none;
}
to{
opacity: 100%;
display: flex;
}
}
So far this is what I have. I have tried removing the action of “welcome.php”, but it still attempts to redirect the user to a page that doesn’t exist. I am stuck creating an appropiate css animation or javascript file that can allow me to show a confirmation message without changing the page. I want to confirm that they signed up while they aren’t redirected to a different page (if that makes sense, my wording isn’t the best).
All the help is appreciated.