HTML & CSS Help with making a button have to two actions. Send data to a Mailchimp and send the user to another page.

[MaxLeonard]

I have a form that when a customer fills it in, the data gets sent to Mailchimp when the button gets clicked. After this process id like the customer to get sent over to a thank you page to download a PDF document. Can a button have to actions like this?

<!-- Begin Mailchimp Signup Form -->
<style>
    #mc_embed_signup{background:#EEEEEE; clear:left; font:14px Helvetica,Arial,sans-serif; }
    /* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
       We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
       .button-28 {
  appearance: none;
    background-color: #E34326;
  border: 15px solid #FFFFFF;
  border-radius: 25px;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  font-family: Roobert,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  font-size: 18px;
  font-weight: 600;
  line-height: normal;
  margin: 0;
  min-height: 60px;
  min-width: 0;
  outline: none;
  padding: 16px 24px;
  text-align: center;
  text-decoration: none;
  transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width: 100%;
  will-change: transform;
 
}

.button-28:disabled {
  pointer-events: none;
}

.button-28:hover {
  color: #E34326;
  background-color: #FFFFFF;
  box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
  transform: translateY(-2px);
  border-color: #E34326;
}

.button-28:active {
  box-shadow: none;
  transform: translateY(0);
}

h3{
    font-size: 23px;
    font-style: avenir book;
    text-align: center;
    position:relative;
    display:block;
    padding:0; margin:15px 0;
    padding-top: 2px;
}

/*Mailchimp css code below */
/* MailChimp Form Embed Code - Classic - 12/17/2015 v10.7 */
#mc_embed_signup form {display:block; position:relative; text-align:left; padding:10px 0 10px 3%}
#mc_embed_signup h2 {font-weight:bold; padding:0; margin:15px 0; font-size:1.4em;}
#mc_embed_signup input {border: 1px solid #ABB0B2; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
#mc_embed_signup input[type=checkbox]{-webkit-appearance:checkbox;}
#mc_embed_signup input[type=radio]{-webkit-appearance:radio;}
#mc_embed_signup input:focus {border-color:#333;}
#mc_embed_signup .button {clear:both; background-color: #aaa; border: 0 none; border-radius:4px; transition: all 0.23s ease-in-out 0s; color: #FFFFFF; cursor: pointer; display: inline-block; font-size:15px; font-weight: normal; height: 32px; line-height: 32px; margin: 0 5px 10px 0; padding: 0 22px; text-align: center; text-decoration: none; vertical-align: top; white-space: nowrap; width: fit-content; width: -moz-fit-content;}
#mc_embed_signup .button:hover {background-color:#777;}
#mc_embed_signup .small-meta {font-size: 15px;}
#mc_embed_signup .nowrap {white-space:nowrap;}

#mc_embed_signup .mc-field-group {clear:left; position:relative; width:96%; padding-bottom:3%; min-height:50px;}
#mc_embed_signup .size1of2 {clear:none; float:left; display:inline-block; width:46%; margin-right:4%;}
* html #mc_embed_signup .size1of2 {margin-right:2%; /* Fix for IE6 double margins. */}
#mc_embed_signup .mc-field-group label {display:block; margin-bottom:3px;}
#mc_embed_signup .mc-field-group input {display:block; width:100%; padding:8px 0; text-indent:2%;}
#mc_embed_signup .mc-field-group select {display:inline-block; width:99%; padding:5px 0; margin-bottom:2px;}

#mc_embed_signup .datefield, #mc_embed_signup .phonefield-us{padding:5px 0;}
#mc_embed_signup .datefield input, #mc_embed_signup .phonefield-us input{display:inline; width:60px; margin:0 2px; letter-spacing:1px; text-align:center; padding:5px 0 2px 0;}
#mc_embed_signup .phonefield-us .phonearea input, #mc_embed_signup .phonefield-us .phonedetail1 input{width:40px;}
#mc_embed_signup .datefield .monthfield input, #mc_embed_signup .datefield .dayfield input{width:30px;}
#mc_embed_signup .datefield label, #mc_embed_signup .phonefield-us label{display:none;}

