Jump to content

Edit mailchimp embedded forms

Recommended Posts

Site URL: https://www.yourlittleexhibition.com/

Hi,

Could someone help me edit the code for a form that I got from Mailchimp to match my website style please?

The first picture is the one from Mailchimp and the second one is how I would like it to show.

In detail, I would like to:

  • Remove the top SIGN UP text
  • Change the field shape to pill 
  • The border colour to be #2b2b2b
  • Remove the white background in each field
  • Change the subscribe button to say SIGN UP in a pill shape button

(I'm happy with the UK flag to show next to the phone number field.)

 

Thank you!

Screenshot2024-09-24at13_44_27.thumb.png.e42cd59d4561e32af9fef97f0c1e54f2.png

Screenshot2024-09-24at13_45_11.thumb.png.7ddd7365e422f43cb9697e7fd8f72378.png

Link to comment
  • Replies 7
  • Views 678
  • Created
  • Last Reply

Top Posters In This Topic

On 9/25/2024 at 10:53 AM, tuanphan said:

Can you send Mailchimp Embed Form code? We can tweak it easier

Of course.

I managed to change the subscribe button to "sign up" so please ignore that bit.

Here's the code:

 

<div id="mc_embed_shell">
      <link href="//cdn-images.mailchimp.com/embedcode/classic-061523.css" rel="stylesheet" type="text/css">
  <style type="text/css">
        #mc_embed_signup{background:#transparent; false;clear:left; font:14px quasimoda; width: 600px; max-width: 100%}
</style>
<div id="mc_embed_signup">
    <form action="https://yourlittleexhibition.us17.list-manage.com/subscribe/post?u=af12150a1a88aedf405d3dcf2&amp;id=3020868e03&amp;f_id=0043c2e1f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
        <div id="mc_embed_signup_scroll"><h2>Enter the giveaway!</h2>
            <div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
            <div class="mc-field-group"><label for="mce-FNAME">First Name </label><input type="text" name="FNAME" class=" text" id="mce-FNAME" value=""></div><div class="mc-field-group"><label for="mce-LNAME">Last Name </label><input type="text" name="LNAME" class=" text" id="mce-LNAME" value=""></div><div class="mc-field-group"><label for="mce-EMAIL">Email Address <span class="asterisk">*</span></label><input type="email" name="EMAIL" class="required email" id="mce-EMAIL" required="" value=""></div><div class="mc-field-group"><label for="mce-SMSPHONE">SMS Phone Number </label><div class="" style="display: flex; border: 1px solid rgb(171, 176, 178);"><div style="display: flex;"><span style="padding-left: 16px; padding-right: 4px; align-self: center;"><div style="display: flex; align-content: flex-start; align-items: center; gap: 10px;"><img src="https://digitalasset.intuit.com/render/content/dam/intuit/mc-fe/en_us/images/forms-landing-pages/smsphone/flag-uk.svg" alt="Country Code" width="28" height="28"></div></span></div><input type="text" name="SMSPHONE" class="REQ_CSS" id="mce-SMSPHONE" value="" style="border: none;"></div><div class="mc-sms-phone-group"><div class="small-meta">Your Little Exhibition - By providing your phone number, you agree to receive promotional and marketing messages (e.g., abandoned carts), notifications, and customer service communications from Your Little Exhibition. Message and data rates may apply. Consent is not a condition of purchase. Message frequency varies. Text HELP for help. Text STOP to cancel. See  and<a href="http://eepurl.com/iZR-po" target="_blank">Terms</a>.</div></div></div><div class="mc-field-group size1of2"><label for="mce-BIRTHDAY-month">Birthday </label><div class="datefield"><span class="subfield dayfield"><input class="birthday REQ_CSS" type="text" pattern="[0-9]*" placeholder="DD" size="2" maxlength="2" name="BIRTHDAY[day]" id="mce-BIRTHDAY-day" value=""></span> /<span class="subfield monthfield"><input class="birthday REQ_CSS" type="text" pattern="[0-9]*" placeholder="MM" size="2" maxlength="2" name="BIRTHDAY[month]" id="mce-BIRTHDAY-month" value=""></span><span class="small-meta nowrap">( dd / mm )</span></div></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><div aria-hidden="true" style="position: absolute; left: -5000px;"><input type="text" name="b_af12150a1a88aedf405d3dcf2_3020868e03" tabindex="-1" value=""></div><div class="clear"><input type="submit" name="subscribe" id="mc-embedded-subscribe" class="button" value="Sign up!"></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[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[0]='EMAIL';ftypes[0]='email';fnames[7]='SMSPHONE';ftypes[7]='smsphone';fnames[5]='BIRTHDAY';ftypes[5]='birthday';}(jQuery));var $mcj = jQuery.noConflict(true);</script></div>

Link to comment
On 9/28/2024 at 6:42 PM, YLE said:

You can use this code to Website Tools > Custom CSS

div#mc_embed_shell input:not([type="submit"]):not(.birthday) {
    border-radius: 100px;
    border-color: #2b2b2b !important;
    background-color: transparent !important;
}
div#mc_embed_shell input[type="submit"] {
    border-radius: 100px !important;
}

image.thumb.png.3a35942250013ce6dc05c1208d2b81e1.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
6 hours ago, tuanphan said:

You can use this code to Website Tools > Custom CSS

div#mc_embed_shell input:not([type="submit"]):not(.birthday) {
    border-radius: 100px;
    border-color: #2b2b2b !important;
    background-color: transparent !important;
}
div#mc_embed_shell input[type="submit"] {
    border-radius: 100px !important;
}

image.thumb.png.3a35942250013ce6dc05c1208d2b81e1.png

Thank you,  I've added it to the home page and worked perfectly.

Just one more thing but it has a bit too much space below the form.

Is there any way to get rid of the empty space?

Thank you.

Screenshot 2024-09-30 at 16.30.25.png

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.