Click here to Skip to main content
15,891,248 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
C#
This is my Mailchimp code for subscribe form. I have customized it suiting to my needs.

The red button below appears on the right side..but i want to shift it beside(on same level)(right) the email box.

C#
I have tried all attempts but nothing is working for me. Hope, someone could help. I am new to CSS. Thank you.




What I have tried:

HTML
<div id="mailchimp">
<form action="//askchange.us11.list-manage.com/subscribe/post?u=32e8df9557dd399bb3ba2ae61&id=62317f4783" 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="indicates-required"><span class="asterisk">*</span> indicates required</div>
        <div class="mc-field-group">
            <input type="email" value="Enter your email" name="EMAIL" SIZE="30" class="required email" id="mce-EMAIL"onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">
        </div>
        <div id="mce-responses" class="clear">
            <div class="response" id="mce-error-response"></div>
            <div class="response" id="mce-success-response"></div>
        </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
        <div><input type="text" name="b_32e8df9557dd399bb3ba2ae61_62317f4783" tabindex="-1" value=""></div>
        <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    </div>
</form>
</div>

<pre lang="CSS">

#mailchimp {
	background: #383838;
	color: #ff2727;
	padding: 40px 15px;
}
	#mailchimp input {
		 border: medium none;
    color: gray;
    font-family: times new roman;
    font-size: 16px;
    font-style: bold;
    margin-bottom: 15px;
    padding: 10px 12px;
    width: 350px;
  
		
	}
		#mailchimp input.email { background: #fff }
		#mailchimp input.name { background: #fff}
		#mailchimp input[type="submit"] {
			background: #ff2727;
			color: #fff;
			cursor: pointer;
			font-size: 20px;
			width: 40%;
			padding: 8px 0;
             	
		}
		#mailchimp input[type="submit"]:hover { 
   background-color: #000000; 
}
#mailchimp input[type="submit"] { 
   float: right;
}

#mailchimp input.email { 
    float: left;
}
		 	
			#mailchimp input[type="submit"]:hover { color: #ffffff }
Posted
Updated 6-Nov-16 7:50am
v2
Comments
Member 12835506 6-Nov-16 12:40pm    
The button appear on the right hand side(below the email box)..i want it to appear beside the email box, on same level.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900