[Resolved] Before Footer – Call to Action asking for Email

Home Forums Support Before Footer – Call to Action asking for Email

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #902543
    FunkyCss

    Hi i hope you are doing fine !

    So i just saw this website https://www.orlandoix.com/about/ , This site is using Elementor for eveything and i liked the footer where it says GET UPDATES and has a Form with the Social icons .

    I try to quit Elementor & Beaver Builder so now i am working mostly with GPP in all my projects as i can .

    What i want to do is , to make a section before footer where i ask for the email and i have Social Icons , this is going to be done with Hooks , so i guess i should work with some html and css there ,

    but i need an advice of what can i do with the form , i see you use Happy Forms a Lot and i like it , but can we use it with Mailchimp ? also i am going to use it with Lightweight social icons . any suggestion on creating footers like this ?

    Unfortunatelly i did not find anything in the Site Library like this , but some concepts , i believe it would be a nice idea for some Footers & Before footers call to action ideas in the site library created withtout site builders !

    Friendly

    Andreas

    #902669
    David
    Staff
    Customer Support

    Hi there,

    the markup would be quite simple – something like this:

    <div class="custom-cta">
        <div class="custom-cta-inner grid-container">
            <h2>My CTA Heading</h2>
            <span>Some text below heading</span>
            <!-- Add Shortcode for Form here -->
            <span>Some text below form</span>
            <!-- Add Shortcode for social icons here -->
        </div>
    </div>

    Then you can style it with some CSS:

    .custom-cta {
        padding: 40px 0;
        background-color: #000000;
    }
    .custom-cta-inner {
        color: #fff;
        text-align: center;
    }

    Any form will work if it has a shortcode. Depending on the form you use it may require some CSS to style it.

    Lightweight Social Icons only works in a widget. So you would need to use the Widget Shortcodes plugin to add it using a shortcode.

    #904060
    FunkyCss

    Hi David and thank you

    As i see it will be more dificult than i thought and as i checked i have to install more plugins to do that , i apreciate your help i will upload a solution to this when i find it out for the next ones .

    Have a nice day

    #904235
    David
    Staff
    Customer Support

    You’re welcome.
    A couple of things:

    1. You could move the Lightweight social icons into a footer widget. So no additional plugin required.
    2. If you are using a font icon plugin already then creating the social links with HTML is pretty simple.

    Hope you find a good solution

    #919619
    FunkyCss

    Hi David , i am working for fun on your GP site and i am working on the CTA that we have spoken before a couple of weeks ! i am here right now , check this out , ( hidden )

    I have installed mailchimp wp and i want to make it excactly like this site https://www.orlandoix.com/about/ ( footer area )

    I will not use Social Icons cause i dont need it , but is possible to make the form look a bit like this one ?

    Thanks in advance

    #919839
    David
    Staff
    Customer Support

    So with the current set-up try this:

    .mc4wp-form-fields input[type="email"], .mc4wp-form-fields input[type="submit"] {
        padding: 15px 30px !important;
        font-size: 16px;
        border: 0;
    }
    .mc4wp-form-fields input[type="email"] {
        border-radius: 5px 0 0 5px;
        background-color: rgba(255,255,255,0.2);
    }
    .mc4wp-form-fields input[type="submit"] {
        border-radius: 0 5px 5px 0;
    }
    .mc4wp-form-fields input[type="email"]::placeholder {
        color: #aaaaaa;
    }
    /* remove space between input and submit */
    .mc4wp-form-fields p:nth-child(2) {
        font-size: 0;
    }

    Note the last piece of CSS – the fields are wrapped in a P tag, currently the second one in the form, so that is currently being targeted. If you add any more text above the fields then the nth-child will need to be updated.

    #920526
    FunkyCss

    Hey David that made the Magic !

    Thank you so much , i try to keep builders away ! with your help it can be done !!

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