How to set email text box and "send" button in the same line?
-
Hello guys,
It’s been two days since I have trying to find solution to put textbox and button in the same line,
I use embed sign-up form inside the page.Here is an example how it looks:
http://expnowhere.com/test/I tried to look for solution in other forum posts, but no solution was found.
For example I tried to add this code to the bottom of my style.css:
/* Mailchimp */
.mc_input {
width: 55%;
display: block;
float: left;}#mc_signup_submit.button {
margin-top: 10px;
margin-left: 5px;}.mc_var_label {
display: none;}Is there any other way I could make it work?
-
Place the code here.
There are certain tags that you will have to remove such as the <p> and also set the “display: inline or inline-block”
You mean the code of the embed script?
yes. or use this code on the FORM MARK-UP space
<p> <input type="email" id="mc4wp_email" name="EMAIL" placeholder="email address" required /> <input type="submit" value="Subscribe" /> </p>
<p> <input type="email" id="mc4wp_email" name="EMAIL" placeholder="email address" required /> <input type="submit" value="Subscribe" /> </p>
When I try to use your suggested script, it makes one instead of two lines break.
You can check the outcome: http://www.expnowhere.com/testMy embed script:
<div id=”mc_embed_signup”><form id=”mc-embedded-subscribe-form” class=”validate” action=”//expnowhere.us8.list-manage.com/subscribe/post?u=9278ab7365925549ce412b1e9&id=1d79198e1d” method=”post” name=”mc-embedded-subscribe-form” novalidate=”” target=”_blank”><input id=”mce-EMAIL” class=”email” name=”EMAIL” required=”” type=”email” value=”” placeholder=”email address” />
<!– 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;”><input tabindex=”-1″ name=”b_9278ab7365925549ce412b1e9_1d79198e1d” type=”text” value=”” /></div>
<div class=”clear”><input id=”mc-embedded-subscribe” class=”button” name=”subscribe” type=”submit” value=”Subscribe” /></div>
</form></div>
<!–End mc_embed_signup–>My mailchimp css only contains
.mc_input { width: 55%; display: block; float: left;} #mc_signup_submit.button { margin-top: 10px; margin-left: 5px;} .mc_var_label { display: none;}
It seem that your CSS has more lines, maybe that’s the reason why the button doesn’t go one line up?
Sorry for stupid questions, I am totally beginner in these things.
Its because I’ve customized it.
here is the answer to your question: http://stackoverflow.com/questions/3099030/displayinline-vs-displayblock
Sbutia is correct. 🙂
Also, it seems that you’re not using the MailChimp for WordPress plugin but rather the default MailChimp embed code. This makes it a little hard to edit the form mark-up, I would suggest switching to the plugin instead.
Good luck!
Good to know that, but I am still not getting right results.
Here are the changes I made in CSS :
/* Mailchimp */ .mc_input { width: 55%; display: inline; <-CHANGED float: left;} #mc_signup_submit.button { margin-top: 10px; margin-left: 5px;} .mc_var_label { <strong>display: inline;} <-CHANGED
Then I changed embed code to MailChimp for WordPress:
I added shortcode [mc4wp_form] instead of :
<p> <input type="email" name="EMAIL" placeholder="Your email address" required="required"> <input type="submit" value="Subscribe!"> </p>
I still haven’t found a solution. I would really appreciate if anyone could help me with this.
Not even a plugin author is responding to help with this. Well, it seems that it is time to find some new sign-up plugin and forget about this.
Hey borgarb,
I have just left a comment to your 1-star review (the only 1-star review for this plugin..) as well but thought I’d chime in here too.
Not only are you asking for support on a free plugin, you’re also asking a question that is not directly related to the plugin itself but more a theme / CSS issue. This is in no way a plugin issue, therefore leaving a 1-star review is a little harsh and actually hurts.
If you’re still looking for an answer, please post an URL to your site and I’ll try to take a look as soon as I can. There’s not much I can do without an URL as this is highly dependent on your theme CSS.
Let me know..
- The topic ‘How to set email text box and "send" button in the same line?’ is closed to new replies.