Add icon to Email Form fields

Support
#1

Hi there,

I’d like to create a subscription form signup like the one I’ve attached. I’ve been able to make it inline, but am unable to add an icon onto the submit button. I’d also like to place that line underneath as well.

My url is http://naokokamura.ca/demos/test/

Thank you.

#2

Hello There,

Thanks for writing in! To resolve your issue, please do the following:
1.) Edit the page back in Cornerstone and in the Cornerstone custom js section, Custom JS and insert the following custom js code

(function($){
  var icon = '<i class="x-icon x-icon-paper-plane" style="text-align: center;  font-size: 24px;" data-x-icon="&#xf1d9;" aria-hidden="true"></i>';
  $(icon).insertAfter( $('.tco-subscribe-form input[type="submit"]') );
})(jQuery);

2.) And also insert the following custom css in the settings tab, Settings > Custom CSS

.tco-subscribe-form fieldset {
    position: relative;
}

.tco-subscribe-form fieldset .x-icon {
    display: inline-block;
    float: right;
    margin-top: -85px;
    margin-right: 8%;
    margin-bottom: 0;
}

You should have something like this:

Hope this helps. Please let us know how it goes.

#3

HI there,

Thank you for that, it works great! Just one thing…am I able to put a class on that so that I can make another email subscription form without making it inline and all the above styling. Thanks!

#4

Hi again,

Yes you can, to do this replace the JS with:

(function($){
  var icon = '<i class="x-icon my-custom-icon x-icon-paper-plane" style="text-align: center;  font-size: 24px;" data-x-icon="&#xf1d9;" aria-hidden="true"></i>';
  $(icon).insertAfter( $('.tco-subscribe-form input[type="submit"]') );
})(jQuery);

and then replace the CSS with:

.tco-subscribe-form fieldset {
    position: relative;
}

.tco-subscribe-form fieldset .my-custom-icon {
    display: inline-block;
    float: right;
    margin-top: -85px;
    margin-right: 8%;
    margin-bottom: 0;
}

Hope this helps!

#5

Hi there,

The code doesn’t seem to work. All the styling comes up whether or not I put in ‘my-custom-icon’ in the class field. Just to clarify, I would like to add a class to all the styling I did to the current subscription form element, so that I can create another form with just the default styling. Thank you.

#6

Hi there,

You mean you want to apply all of that in a specific form where you added your class? In that case, please add your class name in the Custom Class input field under Appearance section. Example, my_custom_form_1, then implement it like this

(function($){
  var icon = '<i class="x-icon x-icon-paper-plane" style="text-align: center;  font-size: 24px;" data-x-icon="&#xf1d9;" aria-hidden="true"></i>';
  $(icon).insertAfter( $('.my_custom_form_1 input[type="submit"]') );
})(jQuery);

.my_custom_form_1 fieldset {
    position: relative;
}

.my_custom_form_1 fieldset .x-icon {
    display: inline-block;
    float: right;
    margin-top: -85px;
    margin-right: 8%;
    margin-bottom: 0;
}

Hope this helps.