Custom form fields width and Submit button - Support | Kriesi.at

Hello,

Is it possible to change the design of the standard forms using CSS?

For example increasing the text fields width, changing the default font, increasing the submit button width?

Thanks,

February 12, 2015 at 4:02 pm #395108

Günter

Hey JTV Digital!

Thank you for using our theme.

You can use a code like that:


#mc_signup_form input {
    width: 100% !important;
}

#mc_signup_form select {
    width: 100% !important;
}

And add your stylings.

Cheers!
Günter

February 12, 2015 at 4:07 pm #395112

Will try, thanks much

February 12, 2015 at 4:10 pm #395119

Günter

Hey!

Glad we could help you.

I’ll leave this post open for further inquiries to this topic for you.

Best regards,
Günter

February 12, 2015 at 5:19 pm #395157

This reply has been marked as private.

February 12, 2015 at 5:27 pm #395167

Günter

Hi!

Thank you for coming back.

It is not possible for us to support all 3rd party plugins.

We try to help you with small adoptions, but it is out of scope of support to implement and support that plugin.

Cheers!
Günter

February 12, 2015 at 5:30 pm #395170

This reply has been marked as private.

February 13, 2015 at 12:59 pm #395652

Josue

Inactive Moderator

Hi!

Check this tutorial:
http://kriesi.at/documentation/enfold/mailchimp-integration/

Regards,
Josue

February 13, 2015 at 1:29 pm #395684

Great tutorial, thanks

February 13, 2015 at 3:07 pm #395775

Josue

Inactive Moderator

You are welcome, let me know if you have any doubts :)

Cheers!
Josue

February 15, 2015 at 12:38 pm #396352

The tutorial is interesting indeed, also tried with the CSS options from the mc4wp plugin but still can’t achieve exactly what I wanted.

– how to make the label fields 100% width? seems like the theme is overwriting the mc4wp CSS for fields width (it works on the “submit” button but not for fields)
– how to change the font type, size and weight (make it bold for example) with mc4wp? (again seems like mc4wp CSS gets somehow overwritten)

February 15, 2015 at 12:39 pm #396353

This reply has been marked as private.

February 15, 2015 at 6:14 pm #396442

Josue

Inactive Moderator

Hi!

You need to the put this code somewhere in your Quick CSS or child theme style.css (i noted JS code there, remove it):

.mc4wp-form form{margin:0!important;clear:both}
.mc4wp-form p br{display:none}
.mc4wp-form label{display:block;visibility:visible;position:relative;margin-bottom:7px;font-weight:600}
.mc4wp-form p{position:relative;clear:both;float:left;width:100%}
.mc4wp-form p.hidden{position:absolute;width:0;left:0;top:0}
.mc4wp-form .form_element_half{width:49.5%;float:left;margin-left:1%;clear:none}
.mc4wp-form .form_element_third{width:32.6%;float:left;margin-left:1%;clear:none}
.mc4wp-form .form_element_two_third{width:66.4%;float:left;margin-left:1%;clear:none}
.mc4wp-form .form_element_fourth{width:24.2%;float:left;margin-left:1%;clear:none}
.mc4wp-form .form_element_three_fourth{width:74.8%;float:left;margin-left:1%;clear:none}
.mc4wp-form .first_form{clear:both;margin-left:0}
@media only screen and (max-width: 479px) { .responsive .mc4wp-form .form_element{width:100%;clear:both;margin-right:0;margin-left:0;float:none} }
#top .mc4wp-form input[type='text'],#top .mc4wp-form input[type='email'],#top .mc4wp-form select,#top .mc4wp-form textarea{width:100%;margin-bottom:0;display:inline;min-width:50px;padding:13px;border-radius:2px}
#top .mc4wp-form select{-webkit-appearance:none;border-radius:0;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAANCAYAAAC+ct6XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RjBBRUQ1QTQ1QzkxMTFFMDlDNDdEQzgyNUE1RjI4MTEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RjBBRUQ1QTU1QzkxMTFFMDlDNDdEQzgyNUE1RjI4MTEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGMEFFRDVBMjVDOTExMUUwOUM0N0RDODI1QTVGMjgxMSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGMEFFRDVBMzVDOTExMUUwOUM0N0RDODI1QTVGMjgxMSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pk5mU4QAAACUSURBVHjaYmRgYJD6////MwY6AyaGAQIspCieM2cOjKkIxCFA3A0TSElJoZ3FUCANxAeAWA6IOYG4iR5BjWwpCDQCcSnNgxoIVJCDFwnwA/FHWlp8EIpHSKoGgiggLkITewrEcbQO6mVAbAbE+VD+a3IsJTc7FQAxDxD7AbEzEF+jR1DDywtoCr9DbhwzDlRZDRBgACYqHJO9bkklAAAAAElFTkSuQmCC);background-position:center right;background-repeat:no-repeat;border-radius:2px}
.mc4wp-form .button{margin:0;padding:16px 20px;border-radius:2px;border-bottom-width:1px;border-bottom-style:solid;font-weight:400;font-size:12px;min-width:142px;outline:none}
.mc4wp-form .modified_width .button{width:100%;padding:13px 10px 14px;min-width:0}
.mc4wp-form p input,.mc4wp-form p textarea,.mc4wp-form p select{-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;transition:all .3s ease-in-out}

Also make sure to have set this in the mc4wp Form options.

Best regards,
Josue

February 16, 2015 at 10:07 am #396559

This reply has been marked as private.

February 16, 2015 at 4:25 pm #396782

Yigit

Hey!

Please add following code to Quick CSS

.mc4wp-form input[type="submit"]:hover {
background-color: red!important;
color: orange!important;
}
.mc4wp-form input[type="submit"] {
width: 100%;
color: red!important;
background-color: orange!important;
}

Regards,
Yigit

March 10, 2015 at 6:46 pm #409003