Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #394929

    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,

    #395108

    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

    #395112

    Will try, thanks much

    #395119

    Hey!

    Glad we could help you.

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

    Best regards,
    Günter

    #395157
    This reply has been marked as private.
    #395167

    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

    #395170
    This reply has been marked as private.
    #395652

    Hi!

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

    Regards,
    Josue

    #395684

    Great tutorial, thanks

    #395775

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

    Cheers!
    Josue

    #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)

    #396353
    This reply has been marked as private.
    #396442

    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

    #396559
    This reply has been marked as private.
    #396782

    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

    #409003

    Thanks for your help, it worked.

Viewing 16 posts - 1 through 16 (of 16 total)
  • The topic ‘Custom form fields width and Submit button’ is closed to new replies.