Streaming live at 10am (PST)

Hide form and show div on submit

#1

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!

#2

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.

#3

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.

#4

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

#5

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

#6

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…

#7

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

#8

This is the code that works perfectly through the embed:

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

This is the code from the native form:
<form action="https://design.us20.list-manage.com/subscribe/post?u=e9159dc178d6d8b67a76b1e75&amp;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 &amp; 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.

#9

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

#10

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

#11

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

#12

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, https://www.w3schools.com/tryit/

#13

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

#14

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.

#15

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

#16

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 :slight_smile:

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