Docs

[JP]

Hi there

I would love some help with styling this form

i would like to reduce the bottom and top margin/padding
i would like to horizontal align the two form elements so they are flush
I would like to make the whole form flush with the footer left side
I would like to change the text in the submit button to font awesome envelop http://fontawesome.io/icon/envelope/

Thank you very much

[Lely]

Hi There,

Perhaps you forgot the link where the form is? Do share us the link so we can check.

[JP]

oops bottom of the page on 3rd column footer myeternalbeauty.com

[Jade]

Hi there,

You can add this under Custom > JS in the Customizer.

(function($){

$(".x-subscribe-form fieldset:last-child").append('<i class="x-icon x-icon-envelope" data-x-icon="" aria-hidden="true"></i>');

})(jQuery);

Then add this in the custom CSS:

.x-subscribe-form fieldset:last-child {
    position: relative;
}

.x-colophon.top #text-4 #x-section-9 input {
    margin-bottom: 0;
}

#x-subscribe-form-241,
.x-subscribe-form input[type="submit"] {
   margin: 0;
}

.x-subscribe-form input[type="submit"] {
   text-indent: -9999px;
   border-radius: 0 0.22em 0.22em 0;
   border: 0;
   height: 37px;
}

.x-subscribe-form fieldset:last-child i {
    position: absolute;
    top: 10%;
    left: 30%;
    color: #fff;
}

Hope this helps.

[JP]

Thanks very much for your help. There are some issues with that code though

It is still not quite right. Please could you help:

– have the submit button on the same line as the input form
– have the input and submit the same height
– the envelope looks great but is not clickable. can i be clickable?

thanks!

[Jade]

Hi there,

Please add this code:

.x-subscribe-form fieldset {
    float: left;
    width: 83%;
}

Then update this code:

.x-subscribe-form fieldset:last-child {
    position: relative;
}

.x-subscribe-form input[type="submit"] {
    text-indent: -9999px;
    border-radius: 0 0.22em 0.22em 0;
    border: 0;
    height: 37px;
}

.x-subscribe-form fieldset:last-child i {
    position: absolute;
    top: 10%;
    left: 30%;
    color: #fff;
}

.x-colophon.top #text-4 #x-section-9 input {
    margin-bottom: 0;
}

to

.x-subscribe-form fieldset:last-child {
    position: relative;
    width: 15%;
}

.x-subscribe-form input[type="submit"] {
    text-indent: -9999px;
    border-radius: 0 0.22em 0.22em 0;
    border: 0;
    height: 53px;
    cursor: pointer;
}

.x-subscribe-form fieldset:last-child i {
    position: absolute;
    top: 19%;
    left: 28%;
    color: #fff;
}

.x-colophon.top #text-4 #x-section-9 input {
    margin-bottom: 0;
    font-size: 15px;
}

Then update the JS code to:

(function($){

    $(".x-subscribe-form fieldset:last-child").append('<i class="x-icon x-icon-envelope" data-x-icon="" aria-hidden="true"></i>');

    $(".x-subscribe-form fieldset:last-child i").click( function(){
        $('#x-subscribe-form-241').submit();
    });

})(jQuery); 

Hope this helps.

[JP]

wow! so much better thanks.

Still a few minor problems:

– the form is not left aligned. slight margin
– the elements don’t quite horizontally line up
– the envelope icon is not clickable on the submit form

Thanks for your kind help!

[Jade]

Hi there,

Please update this code:

.x-colophon.top #text-4 #x-section-9 input {
    margin-bottom: 0;
    font-size: 15px;
}

to

.x-colophon.top #text-4 #x-section-9 input {
    margin-bottom: 0;
    font-size: 15px;
    margin-top: 0;
}

and

.x-subscribe-form {
    position: relative;
}

to

.x-subscribe-form {
    position: relative;
    margin: 0;
}

and

.x-subscribe-form fieldset:last-child i {
    position: absolute;
    top: 19%;
    left: 28%;
    color: #fff;
}

to

.x-subscribe-form fieldset+fieldset i {
    position: absolute;
    top: 19%;
    left: 28%;
    color: #fff;
}

Then add this code in the customizer:

.x-subscribe-form fieldset+fieldset i:hover {
    cursor: pointer;
}

.x-subscribe-form .x-subscribe-form-alert-wrap {
    clear: both;
}

In case this doesn’t work, please provide us with the access to your admin area so that we could check the customizer.

[Author]

Posts