Hello everybody,
Could you please help me, I am unable to resolve this issue.
I configured a catch type webhook with this html and css.
I don't understand why, when someone fills out the form, zapier activates twice instead of once.
Here is a screenshot.
Does anyone have a solution to avoid this?
Thank you all, I wish you an excellent holiday season.
CSS
#msform {
width: 300px;
padding-bottom: 1%;
margin-top: 20px;
text-align: center;
position: relative;
}
#msform fieldset {
border: 0 none;
border-radius: 3px;
box-sizing: border-box;
width: 100%;
/*stacking fieldsets above each other*/
position: absolute;
}
legend {
font-size: 15px;
text-align: center;
margin: auto;
}e
/*Hide all except first fieldset*/
#msform fieldset:not(:first-of-type) {
display: none;
}
/*inputs*/
.questioninputs {
display: flex;
justify-content: space-between
}
.input-container {
position: relative;
height: 40px;
width: auto;
margin: 0.5rem;
}
.radio-button {
opacity: 0;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
margin: 0;
cursor: pointer;
}
.radio-tile {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
border: 2px solid #1E9CD7;
border-radius: 5px;
padding: 1rem;
transition: transform 300ms ease;
}
.radio-tile-label {
text-align: center;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
color: #1E9CD7;
}
.radio-button:checked + .radio-tile {
background-color: #37C224;
border: 2px solid #37C224;
color: white;
transform: scale(1.1, 1.1);
}
.radio-button:checked + .radio-tile label.radio-tile-label {
color: white;
}
#msform input.txtinput, #msform textarea {
padding: 15px;
border: 1px solid #af9800;
border-radius: 20px;
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
font-family: montserrat-bold;
color: black;
background-color: #FFFFFF;
font-size: 14px;
}
/*buttons*/
#msform .action-button {
width: fit-content;
background: linear-gradient(165deg, #eca763, #de9d5d, #d09357, #c38a51, #b5804c, #a87746, #9b6d40, #8e643b);;
font-weight: 600;
color: white;
border: 0 none;
border-radius: 10px;
cursor: pointer;
padding: 10px 30px;
margin: 10px 5px;
}
#msform .action-button:hover, #msform .action-button:focus {
box-shadow: 0 0 0 2px white, 0 0 0 3px #af9800;
}
/*headings*/
.fs-title {
font-size: 15px;
text-transform: uppercase;
color: #2C3E50;
margin-bottom: 10px;
}
.fs-subtitle {
font-weight: normal;
font-size: 13px;
color: white;
margin-bottom: 20px;
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#msform").on('submit', function(event) {
event.preventDefault(); // Empêche l'action par défaut (la soumission du formulaire)
var form = $(this);
$.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize(),
success: function(data) {
window.location.href = 'https://libre-et-riche.net/masterclass-finance-etf/'; // Redirige vers le lien "success location"
}
});
});
});
</script>
<form id="msform" method="post" action="https://hooks.zapier.com/hooks/catch/13428278/3a7tcbc/">
<input class="txtinput" type="text" name="fname" id="fname" placeholder="Prénom" required />
<input class="txtinput" type="text" name="lname" id="lname" placeholder="Nom" required />
<input class="txtinput" type="text" name="mail" id="popupmail" placeholder="E-mail" required />
<input type="submit" name="submit" class="submit action-button" value="TÉLÉCHARGER MAINTENANT" />
</form>