[Resolved] Email signup for Flint Skin Liberte

Home Forums Support [Resolved] Email signup for Flint Skin Liberte

Home Forums Support Email signup for Flint Skin Liberte

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1620649
    Incal

    Hi,

    I’m trying to reproduce the email signup form at the bottom of the template “Flint Skin Liberte.” In the demo, it’s a placeholder that’s supposed to be replaced by a real form.

    Could you please recommend how to achieve the same design without a paid option like Elementor Pro or Mailchimp for WordPress?

    Thanks,
    Kevin

    #1620715
    Leo
    Staff
    Customer Support

    Hi there,

    Are you using Elementor or just the default Gutenberg editor?

    Liberte is actually only using the free version of Elementor.

    Let me know ๐Ÿ™‚

    #1621048
    Incal

    Hi Leo,

    Thank you for your reply. Yes, I was able to import all the demo content and customize it to my liking with the regular Elementor.

    However, the email signup form is not functional (see https://imgur.com/NyuIWbH).

    So my question is: how can I achieve the same design but with an actual free email form (I use Mailchimp)?

    Thanks,
    Kevin

    #1621410
    David
    Staff
    Customer Support

    Hi there,

    Liberte just displays a fake sign up form.
    If you want to add your own sign up form, then let us know once thats done and provide a link to the site and ill provide some CSS to style it.

    #1621507
    Incal

    Hi David,

    Please see at the bottom of the page the signup form from MC4WP.

    Thank you,
    Kevin

    #1621522
    David
    Staff
    Customer Support

    Try this CSS:

    .mc4wp-form-fields>p {
      margin-bottom: 0.5em;
    }
    
    .mc4wp-form-fields input[type="email"] {
      width: 100%;
      padding: 20px;
      text-align: center;
      font-weight: 700;
      color: #000;
    }
    
    .mc4wp-form-fields input[type="submit"] {
      width: 100%;
      padding: 10px;
      background-color: transparent;
      font-size: 24px;
      border-radius: 255px 15px 225px 15px/15px 225px 15px 255px !important;
      border-color: #fff;
      border-width: 6px;
      transition: transform 0.3s ease-in;
    }
    
    .mc4wp-form-fields input[type="submit"]:hover {
      transform: translatey(-0.125em);
    }
    #1621536
    Incal

    Perfect – thank you, David! ๐Ÿ™‚

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