I got a custom email signup form from Mailchimp and implemented it on my wordpress website with elementor custom HTML, it kinda works but the problem is that when i log off my wordpress session and check the website as a visitor, the custom HTML gets written as a text instead of being read as a html file and also some tags get ignored such as style , form , input and script
Everything is getting saved to the database, it just doesn't read the code as it should. I purged all cache several times.
This the code i'm trying to insert and make it stay when im logged off
<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-071822.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; width:100%;}
/* 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. */
</style>
<div id="mc_embed_signup">
<form action="https://gmail.us8.list-manage.com/subscribe/post?u=9eedbcb189ca63a07ad3fc7e8&id=96681ba87c&f_id=00546ae0f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_self">
<div id="mc_embed_signup_scroll">
<div class="mc-field-group">
<label for="mce-EMAIL">Seu melhor email:
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" required>
<span id="mce-EMAIL-HELPERTEXT" class="helper_text"></span>
</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_9eedbcb189ca63a07ad3fc7e8_96681ba87c" tabindex="-1" value=""></div>
<div class="optionalParent">
<div class="clear foot">
<input type="submit" value="Garantir meu lugar" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>
</div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
Logged in
Logged out
Related
I am trying to make some changes to the Mailchimp embedded form HTML code. I was able to figure out how to change the color of the subscribe button, but I am having trouble figuring out:
How to move the subscribe button to appear next to the email address input field
How to have "Email Address*" appear in the email address input field vs. above it
How to (and if it's possible) to center the email address input field and subscribe button under the text on the landing page, it's currently aligned to the left.
Here is a Google Drive link to the image of how it currently looks: https://drive.google.com/file/d/15b9I3Ai6xdET39UetIhX9NsEE01oAqag/view?usp=sharing
This is how I would like it to look: https://drive.google.com/file/d/1mcwVYS3dOZA3M0UBymvFFaX0JqmQRonx/view?usp=sharing
Can you please show what what code I should insert and what I need to/should adjust? Thank you, here's the code I have right now:
<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7_dtp.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; width:600px;}
#mc-embedded-subscribe { background-color: #4CAAD8 !important; }
/* 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. */
</style>
<div id="mc_embed_signup">
<form action="https://emergingcrypto.us20.list-manage.com/subscribe/post?u=da91a69cad9ed7c2929bb4e6e&id=3ab4e9df0b" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="">
<div id="mc_embed_signup_scroll">
<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 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_da91a69cad9ed7c2929bb4e6e_3ab4e9df0b" tabindex="-1" value=""></div>
<div class="optionalParent">
<div class="clear foot">
<input type="submit" value="Subscribe to stay smart" name="subscribe" id="mc-embedded-subscribe" class="button">
</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';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->
I'm so sorry in advance for this question as honestly I know NOTHING about code so I'm turning to the internet to help. Right now, I have it so the subscribe button and the field for inputting email are on separate lines and the button size is small with awkward spacing inbetween the field and the button. I'd like to fix these issues by having the button and the input field for email on the same line. If you could just add/remove whatever needs to be done to this I would REALLY appreciate it:
My code for this Mailchimp embed form is like this right now:
<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#ce3939; clear:left; font:14px Helvetica,Arial,sans-serif; width:600px; color: white}
h2 {color: white;}
#mc-embedded-subscribe { background-color: #930e0e !important; }
#mc-embedded-subscribe:hover { background-color:#ce3939 !important; }
</style>
<div id="mc_embed_signup">
<form action="https://pghcitypaper.us13.list-manage.com/subscribe/post?u=7bf7a7c4fa696150853fb01ba&id=36c5a7a88b" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2>Subscribe to our newsletter (or else)!</h2>
<div class="mc-field-group">
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div hidden="true"><input type="hidden" name="tags" value="118"></div>
<div id="mce-responses">
<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_7bf7a7c4fa696150853fb01ba_36c5a7a88b" tabindex="-1" value=""></div>
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
</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';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->
This code currently displays the email field and the submit button on two lines. How can I have it display on one line with enough space for an email address with no box around submit.
<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#fff; 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. */
</style>
<div id="mc_embed_signup">
<form action="https://spatialinc.us4.list-manage.com/subscribe/post?u=13c45188f9b54797f1d223963&id=2fb248a1eb" 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>
<!-- 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_13c45188f9b54797f1d223963_2fb248a1eb" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
Just add some CSS to do what you ask to your style:
#mc_embed_signup_scroll{display:flex;}
Example:
<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup {
background: #fff;
clear: left;
font: 14px Helvetica, Arial, sans-serif;
}
#mc_embed_signup_scroll {
display: flex;
}
/* 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. */
</style>
<div id="mc_embed_signup">
<form action="https://spatialinc.us4.list-manage.com/subscribe/post?u=13c45188f9b54797f1d223963&id=2fb248a1eb" 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>
<!-- 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_13c45188f9b54797f1d223963_2fb248a1eb" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
So I've been trying to implement a Mailchimp form onto my site so people can subscribe to the email newsletter. I am using Wordpress and trying to implement this via a Custom HTML Widget in my footer.
width:100%; wasn't working for me, but it will let me use it with a pixel value. Of course I want to be able to use 100% width and not have to use a pixel value. The only way I was able to use a % value is when I added position:absolute; but then the button only moves to be about 60% of whatever width I use. I am really stuck and just want the email input and the subscribe button to be at 100% width. Anyone have any suggestions for me? I feel like it's a simple fix but I have spent hours on it so far.
Here's what it looks like:
Here's the current code:
<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{ width:80%;
position:absolute;
clear:left;
font:14px Helvetica,Arial,sans-serif; }
#mc-embedded-subscribe {
width:100%;
position:absolute;
background-color: #94a6bf !important; }
/* 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. */
</style>
<div id="mc_embed_signup">
<form action="KEEPING THIS PRIVATE" 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" required>
<!-- 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_bb6e0bb53d927bf2a775cf919_9a92e414ab" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="SUBSCRIBE" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
Parent div also define full width. this works for me. try this.
<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
div#mc_embed_signup_scroll {
width: 100%;
}
input#mce-EMAIL {
width: 100%;
margin: 10px 0px;
}#mc-embedded-subscribe {
width: 100%;
background-color: #94a6bf !important;
}
/* 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. */
</style>
<div id="mc_embed_signup">
<form action="KEEPING THIS PRIVATE" 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" required>
<!-- 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_bb6e0bb53d927bf2a775cf919_9a92e414ab" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="SUBSCRIBE" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
use style attribute on the button (style="width:100%;")
<div id="mc_embed_signup">
<form action="KEEPING THIS PRIVATE" 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" required>
<!-- 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_bb6e0bb53d927bf2a775cf919_9a92e414ab" tabindex="-1" value=""></div>
<div><input type="submit" value="SUBSCRIBE" name="subscribe" id="mc-embedded-subscribe" class="button" style="width:100%;"></div>
</div>
</form>
</div>
I got completely lost trying to implement Mailchimp on my Vue.js app. The objective is to build a simple email signup form.
Using Mailchimp, I am able to generate the following code:
<!-- Begin Mailchimp Signup Form -->
<div id="mc_embed_signup">
<form action="https://pm.us1.list-manage.com/subscribe/post?u=xxxx" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address </label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div id="mce-responses" class="clear">
<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_5119408c70596654ef4da6c1a_987baf3d10" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
Resulting in:
This works as intended however it lacks any style. I'm using the Carbon Design System that features styled components. However I am not sure how to add the functionality from the HTML code to the styled components.
<template>
<div>
<cv-form #submit.prevent="functie1">
<cv-text-input
label="Example text label"
helper-text="Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)"
placeholder="Optional placeholder text"
>
</cv-text-input>
<cv-button>Submit</cv-button>
</cv-form>
</div>
</template>
<script>
export default {
name: "SignupForm",
methods: {
functie1: function() {
console.log("add email to userlist");
}
}
};
</script>
resutling in . What I don't get is whether I should use another library like Axios or requests to make the POST request to Mailchimp. Any help is welcome.