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

[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

[David]

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.

[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

[David]

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

[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

[David]

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.

[FunkyCss]

Hey David that made the Magic !

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

[David]

Glad to be of help!

[Author]

Posts