<div class="w-form">
<form class="inline-cta" id="inline-cta" name="wedding-checklist" date-name="inline-cta">
<h5>Download the checklist now</h5>
<p>Have it on your phone or printed out for your wedding day.</p>
<input type="email" placeholder="Email" name="email" id="email" date-name="email" class="form-input white-bg" required>
<input type="submit" value="Download Now" class="button">
</form>
</div>
When the form is filled I get the data on the back-end but there’s no success message or anything. How can I say: “Thank you, please check your email?”
Thank you, Chris!
Just like with everything Webflow-related, it’s all explained for the designer mode, which already involves a Success message as part of the form creation.
I’m using an HTML form that -to my understanding, which is limited- is different than the one created automatically on the Designer mode. Do you know any Javascript? Do you think I can adapt that code to work with my HTML form?
<script data-info="hacks-body">
// when the DOM is ready
$(document).ready(function() {
// store a reference to the select field in the $interestSelectField variable
const $interestSelectField = $('#interest-select-field');
// store a reference to the email form in the $emailForm variable
const $emailForm = $('#email-form');
// store a reference to the success text field in the $successText variable
const $successText = $('.insert-success-text');
// declare & initialize the customSuccessMessage variable
// with the value of the option selected
// on the interest select field
let customSuccessMessage = $interestSelectField.val();
// every time the option on the select field changes
$interestSelectField.change(function(){
// assign the new selected option's value to the customSuccessMessage variable
customSuccessMessage = $(this).val();
});
// when the form's submit button is clicked
$emailForm.submit(function(e){
// if the user selected an option on the select field
if(customSuccessMessage){
// find .insert-success-text and add this text
$successText.text(`Thank you! We'll focus on ${customSuccessMessage} for future F'in sweet Webflow Hacks!`);
// then submit the form
return true;
}
else{ // else if no option was selected
// focus on the select field
$interestSelectField.focus();
// stop form submission
return false;
}
});
});
</script>
@Gaston_Garcia unfortunately I do not know any javascript. I basically just watch the videos and follow along. Others also might be able to get a better understanding of your problem if you share your read-only link.