5 replies [Last post]
sgcss
sgcss's picture
Offline
newbie
Last seen: 6 years 35 weeks ago
Timezone: GMT-8
Joined: 2015-01-14
Posts: 3
Points: 6

I've spent all day on this.

Read lots of articles to troubleshoot but I'm obviously missing something.

The Mailchimp form is on my home page. http://www.bullseye-promotions.com. It's the form right below the slider. I used the "Naked" version of Mailchimp form so that I could stylize it myself.

I'll stylize it later, but for now, I'm trying to get each field to align horizontally kind of what you see here: http://hayleyhobson.com/about/

For some reasons, I just cant get the first name field to position to the right of the email.

I had all kinds of problems so instead of aligning the input field through custom CSS, I decided to put them in Div and position the Div itself. I've resolved issued by doing this way, but I still can't make it work.

Here are the codes.

NOTE: The wordpress theme that I"m using is Avada by themeforest

ON THE PAGE
--------------------------------------------------------

<!-- Begin MailChimp Signup Form -->
<div class="belowsliderformalign">
<div id="mc_embed_signup">
  <form class="validate" id="mc-embedded-subscribe-form" action="//bullseye-promotions.us9.list-manage.com/subscribe/post?u=709f1b9cd564df000100b3c66&amp;id=f772255011" method="post" name="mc-embedded-subscribe-form" novalidate="" target="_blank">
     <div class="mc-field-group">
          <strong>Subscibe for Free</strong> <br>
         <div class="emailbsp"><input class="required email" id="mce-EMAIL" type="email" name="EMAIL" placeholder="*Email"/></div>
           <div class="fnamebs"><input class="required" id="mce-FNAME" type="text" name="FNAME" placeholder="*First Name"/>    </div>   
         <div class="belowsliderformsubmit"> <input class="button" id="mc-embedded-subscribe" type="submit" name="subscribe" value="Subscribe"/> 
     </div>
  </form>
</div>
</div>
<!--End mc_embed_signup-->

-------------------------------------------------------

I added some custom CSS...
------------------------------------------------------

.belowsliderfullwidth {
    margin-top: -50px;
    padding: 0px 10px 0px 10px;
}
 
/********************
MailChimp Custom Style for Horizontal Bar form
*********************/
.belowsliderformalign {
border: 1px solid #666;
   float: right;
    width: 40%;
}
.mc-field-group {
 
	padding: 0px 0px 0px 0px;
}
 
. emailbsp {
        margin: 10px;
         width: 33% !important;
        display: inline-block !important;
}
 
.fnamebs {
       margin: 10px;
       width: 33%;
       display: inline-block !important;
}
 
.belowsliderformsubmit {
       margin: 10px;
       display: inline-block;
display: inline !important;
}

---------------------------------------------

PS: I'm looking to oursource some front end programming work to someone who is familiar with the Avada Theme and can do the website by using the fusion short code as opposed to customizing the codes of the theme or even customizing the child theme. Send me a private message if you're interested.

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 4 years 52 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

@SRCSS

This is not really an answer , and i am not an expert in HTML emails , but u mentioned 'template' and well let me tell you to edit a HTML template you gotta be good at HTML Tables .

a simple HTML emailer is at least 2 tables deep . So basically you gotta be good at HTML Tables . thats it .

maybe this may help : Here

jackR
jackR's picture
Offline
Regular
Denver
Last seen: 6 years 8 weeks ago
Denver
Timezone: GMT-6
Joined: 2009-04-13
Posts: 44
Points: 46

Need a float

When I add the following code, I am able to get your input fields to align horizontally.

/*Adjust width so that all your input elements can line up:*/
 
 
.belowsliderformalign {
    border: 1px solid #666;
    float: right;
    width: 50%; /* New Code */
}
 
input, textarea, select {
    color: #000;
    float: left; /* New Code */
    font: 100% Arial,Helvetica,sans-serif;
    vertical-align: middle;
}
 
 
input[type="submit"], input[type="text"], input[type="password"], input[type="file"], textarea {
    float: right; /* New Code */
}

Be sure to adjust the width of your container div so that there is enough room for all the input elements to line up horizontally.

Hope that helps.

sgcss
sgcss's picture
Offline
newbie
Last seen: 6 years 35 weeks ago
Timezone: GMT-8
Joined: 2015-01-14
Posts: 3
Points: 6

Jack, Thanks for the

Jack,

Thanks for the help.

The codes that you're providing will affect all forms on the site right? I online want to use classes and Id that will affect the form that is right below the slider.

I'm not new to css, but it's been a while since I've used css. I successfully added divs beside each other before without problems. I'm really not sure why I can't do this now.

jackR
jackR's picture
Offline
Regular
Denver
Last seen: 6 years 8 weeks ago
Denver
Timezone: GMT-6
Joined: 2009-04-13
Posts: 44
Points: 46

Multiple forms

If you have multiple forms on the page and only want to apply styles to what you listed above, simply path to the elements you want to effect through the parent container.

For example:

 
.belowsliderformalign input {
    color: #000;
    float: left; /* New Code */
    font: 100% Arial,Helvetica,sans-serif;
    vertical-align: middle;
}
 

That should allow you to be specific to just the elements that you wish to effect.

sgcss
sgcss's picture
Offline
newbie
Last seen: 6 years 35 weeks ago
Timezone: GMT-8
Joined: 2015-01-14
Posts: 3
Points: 6

Thanks

Hi Jack,

Thanks for your help. With your input, I was able to figure out how to do it.