#mc_embed_signup .indicates-required {text-align:right; font-size:11px; margin-right:4%;}
#mc_embed_signup .asterisk {color:#e85c41; font-size:150%; font-weight:normal; position:relative; top:5px;}    
#mc_embed_signup .clear {clear:both;}
#mc_embed_signup .foot {display:grid; grid-template-columns; width:50%; align-items: center;}
@media screen and (max-width:400px) {#mc_embed_signup .foot {display:grid; grid-template-columns: 1fr; width:100%; align-items: center;}}

@media screen and (max-width:400px) {#mc_embed_signup .referralBadge {width:50%;}}

#mc_embed_signup .brandingLogo {justify-self:right;}
@media screen and (max-width:400px) {#mc_embed_signup .brandingLogo {justify-self:left;}}

#mc_embed_signup .mc-field-group.input-group ul {margin:0; padding:5px 0; list-style:none;}
#mc_embed_signup .mc-field-group.input-group ul li {display:block; padding:3px 0; margin:0;}
#mc_embed_signup .mc-field-group.input-group label {display:inline;}
#mc_embed_signup .mc-field-group.input-group input {display:inline; width:auto; border:none;}

#mc_embed_signup div#mce-responses {float:left; top:-1.4em; padding:0em .5em 0em .5em; overflow:hidden; width:90%; margin: 0 5%; clear: both;}
#mc_embed_signup div.response {margin:1em 0; padding:1em .5em .5em 0; font-weight:bold; float:left; top:-1.5em; z-index:1; width:80%;}
#mc_embed_signup #mce-error-response {display:none;}
#mc_embed_signup #mce-success-response {color:#529214; display:none;}
#mc_embed_signup label.error {display:block; float:none; width:auto; margin-left:1.05em; text-align:left; padding:.5em 0;}

#mc-embedded-subscribe {clear:both; width:auto; display:block; margin:1em 0 1em 5%;}
#mc_embed_signup #num-subscribers {font-size:1.1em;}
#mc_embed_signup #num-subscribers span {padding:.5em; border:3px solid #ccc; margin-right:.5em; font-weight:bold;}

#mc_embed_signup #mc-embedded-subscribe-form div.mce_inline_error {display:inline-block; margin:2px 0 1em 0; padding:3px; background-color:rgba(255,255,255,0.85); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; font-size:14px; font-weight:normal; z-index:1; color:#e85c41;}
#mc_embed_signup #mc-embedded-subscribe-form input.mce_inline_error {border:2px solid #e85c41;}


</style>
<div id="mc_embed_signup">
<form action="https://Simplefastmortgage.us14.list-manage.com/subscribe/post?u=e4f88e6549431396de96fa8fb&amp;id=a5522d061e" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
    <h3 style="text-align: center;">Please complete the below to<br> get your free mortgage guide</h3>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
    <label for="mce-EMAIL">Email Address  <span class="asterisk">*</span>
</label>
    <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group">
    <label for="mce-FNAME">First Name  <span class="asterisk">*</span></label>
    <input type="text" value="" name="FNAME" class="" id="mce-FNAME">
</div>
<div class="mc-field-group">
    <label for="mce-LNAME">Last Name  <span class="asterisk">*</span></label>
    <input type="text" value="" name="LNAME" class="" id="mce-LNAME">
</div>
<div style="width: 96%; padding-bottom: 15px">
    <label style="padding-bottom: 5px;" for="mce-group[44861]">Mortgage Type  <span class="asterisk">*</span></label>
    <select name="group[44861]" class="REQ_CSS" id="mce-group[44861]">
    <option value=""></option>
    <option value="1">First Time Buyer</option>
<option value="2">Remortgage</option>
<option value="4">Buy To Let</option>
<option value="8">Moving Home</option>
<option value="16">Professional Mortgage</option>
<option value="32">Equity Release</option>
<option value="64">Specialist Mortgage</option>

    </select>
        <h3 style="text-align: center;">We will never share or sell your personal details <br>to any third party. </h3>
</div>
    <div id="mce-responses" class="clear foot">
        <div class="response" id="mce-error-response" style="display:none"></div>
        <div class="response" id="mce-success-response" style="display:none"></div>
    </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_e4f88e6549431396de96fa8fb_a5522d061e" tabindex="-1" value=""></div>
        <div class="optionalParent">
            <div  style= "margin: 0px auto" class="clear foot">
                <input type="submit" value="Subscribe" name="Subscribe" id="mc-embedded-subscribe" class="button-28">
                <p><a href="https://simplefastmortgage.com/mortgage-brochure-download" title="Mailchimp - email marketing made easy and fun" ></a>
             </p>
            </div>
        </div>
    </div>
</form>
</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[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[4]='PHONE';ftypes[4]='phone';}(jQuery));var $mcj = jQuery.noConflict(true);
function myFunction() {
  location.replace("https://simplefastmortgage.com/mortgage-brochure-download")
</script>
<!--End mc_embed_signup-->

 

[Johna]

You have that already.

The <form action="https://Simplefastmortgage.us14.list-manage.com/subscribe/post?u=e4f88e6549431396de96fa8fb&amp;id=a5522d061e"> is the link it will go to when the form is submitted.

If that's not the link you want then change it to your thank you page.

 

[MaxLeonard]

Oh is that easy! Thank you for the help

 

[Firehold]

Usually i hate it when someone answering in a forum with "did you asked google".
But some questions are that obviously able to get answered by one google search

"mailchimp redirect thank you"

Design and Host Your Own "Thank You" Pages | Mailchimp

When someone subscribes to your marketing, Mailchimp sends them to a Thank You page. Learn how to host custom versions of these pages on your own website.

mailchimp.com

Mailchimp - Custom Thank You page redirection

Set Up a Redirect to a Custom Thank You PageTo set up a redirect to a custom thank you page, follow these steps.

www.wordpresstechy.com

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

Accept third party cookies

Many Greets