Tagged: 

Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • #1038755

    Hi,

    since I am using groups to organize my newsletter/subscribers, I can not use the standard Enfold “MailChimp signup element”; instead I had to play around with the MailChimp code for embedded forms.

    So what I did is to hide my groups and to precheck one of the groups.

    So far so good. I also managed to get the 3 fields inline, but I am not yet satisfied with the layout.

    I would like to have the 3 fields (email address, first name and submit button) distributed with each 1/3 width, as it can be done with the Enfold “MailChimp signup element”.

    See this screenshot here:
    The form above is done with the Enfold Element, the form below with the MailChimp code for embedded forms.

    How could I get the same layout with the embedded code?

    Currently I am using the following CSS-code (the entire Mailchimp-code is wrapped in a div named “horizontal-mailchimp”):

    .horizontal-mailchimp .mc-field-group,
    .horizontal-mailchimp .clear {
         display: inline-block; 
    }
    
    .horizontal-mailchimp label {
         display: block;
         height: 1px;
         text-indent: -9999px;
    }
    
    .horizontal-mailchimp {
         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;
         }
    		
    }

    Here is the page where I want to add this signup form.
    I used/kept the (hidden) Enfold Mailchimp signup element just for reference.

    • This topic was modified 2 years, 10 months ago by  catchbudapest. Reason: small corrections
    #1039103

    Hey catchbudapest,

    Best regards,
    Victoria

    #1039124

    Hi @victoria,

    no this is not Enfolds form, but the mailchimp code for embedded forms (which I adapted by myself :).

    I didn’t see this empty div. As far as I see it, we can make it smaller or also delete it.

    I am happy for suggestions…

    • This reply was modified 2 years, 10 months ago by  catchbudapest.
    #1039278

    Hi Victoria,

    I wrote my reply a bit too quickly :)

    Did you mean the div #mce-responses?
    The #mce-responses is the Container for error responses, so it wouldn’t be a good idea to delete it as I was suggesting ;)
    But isn’t it anyways hidden, so why make it smaller? (Sorry if I misunderstand)

    Unfortunately, this is not the Enfold Form but the MailChimp code for embedded forms, which I adapted according to this article.
    I would love to use the Enfold form but I can’t because it is not supporting the group selectors (or hidden groups).

    I am happy for any suggestions to get this form nicely distributed with each field (email, name, button) 1/3 of the width.

    #1040322

    Hi catchbudapest,

    Well, we can hide it, or make it smaller, but when notices come and it is not visible that would not be very user-friendly.

    Best regards,
    Victoria

    #1041782

    Hi Victoria,

    no hiding won’t be a good option then.

    But I don’t really understand:
    Why is the empty div for the responses (which takes no space in the normal view) preventing to distribute the other 3 fields (email adress, first name and submit-button) evenly over the width?

    #1042570

    Isn’t there a way to keep the empty div and still style the form/fields as described above?

    #1043808

    Hi catchbudapest,

    Well, this is not really ours, so I cannot really comment on why the empty divs are there.

    Can you disable caching and minification for now?

    Best regards,
    Victoria

    #1043892

    Hi Victoria,

    I just deactivated caching and minification.

    BR

    #1044438

    Hi catchbudapest,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
    @media only screen and (min-width: 1024px) {
      .horizontal-mailchimp .mc-field-group {
          display: block;
          width: 24vw;
          float: left;
      }
      .horizontal-mailchimp .clear {
       float: right;
       margin-top: -57px;
       margin-right: 12vw;
      }
    }
    

    But please remove this code:

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

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #1044922

    Hi Victoria,

    thanks for the CSS!

    Looks better now but still not perfect (see screenshot here):
    Is it possible to increase a bit the space between “email” and “first name” field, and reduce the space between “First name” and button?

    #1045431

    Hi catchbudapest,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
    #top .main_color .centered3_4 input[type='text'] {
      margin-left: 1em;
    }
    

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #1045872

    Hi Victoria,

    on Desktop that seems to be fine, but e.g. on tablet portrait mode the “first name” field is indented (see screenshot here).

    And could you please advise the best way how to increase (just a little bit) the height of the fields (email and first name) and the button?

    #1046066

    Sorry, I forgot to add the code in the “@media only screen and (min-width: 1024px) {} section, so the problem with the indent is solved.

    If you have any advise in regard of field and button height, please let me know.

    #1046339

    Hi catchbudapest,

    Glad you adjusted that part :)

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
    .main_color #mc_embed_signup input[type='submit'] {
      height: 36px;
    }
    

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #1046395

    Hi Victoria,

    thanks! That works for the button.
    How can I adjust the height of the text-fields (for email address and first name)?

    #1046503

    Hi catchbudapest,

    How do you want to adjust it?

    Best regards,
    Victoria

    #1046580

    Hi,

    the text/input fields should be also a bit higher (not just the button).

    #1048591

    Hi catchbudapest,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
    #mc_embed_signup {
      margin-top: -20px;
    }
    #top .main_color .centered3_4 input[type='text'], 
    #top .main_color .centered3_4 input[type='email'] {
      height: 45px;
    }
    .main_color #mc_embed_signup input[type='submit'] {
        height: 43px;
        margin-top: -16px;
    }
    

    If you need further assistance please let us know.

    Best regards,
    Victoria

Viewing 19 posts - 1 through 19 (of 19 total)

You must be logged in to reply to this topic.