Hide form and show div on submit

Nic1 · April 14, 2019, 5:54pm

Right, so I’m no programmer, but I have by some miracle (or hours of trial and error) managed to get the custom check boxes working of the form below - WIN!

I even got it submitting to Mailchimp - WIN WIN!

I had to change my approach and style the Mailchimp code to get the checkboxes to submit as groups in Mailchimp to segment the mailing list. The form is now in an embed section. - WIN WIN WIN!

I then managed to get the form to submit, but not redirect to a horrible Mailchimp confirmation -WIN WIN WIN WIN!

All I need to do now, to have 5 big WINS is get the form to hide on submit and show a confirmation div.

Can anyone offer any advice? I don’t know Javascript and don’t want to interfere with the standard Webflow form Javascript.

The subscribe form can be viewed here (just click the obviously named link in the middle of the page): https://brahmanhills.webflow.io/

Public link: https://preview.webflow.com/preview/brahmanhills?utm_source=brahmanhills&preview=132715ef5186f6f466b1aef2ec4b15c7

Thanks for any help!

avivtech · April 14, 2019, 10:17pm

I think that the easiest way would be to use the native Webflow form element, which have a built in success / error elements, and add to that form the needed custom code fields.

Nic1 · April 15, 2019, 4:51am

Hey Aviv, good to see you again. You can’t submit to Mailchimp groups using the standard Webflow form element. So unfortunately that’s not an option.

Nic1 · April 15, 2019, 4:58am

The Form tag needs to be the same as the Mailchimp one, and you can’t replace that tag. I tried

avivtech · April 15, 2019, 6:30am

Are you sure about this?
which “tags” cant’t you edit with webflow?

Nic1 · April 15, 2019, 6:46am

The actual <form> tag. You can use an embed to replace anything inside this tag, but not the tag itself. I systematically tried removing elements one by one until I discovered it was the actual <form> that needed to be changed so that the groups would populate in Mailchimp. Labelled as interests below

All I need to do is hide the form and show a div on submit. I’m sure this is some easy Javascript out there that won’t interfere with Webflows Javascript…

avivtech · April 15, 2019, 6:48am

What do you mean “needed to be changed”? you clearly still need a <form> tag. Does it needs a specific ID? other attributes?

Nic1 · April 15, 2019, 7:14am

This is the code that works perfectly through the embed:

<form action="https://design.us20.list-manage.com/subscribe/post?u=e9159dc178d6d8b67a76b1e75&id=8a8bc07315" method="post" data-name="mc-embedded-subscribe-form" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form">

This is the code from the native form:
<form action="https://design.us20.list-manage.com/subscribe/post?u=e9159dc178d6d8b67a76b1e75&amp;id=8a8bc07315" method="post" data-name="mc-embedded-subscribe-form" id="mc-embedded-subscribe-form" name="wf-form-mc-embedded-subscribe-form">

The only differences I can see is there a & which is being included in the action, although this isn’t effecting other fields being submitted and “wf-form-” being added to the name. I can’t get it to not add this, even if it doesn’t show in the Webflow UI. See below.

avivtech · April 15, 2019, 7:17am

Can you paste here the Action url? (The original one you got from mailchimp)

Nic1 · April 15, 2019, 7:27am

https://design.us20.list-manage.com/subscribe/post?u=e9159dc178d6d8b67a76b1e75&id=8a8bc07315

avivtech · April 15, 2019, 7:32am

Can you re-check your pasted code in the Action field?
I pasted your code in a form and there’s no added &

Nic1 · April 15, 2019, 7:47am

No matter what I do, it includes it. Even in a new form. So strange. Is it how I’m pasting? I’ve tried from TextEdit, W3Schools Online Code Editor - Tryit Yourself

avivtech · April 15, 2019, 7:50am

Can you share a read-only link to the project where you paste it?

Nic1 · April 15, 2019, 7:54am

Just go to the CMS Collection page > Specials Categories template. I’ve pasted the action in the Subscribe symbol and in a new form a just stuck on the page. The action looks fine in the UI though, just not when published.

Nic1 · April 17, 2019, 2:27pm

The subscribe form is now at: https://brahmanhills.webflow.io/old-home

Nic1 · April 24, 2019, 3:20pm

I managed to sort this out as per below if anyone is interested. Form submits to Mailchimp and updates Mailchimp groups. The Webflow validation does’t work, but it’s only a signup form. Maybe someone can figure that part out and let me know

