Confirmation page opens in the same window/tab for Mailchimp users

I've set up a very basic mailchimp form for my website, which only requires an email address.

Upon clicking "subscribe," it currently opens a new window with a custom URL displaying a "thank you" message before redirecting to the homepage of the site after 2 seconds.

Does anyone know if there is a way to prevent this new window from opening? Is it possible to have the custom URL load in the same window/tab upon clicking subscribe?

Thank you in advance

Here's the code snippet:

<style type="text/css">
#mc_embed_signup {background: transparent!important; clear:left; font:14px Helvetica,Arial,sans-serif; width:100%;color: #cd4038!important;}
</style>
<div id="mc_embed_signup" class="element">
<form action="https://love.us17.list-manage.com/subscribe/post?u=934cacc38490d44fbae4b28e4&amp;id=74bd78df58" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">

<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Email address" required>

<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_934cacc38490d44fbae4b28e4_74bd78df58" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>

Answer №1

Make sure to eliminate the target attribute or replace it with target="_self"

If you use target="_blank", a new tab will open when the form is submitted.

<form action="https://love.us17.list-manage.com/subscribe/post?u=934cacc38490d44fbae4b28e4&amp;id=74bd78df58" 
method="post" id="mc-embedded-subscribe-form" 
name="mc-embedded-subscribe-form" class="validate"
target="" novalidate>

Learn more about Target attributes from documentation

_blank - The response appears in a new window or tab

_self : The response appears in the same frame (this is default)

_parent : The response appears in the parent frame

_top : The response appears in the full body of the window

framename : The response appears in a named iframe

Your updated code:

<style type="text/css">
#mc_embed_signup {background: transparent!important; clear:left; font:14px Helvetica,Arial,sans-serif; width:100%;color: #cd4038!important;}
</style>
<div id="mc_embed_signup" class="element">
<form action="https://love.us17.list-manage.com/subscribe/post?u=934cacc38490d44fbae4b28e4&amp;id=74bd78df58" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="" novalidate>
<div id="mc_embed_signup_scroll">

<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Email adress" required>

<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_934cacc38490d44fbae4b28e4_74bd78df58" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular throws a 404 error when making a JSONP http request

I've been incorporating Mailchimp integration into an Angular application. For using it in pure JS, I retrieved the code from the embedded form on the Mailchimp site: <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js ...

Optimal method for displaying videos in a GatsbyJS front-end, utilizing Node.js for the back-end, and MySQL for the database

I am just starting out with this, so I would appreciate any suggestions on the best way to stream videos in a gatsby js app. The app utilizes node js for the back end and all the data is stored in mysql. My current approach involves storing videos as BLO ...

document.addEventListener versus $().on

Recently, I came across an odd behavior while trying to add event listeners to the document. Strangely, when adding listeners to HTMLElements, everything worked smoothly, but for some reason, adding a listener to the document did not have any effect. Howev ...

Ensuring the accuracy of input data in all input fields with the help of dojo

1)In my Dojo widget, I have two additional widgets loaded inside. If I need to clear all text boxes within the widget, I currently use this method: this.myAttachPoint.value="". Is there an alternative code that can achieve the same result without adding ...

Set the height of a div based on the height of another div

My challenge involves a textarea that dynamically expands as content is added to it. The structure of the textarea within a div element is illustrated below: <div id='sendMes' class='container-fluid'> <form action='#&apos ...

Leveraging previous state values within a setInterval function in React

Could someone please provide me with an answer to this topic? When I attempt to implement the Interval in the correct way (including cleanup), I encounter the following code: const [count,setCount] = useState(0) useEffect(() => { const interval = ...

:visible fails to function following the submission event

Here is my code snippet: http://jsfiddle.net/Z9qP5/1/ I am trying to fadeOut my form once the user has submitted their email. However, I am facing an issue where I cannot capture the submit event. What I want is for the form to be hidden when the success ...

The website was accessed via HTTPS, but an insecure XMLHttpRequest endpoint from the same website was requested

My axios request below is going out over https, but I'm encountering a specific error: The page at 'http://websitename/folder1/folder2/api/atlas/home/coach' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http: ...

The Formik form is not being populated with data from the API

While working on a functional component in ReactJS, I created a simple form using Formik. The input fields in my form are supposed to fetch data from an API when the component mounts. To achieve this, I utilized fetch and useEffect. However, after fetching ...

What is the best way to input a value into the search bar within an Iframe?

I've created a basic website using node and a pug page where I inserted an iframe from wikipedia.com. My goal is to have the search input in the Wikipedia iframe populated with a value based on a button click within the same pug page. Is this feasible ...

Using jQuery to show/hide linked CSS3 animations upon Mouseenter/Mouseleave events

Exploring the capabilities of animate.css and jQuery within a bootstrap environment has been quite interesting for me. However, I've encountered a major issue! I am attempting to trigger animations on mouseenter / mouseleave, which led me to create a ...

AngularJS ng-repeat doesn't refresh following an Ajax request

I am using an AngularJS application where I have a chat feature on the right side for communication with my clients. Here is the HTML code: <div class="recent" ng-show="show_chat_list"> <h2></h2> <div ng-repeat="customer in r ...

AngularJS allows for dynamic form actions based on the selection of a radio button

I currently have a form along with two radio buttons. Depending on which radio button is selected, I need to modify the action of my form. Here is the sample code: <form action={{action}} name="payform" method="post"> <div class="form-group"> ...

What is the process for incorporating a full-page blog into a blog preview?

I customized a template, but there is a blog section within the div that I am struggling to replicate. Here is the test website for reference: Below is the HTML code for the blog section: <!-- Blog Start --> <section class="section bg ...

Tips for ensuring that the first div of a collapsible div remains expanded whenever a dropdown is changed in AngularJS

There are collapsed and expanded div elements, with the first div always open on load. I want to ensure that the first div remains open even when changing the dropdown selection. The current implementation works partially, as expanding any div and then c ...

Execute a function only after the completion of another

I am trying to implement a function where the .hidden class is added to a div only when it has scrolled to the top. I know I can use SetTimeout, but I want to ensure that the div disappears only when it has reached the top of the scroll. $(".more").on(" ...

Tips on implementing href with "javascript:window.open..." in AngularJS

I've been trying to utilize an anchor tag in my HTML code to open a new modal browser window with a URL retrieved through an Angular value like this: <a href="javascript:OpenPopUpPage('{{listing.Linktest}}');">Test Link</a> Alt ...

Interactive HTML and CSS tree structure viewing experience

I am looking to create a responsive tree diagram, here is a basic example: https://jsfiddle.net/ppnfpggx/2/ However, I am facing some challenges with the responsive layout. Particularly on smaller devices, it should appear like this:https://i.sstatic.net/ ...

Executing JavaScript in HttpClient or HtmlUnitHow to trigger javascript in HttpClient or HtmlUnit

Currently, I am using the HttpClient POST method to perform a specific action on a website. This involves using Javascript for an ajax connection which generates a unique requestID in the form of var reqID = Math.floor(Math.random()*1000001);. I need to ac ...

How can I handle a situation where my database is extremely large and I require all the data to be loaded on the frontend from the get

I have encountered a challenge with my MongoDB collection as it has grown significantly large, now containing 15k documents totaling nearly 15 MB in size. The website I am developing utilizes a map to display all elements, making pagination difficult. Each ...