[Resolved] Help with Email Form Css Code

Home Forums Support Help with Email Form Css Code

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1374300
    Ryan

    Hello,

    I am using generatepress with marketer site library, I create email signup form with MC4WP, I little bit know with CSS code and achieving this :

    https://prnt.sc/tnnbi7

    My css code :

    .mc4wp-form-fields {
    padding: 5%;
    margin-top: 50px;
    font-size: 0.9em;
    background-color: #233c68;
    }

    .mc4wptitle {
    color : #FFFFFF
    }

    .mc4wp-form-fields label {
    color: #fff;
    }

    .mc4wp-form-fields input[type=”submit”] {
    background-color: #22c952;
    }

    Can you help me with CSS to get something like this and fit Generatepress Marketer Site Library?

    https://prnt.sc/tnncmy

    I don’t know if it’s plugin territory, but if I see Access Generatepress Site Library, you are using an arrow icon and rounded subscribe button similar to the screenshot above. Help would be awesome!

    #1374504
    David
    Staff
    Customer Support

    Hi there,

    i would recommend you remove all of the content from your form so it only displays the Fields and Submit.

    Then place it inside a GenerateBlocks Container Block where you can add your other titles etc. and style it.

    Then i can assist with styling the form fields if you want? Let me know.

    #1374562
    Ryan

    I am using Element hook after content method, if I am using GenerateBlocks Container Block, I need to add on all post manually right? Is there a way to still use hook so it places automatically on all post?

    #1374591
    David
    Staff
    Customer Support

    Aah my bad – but GPP 1.11 just introduced the Block Element:

    https://generatepress.com/gp-premium-1-11-0-block-elements/

    But we’re still in alpha version. So not recommended for live sites.

    In the meantime you could sort out the form alignment with some CSS:

    @media(min-width: 769px) {
      .mc4wp-form-fields {
        display: flex;
      }
    }
    
    .mc4wp-form-fields {
      flex-wrap: wrap;
      justify-content: center;
      text-align: center;
    }
    
    .mc4wptitle {
      flex: 1 0 100%;
      text-align: center;
    }
    #1374937
    Ryan

    Wow. So, my answer to generateblocks hook method is on the next update. Nice!

    Thanks for your code, I will use it on my site for now.

    #1374961
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.