<!-- Begin Mailchimp Signup Form -->
<div data-w-id="1198d8ce-bef0-5418-9b1a-590f617da781" class="subscribe">
      <div class="subscribe-wrapper">
        <div class="w-form">
        <form action="https://design.us20.list-manage.com/subscribe/post?u=e9159dc178d6d8b67a76b1e75&amp;id=8a8bc07315" method="post" data-name="mc-embedded-subscribe-form" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form">
					<h2 class="dark no-margin">Subscribe to Brahman Hills</h2>
          <div class="spacer-30-30-20-20"></div>
          
					<div class="subscribe-fields">
						<input type="text" value="" name="FNAME" class="input subscribe-field w-input" placeholder="name" id="mce-FNAME">
						<input type="email" value="" name="EMAIL" class="input subscribe-field no-margin w-input" placeholder="email address" id="mce-EMAIL">
					</div>
          <div class="spacer-30-30-20-20"></div>
          <p>I only want to receive the following content...</p>
					<div class="mc-field-group input-group">
						<div class="subscribe-checkbox-field w-checkbox">
            	<div data-w-id="5044a125-50dc-20ff-ffdd-eb63a8f984d8" class="subscribe-tick-div"></div>
              <input type="checkbox" value="1" name="group[1205][1]" id="mce-group[1205]-1205-0" class="subscribe-checkbox w-checkbox-input">
              <label for="mce-group[1205]-1205-0" class="subscribe-label w-form-label">Special Offers</label>
            </div>
						<div class="subscribe-checkbox-field w-checkbox">
              <div class="subscribe-tick-div"></div>
              <input type="checkbox" value="2" name="group[1205][2]" id="mce-group[1205]-1205-1" class="subscribe-checkbox w-checkbox-input">
              <label for="mce-group[1205]-1205-1" class="subscribe-label w-form-label">The Midlands Blog</label>
            </div>
						<div class="subscribe-checkbox-field w-checkbox">
              <div class="subscribe-tick-div"></div>
              <input type="checkbox" value="4" name="group[1205][4]" id="mce-group[1205]-1205-2" class="subscribe-checkbox w-checkbox-input">
              <label for="mce-group[1205]-1205-2" class="subscribe-label w-form-label">Wedding Blog</label>
            </div>
						<div class="subscribe-checkbox-field w-checkbox">
              <div class="subscribe-tick-div"></div>
              <input type="checkbox" value="8" name="group[1205][8]" id="mce-group[1205]-1205-3" class="subscribe-checkbox w-checkbox-input">
              <label for="mce-group[1205]-1205-3" class="subscribe-label w-form-label">Conferences Blog</label>
            </div>
						<div class="subscribe-checkbox-field w-checkbox">
              <div class="subscribe-tick-div"></div>
              <input type="checkbox" value="16" name="group[1205][16]" id="mce-group[1205]-1205-4" class="subscribe-checkbox w-checkbox-input">
              <label for="mce-group[1205]-1205-4" class="subscribe-label w-form-label">Spa Blog</label>
            </div>
					</div>
          <div class="spacer-30-30-20-20"></div>
          <div class="subscribe-button-wrapper">
          	<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button w-button">
            <a data-w-id="1198d8ce-bef0-5418-9b1a-590f617da7b4" href="#" class="subscribe-cancel">On second thoughts, no thanks</a>
          </div>
        </form>
        
        <div class="subscribe-success w-form-done" id="subscribe-confirm">
        	<h2 class="dark no-margin">Thanks for subscribing</h2>
          <div class="spacer-30-30-20-20"></div>
          <div>We promise to only send you information you want to receive.</div>
          <div class="spacer-30-30-20-20"></div>
          <a data-w-id="1198d8ce-bef0-5418-9b1a-590f617da7bd" href="#" class="button w-button">Continue browsing</a>
        </div>

				<div class="w-form-fail">
        	<div>Oops! Something went wrong while submitting the form.</div>
        </div>
       </div>
      </div>
      <a data-w-id="1198d8ce-bef0-5418-9b1a-590f617da7c2" href="#" class="close-button w-inline-block"><img src="https://uploads-ssl.webflow.com/5c88f30e4be15f0633c872b1/5c8a53dd9cf347670e30e05e_Close.svg" alt=""/></a>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script>
<script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[1]='FNAME';ftypes[1]='text';fnames[0]='EMAIL';ftypes[0]='email';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->

<!-- Hide form and show confirmation -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
        $("#mc-embedded-subscribe-form").submit(function(e) {
            e.preventDefault();
            $("#mc-embedded-subscribe-form").hide();
            $("#subscribe-confirm").show();
        });
    });
</script>

Topic		Replies	Views
How to use a Webflow form for Mailchimp signups with groups Custom code	24	8274	March 17, 2023
Webflow’s form success message — Mailchimp integration Custom code	4	1416	August 11, 2023
Only trigger this if submission is successful - Is this possible? Custom code	18	7977	April 4, 2024
Mailchimp Groups Custom code	25	9473	March 18, 2020
How to disable webflow form submit state success and failure Project settings	10	9363	August 22, 2023

Hide form and show div on submit

Related topics