Streaming live at 10am (PST)

Display Success message after form is sent from CMS

Hey, I’m using this form on my CMS:

<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.

@Gaston_Garcia You could try this

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.

I’m also not to familiar with HTML forms.

1 Like