• Resolved stumur

    (@stumur)


    Hi Guys,

    I just updated to the latest version of Forminator from the most recent version until two days ago.. anyway, the form on my homepage is misaligning. Could it be the updated version? I’m not sure how to check it to verify. Mostly, the submit button is mialigned. Thanks, Stu

    The page I need help with: [log in to see the link]

Viewing 15 replies - 1 through 15 (of 22 total)
  • Thread Starter stumur

    (@stumur)

    Fyi: I updated from 1.14.7 to 1.15.12. Consequently, I just noticed a second form is showing misalignment too – it’s a multi-option select form, where the gaps between the horizontal section line options are now twice what they were.

    Hello @stumur !

    Hope you’re doing well today!

    I’m not sure what exactly happened there, but I see the issue as well. Will have to test it additionally to see what may have caused that.

    In the meantime, please try the following CSS:

    #forminator-module-11519 .forminator-row-last .forminator-col {
    padding-top: 17px !important;
    }

    You can add the code to Appearance >> Customise >> Additional CSS.

    Please also let us know where we can find the second form (I looked for it but didn’t find it anywhere, only found the contact form which seems okay).

    Warm regards,
    Pawel

    Thread Starter stumur

    (@stumur)

    Thank you so much for your help Pawel. I input that new CSS code you suggested and at least it lines up horizontally now – but it stll isn’t justified out to the right side the same as the first box on the left side is. I’ve made so many changes to this form in that Appearance >> Customise >> Additional CSS area, that I’m sure there’s a lot of compromised code there now. Does it help you if I paste it all in here:

    .forminator-custom-form #submit {background: none; border: none; box-shadow: none;}
    
    /** Desktop CSS **/
    @media screen and (min-width: 768px){
    #forminator-module-11519{
        display: flex;
        justify-content: space-between;
    }
    
    .forminator-datepicker{
        width: -webkit-fill-available !important;
    }
    
    #forminator-module-11519 #address-1 input{
        margin-left: 0 !important;
        width: -webkit-fill-available !important;
    }
    
    #forminator-module-11519 .forminator-col{
        width: 180px !important;
    }
    
    #forminator-module-11519  .forminator-error-message{
        margin-left: 0 !important;
    }
    
    }
    
    #forminator-module-11519 input,
    #forminator-module-11519 button {
      max-width:440px;
    }
    
    #forminator-module-11519 button {
      background:#C00000;
      margin-top:3px!important;
    }
    
    #forminator-module-11519 #submit {
      margin-top:24px; 
      height:35px!important;
      margin-left:65px;
    }
    #forminator-module-11519 .forminator-row-last .forminator-col {
    padding-top: 17px !important;
    }

    Also here’s the other form – half way down the page on the right, just under the MP3 player.. It’s the “Questions?” etc form.. the selection choices are double the line height they should be:

    https://affordaband.co.uk/sidewinder/

    Thanks again, Stu.

    Plugin Support Nebu John – WPMU DEV Support

    (@wpmudevsupport14)

    Hi @stumur,

    but it stll isn’t justified out to the right side the same as the first box on the left side is.

    I am afraid I am not sure what you exactly meant by this. Can you please explain this a bit more with the help of a screenshot?

    It’s the “Questions?” etc form.. the selection choices are double the line height they should be

    Please try adding the following CSS and check if that helps.

    .forminator-ui.forminator-custom-form[data-design=default] .forminator-multiselect .forminator-option {
        margin: 0;
    }

    Please let us know how that goes.

    Kind Regards,
    Nebu John

    Thread Starter stumur

    (@stumur)

    Thanks NJ. I don’t know how to attach screenshots here, other than send you a Dropbox link to it:

    https://www.dropbox.com/s/ib1xlvojqet3o10/Screen%20Shot%202022-03-21%20at%206.39.28%20pm.jpg?dl=0

    In the screenshot above, you can see now that the red “SEARCH ACTS” box is justified out to the right side, at the same margin that the “Your Event Type” box on the left is. They both sit indented in, about the same from their left and right sides. Ps.. my apologies in using ‘justified’ and ‘margin’ as generic, non-coding terms.. I probably should’ve avoided the confusion of doing that! 🙂

    Regarding your second point, I’m afraid that code didn’t do anything. But even if it did, I don’t want to have to change code by asking you guys for help each time I update this plugin. My old code should’ve still worked.. it’s weird – every time you guys update the plugin to a new major one, I lodge a ticket here for you guys to help me fix misaligned boxes on one or two forms – always the ‘search acts’ red box listed above, but now this other ‘questions’ form too. I don’t know what’s going on here, but I can’t keep doing this all the time. I guess something on my end is ruining it each time, but in any case, knowing your new code hasn’t fix it, what do you suggest now? Do you want the source code exported from both forms, so you can analyse that? I really hope we can diagnose it based on my original forms I sweated over making just right – I’m a bit of a pedant for that stuff, sadly!

    Thanks, Stu.

    • This reply was modified 2 years, 6 months ago by stumur.
    Plugin Support Kris – WPMU DEV Support

    (@wpmudevsupport13)

    Hi @stumur

    Could you remove all custom CSS shared by us in this case which was added to the site so we could have a clear sky and provide a fresh one?

    Kind Regards,
    Kris

    Thread Starter stumur

    (@stumur)

    Sure.. I’ve now removed that one code line you gave me in the message above. I look forward to your reply?

    Plugin Support Kris – WPMU DEV Support

    (@wpmudevsupport13)

    Hi

    By all CSS I mean this one as well:
    https://wordpress.org/support/topic/forminator-update-has-made-forms-and-buttons-misalign/#post-15474097
    so we could have a clear sky to make a fresh one.
    I apologize for the misunderstanding.

    Kris

    Thread Starter stumur

    (@stumur)

    Oh.. Understood. Thanks Kris. All deleted. Go for it. Thanks, Stu.

    Plugin Support Amin – WPMU DEV Support

    (@wpmudev-support2)

    Hello @stumur ,

    Would you mind exporting your form https://wpmudev.com/docs/wpmu-dev-plugins/forminator/#import-export and sharing it with us as txt file or using pastebin.com ?
    I’ve checked your form and it would need some additional classes on some fields to prepare some code.

    kind regards,
    Kasia

    Thread Starter stumur

    (@stumur)

    Thread Starter stumur

    (@stumur)

    ps … that was for the home page form. Here’s the other form on the actual band pages that’s playing up, that I also spoke about earlier – in case you need that one too:

    https://www.dropbox.com/s/fd4jpejx6jsrk6g/forminator-quick-contact-form-export%20%281%29.txt?dl=0

    S.

    Plugin Support Kris – WPMU DEV Support

    (@wpmudevsupport13)

    Hi @stumur

    Thank you for all your additional data and time. Please consider those codes:

    1. This should fix the line height on the second form:
    .page-template-default #forminator-module-11388 .forminator-multiselect label {padding:2px 10px;}

    2. This is a large update for the home page form to make all fields in the same row and similar margins:

    @media all and (min-width:783px) {
    .home #forminator-module-11519 {padding:0 !important;}
    .home #forminator-module-11519 .forminator-row .forminator-col-4 {max-width:25% !important; margin:0 0 0 15px !important; padding:0;}
    .home #forminator-module-11519 .forminator-row .forminator-col-4 .forminator-field .forminator-select{width:100% !important;}
    .home #forminator-module-11519 .forminator-row .forminator-col-4 .forminator-field .forminator-input{width:90% !important;}
    .home #forminator-module-11519 .forminator-row .forminator-col-4 .forminator-field .forminator-datepicker{width:80% !important;}
    .home #forminator-module-11519 .forminator-row-last{max-width:21% !important; width:21%; margin: -71px -15px 0 0!important; float:right;}
    .home #forminator-module-11519 .forminator-row-last button {width:100%;}
    }
    
    @media all and (min-width:320px) and (max-width: 780px) {
    .home #forminator-module-11519 .forminator-row .forminator-col-4 .forminator-field .forminator-select{width:100% !important;}
    .home #forminator-module-11519 .forminator-row .forminator-col-4 .forminator-field .forminator-input{width:97% !important;}
    .home #forminator-module-11519 .forminator-row .forminator-col-4 .forminator-field .forminator-datepicker{width:92% !important;}
    }

    Kind Regards,
    Kris

    Thread Starter stumur

    (@stumur)

    OMG Kris.. you are a total champion.. those changes worked flawlessly.. thank you so much! I’m yet to figure out why the forms are different when I leap up on any major upgrade, but I’ll try to figure it out. Maybe it’s sorted for good now. Thank you!

    Thread Starter stumur

    (@stumur)

    One quick question mate before I go:

    At the top right of all my band pages, I have a green [GOT QUESTIONS?] clickable button, which links to a ‘get a quote’ form page, with the usual data capture info on it: Name, Email address, Phone, Your Message etc.

    When someone clicks this green button on that band page, and it takes them to that generic data capture form page, is there a way that the form can capture the name of the band page the person just came from, so I know which specific band they’re asking about? Or is there a better way for that ‘Got Questions’ button on each band page to be used rather than the way I’ve set it up to be a data capture page? Here’s a band page example:

    https://thelivemusicagency.com.au/anthems-live-band/

    • This reply was modified 2 years, 6 months ago by stumur.
    • This reply was modified 2 years, 6 months ago by stumur.
    • This reply was modified 2 years, 6 months ago by stumur.
Viewing 15 replies - 1 through 15 (of 22 total)
  • The topic ‘Forminator Update Has Made Forms and Buttons Misalign’ is closed to new replies.