Style a success message for Hubspot app form submissions

Design help Webflow integrations
1

Hi,

I’ve linked a test hubspot form via the app to my page.
When the submmission is successful I get a “Thanks for submitting the form.” message underneath the form - which looks ugly.
Is there a way to hide the form after a successful submission and just show a success message? - Like the default Webflow forms do once a submission is made.
Can you add a custom designed success message to the integration?

5 Likes
2

I’ve got a support ticket open on the same issue, will update. No reason to style a form beautifully if the success message that pops up afterwards is hideous

1 Like
3

Hey any update on this - thanks

4

Same issue/problem here. How do we hide the form after a successful submission and JUST show the success message?

5

@danielcobb @EmilVillumsen @Adam_Wright - i was able to hide the “submit” button and the Hubspot form input fields after form submission, by using custom code. Now post-form submission I ONLY see the success message (which is set in Hubspot).

You may need to add combo class(es) to your Hubspot submit button, and/or your Hubspot input fields. I went to Chat GPT, provided the full form code, and told it to write me Javascript that would hide the form elements after form submission. Here was the code I used; you will need to modify the .classes below to match yours:

<script>
document.addEventListener('DOMContentLoaded', function() {
  var form = document.querySelector('.hs-form-wrapper');

  form.addEventListener('submit', function(event) {
    // Prevent the form from submitting normally
    event.preventDefault();

    var isSubmissionSuccessful = true; // Change this based on your logic

    if (isSubmissionSuccessful) {
      // Hide the input field and the subscribe button
      var emailInput = document.querySelector('.hs-email-input');
      var subscribeButton = document.querySelector('.hs-subscribe-btn');

      if (emailInput && subscribeButton) {
        emailInput.style.display = 'none';
        subscribeButton.style.visibility = 'hidden';
      }
    }
  });
});
</script>
6

you can also style the class of the success message .submitted-message to make it match your design