-
Posts
-
Hi there!
I am trying to get my Mail Chimp form to run across the page horizontally, so that the “Name” and “Email” and submit button are all in one line stretching across the page.I used this tutorial to get started as well as some code from other user on this forum who was having a similar issue, but for me the form fields and button are still appearing stacked on top of each other.
Here is my site. Scroll down a bit to get to the email signup area.
Here is the code I have in the text area on the page:
<!-- Begin MailChimp Signup Form --> <div id="mc_embed_signup"><form id="mc-embedded-subscribe-form" class="validate" action="http://just1.us3.list-manage.com/subscribe/post?u=89e64e08ae56748351cbcbe96&id=618d0d3926" method="post" name="mc-embedded-subscribe-form" novalidate="" target="_blank"> <div class="mc-field-group"><strong>Keep up with the latest from Just1.</strong> <input id="mce-EMAIL" class="required email" name="EMAIL" type="email" value="" placeholder="*Email Address" /><input id="mce-FNAME" class="required" name="FNAME" type="text" value="" placeholder="*First Name" /><input id="mc-embedded-subscribe" class="button" name="subscribe" type="submit" value="Subscribe" /></div> </form></div> <!--End mc_embed_signup-->And I have this in my Quick CSS:
<!-- Begin MailChimp Signup Form --> <div id="mc_embed_signup"><form id="mc-embedded-subscribe-form" class="validate" action="http://just1.us3.list-manage.com/subscribe/post?u=89e64e08ae56748351cbcbe96&id=618d0d3926" method="post" name="mc-embedded-subscribe-form" novalidate="" target="_blank"> <div class="mc-field-group"><strong>Keep up with the latest from Just1.</strong> <input id="mce-EMAIL" class="required email" name="EMAIL" type="email" value="" placeholder="*Email Address" /><input id="mce-FNAME" class="required" name="FNAME" type="text" value="" placeholder="*First Name" /><input id="mc-embedded-subscribe" class="button" name="subscribe" type="submit" value="Subscribe" /></div> </form></div> <!--End mc_embed_signup-->Hi suburbanite!
Please try the following code in Quick CSS under Enfold–>General Styling:
input[type="email"], input[type="text"]{ display:inline-block !important; }Best regards,
RikardLooks like it’s working now, thank you! Is there any way to make all the content in the signup box align to the center of the page rather than left aligned as it is now?
Hey!
Turn on the custom css class. Refer to this link: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/
Edit the text block element with the mail chimp form then add a custom class attribute as described on the documentation above. Use “custom-text” for example. Add this to the Quick CSS field:
.custom-text { text-align: center; } .custom-text > * { display: inline-block; }Best regards,
IsmaelThank you Ismael for your help! Unfortunately, it is still not working. I was able to add a custom class to the Mail Chimp text area for the form, but it’s not showing up any differently. Here’s the code I have no in my Quick CSS, I named the custom class for the form .special-mailchimp
.mc-field-group{ background-color: #fff; padding: 10px; display: inline !important; } #mce-email { float: left; margin:10px; } #mce-FNAME{ margin:10px; } #mce-EMAIL, #mce-FNAME { float: left; margin-right: 15px!important; } #mc-embedded-subscribe { margin: 0; } .special-mailchimp { text-align: center !important; } .special-mailchimp> * { display: inline-block !important; }
- You must be logged in to reply to this topic.