CODEWITHSUNDEEP
htmlcssformstwitter-bootstrapmailchimp
Middi
Middi

Reputation: 353

How to make custom mail chimp form inline

Code Pen Link Here.

I have an opt-in form for my companies site, however it won't go inline.

I need the name, email and subscribe to all be in one line. any ideas?

I'm not sure if it's not playing well with bootstrap.

HTML

<div class="container-fluid">
        <div class="row">

            <div class="horizontal-mailchimp">

                <div id="mc_embed_signup">
                    <form action="//growthitude.us12.list-manage.com/subscribe/post?u=7325f579d436346d635d003a4&amp;id=75cff09018" 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-FNAME">First Name </label>
                                <input type="text" value="" name="FNAME" class="" id="mce-FNAME" placeholder="name">
                            </div>

                            <div class="mc-field-group">
                                <label for="mce-EMAIL">Email Address </label>
                                <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="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>


                            <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_7325f579d436346d635d003a4_75cff09018" tabindex="-1" value=""></div>

                            <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

CSS

.horizontal-mailchimp .mc-field-group,
.horizontal-mailchimp .clear {
     display: inline-block;
}

.horizontal-mailchimp label {
     display: none;
     height: 1px;
     text-indent: -9999px;
}

.horizontal-mailchimp {
     background: red;
     margin: 20px auto;
     padding: 20px;
     text-align: center;
}

@media only screen and (max-width: 768px) {

     .horizontal-mailchimp .mc-field-group,
     .horizontal-mailchimp .clear,
     .horizontal-mailchimp input {
          display: block;
          width: 100%;
     }

     .horizontal-mailchimp .mc-field-group {
          margin-bottom: 5px;
     }

}

Thanks in advance

Upvotes: 0

Views: 926

Answers (2)

Harry
Harry

Reputation: 113

here you go and all you need is to give class "c-field-group" to main parent div submit button and move that div to just below the email main parent div and add this css code:

#mc_embed_signup .mc-field-group { clear: none !important; width: auto !important; }

Like Given below:

.horizontal-mailchimp .mc-field-group,
.horizontal-mailchimp .clear {
     display: inline-block;
}

.horizontal-mailchimp label {
     display: none;
     height: 1px;
     text-indent: -9999px;
}

.horizontal-mailchimp {
     background: red;
     margin: 20px auto;
     padding: 20px;
     text-align: center;
}

@media only screen and (max-width: 768px) {

     .horizontal-mailchimp .mc-field-group,
     .horizontal-mailchimp .clear,
     .horizontal-mailchimp input {
       display:inline-block;
     }

     .horizontal-mailchimp .mc-field-group {
          margin-bottom: 5px;
     }

}
#mc_embed_signup .mc-field-group {
    clear: none !important;
    width: auto !important;
}
<html>

<head>



    <!-- FONT AWESOME -->


    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">



    <!-- GOOGLE FONTS -->


    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">


    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


    <!-- Begin MailChimp Signup Form -->
    <link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">


</head>


<body>


   
    <div class="container-fluid">
        <div class="row">

            <div class="horizontal-mailchimp">

                <div id="mc_embed_signup">
                    <form action="//growthitude.us12.list-manage.com/subscribe/post?u=7325f579d436346d635d003a4&amp;id=75cff09018" 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-FNAME">First Name </label>
                                <input type="text" value="" name="FNAME" class="" id="mce-FNAME" placeholder="name">
                            </div>

                            <div class="mc-field-group">
                                <label for="mce-EMAIL">Email Address </label>
                                <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="email">
                            </div>
													
													<div class="mc-field-group"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></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 style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_7325f579d436346d635d003a4_75cff09018" tabindex="-1" value=""></div>

                            
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>








</body>

</html>

Upvotes: 1

Kuja
Kuja

Reputation: 449

https://plnkr.co/edit/e0ELyGgwvVMgCt4k86Zo?p=preview

It's working as intended on big screens, but when your width was lower than 768px it put the mailchimp into a display:block instead of display:inline-block

@media only screen and (max-width: 768px) {

 .horizontal-mailchimp .mc-field-group,
 .horizontal-mailchimp .clear,
 .horizontal-mailchimp input {
   display:inline-block;
 }

 .horizontal-mailchimp .mc-field-group {
      margin-bottom: 5px;
 }

}

All I did was change the display to inline-block under the @media tag as well.

Upvotes: 0

Related Questions