Search Bar Form to Auto Load Results on New Web Page?

Thanks Kasia. I’ve just now done as you ask. I hope you can figure out why it’s not right. I’m having no luck! ??

Hi @stumur

Thanks for response!

I checked the site again. If you add this code “as is”, without removing any existing CSS from the site and adding any other related to the form and making changes in the form, it should do the trick for regular desktop views:

#forminator-module-11519 input,
#forminator-module-11519 button {
  max-width:150px;
}

#forminator-module-11519 button {
  background:transparent;
  margin-top:-3px!important;
}

#forminator-module-11519 #submit {
  margin-top:20px; 
  height:35px!important;
  margin-left:-20px;
}

It is working when tested in browser, though you might want to slightly (just slightly) adjust the pixel values in it to suit your needs – experimentally.

If it’s working then you can use media queries to repeat the same code but using different pixel values there for other screen resolutions.

If it doesn’t work after being added to the site then it would mean that there’s something more on the site that affects it but please note that this really goes far into custom work as Forminator does not support 4-column layout out of the box yet.

It will support more flexible layouts in future but it’s not yet so this is a fully custom workaround and I’m afraid (and I’m very sorry to say that ) that we can’t go any further with custom solution. I have just tested this code with your site by adding it via my browser and it should do the work. For any further customization you might want to consider hiring a developer or reverting to standard layouts supported by plugin out of the box up until more flexible grid/layout support is officially added.

Kind regards,
Adam

Adam, I’m so impressed by your help so far.. really, thanks very much. I can’t get the submit button to sit at the right end of the first line after the other three boxes.. this seems to be a bigger issue than just resizingthe boxes evenly. As you’ve mentioned you’ve tested this 4 element layout on a single line on your site and it seems to be working fine, is it possible to send me a screenshot of yours, or even the code you’re using on it so I can cheat a little and work out by elimination where mine’s not working correctly?

• This reply was modified 4 years, 4 months ago by stumur.

Hi @stumur

Hope you are doing well.

Could you give a try on this CSS as extra CSS?

This will work with the already shared CSS, but feel free to make some small modification on both.

https://monosnap.com/file/45gGetV7i4lAeKtHRYZgGnKQU1BwDl

/** Desktop CSS **/
@media screen and (min-width: 768px){
    #forminator-module-11519{
    display: flex;
    justify-content: space-between;
}

    #forminator-module-11519 #forminator-field-cityaddress-1 + .forminator-error-message,
    #forminator-module-11519 #forminator-field-cityaddress-1{
        margin-left: 30px;
    }
}

Best Regards
Patrick Freitas

Omg. Patrick – thank you so much – you are a Godsend! That looks astounding and has solved so much for me.. thank you!, the only thing I can’t figure out is why the left drop down menu with the 4 options makes the check now button disappear if you select option 3 or 4.. Options 1 and 2 work fine though. Might you have any thoughts on what would be causing the check now button to disappear?

Scratch that – I think I worked it out! ?? Thanks guys for all your help.. Amazing!

Hi @stumur

I hope you are doing well.

I’m happy to hear you could fix this.

Let us know if you need any further help.
Best Regards
Patrick Freitas

Hey Patrick,

I’m so sorry to trouble you again. If you get a chance, could you please let me know why the three Forminator search boxes on my home page beside the search button refuse to all be the same width? I’ve tried to make them all the same size/width and space evenly, but it’s way beyond me I’m afraid. And also, when I view the home page on different sized screens, those boxes all go weird widths independently of each other and misalign everything, except for the left box, which is a dropdown selection box – it just stays the same width and doesn’t react if I slowly bring the right side of the screen in. Can they all be the same size width, AND resize equally together when a screen size change happens? My site is mobile responsive and everything else responds fine to different screen widths, so it must be my Forminator code that’s wonky, I presume? I’m so sorry to bother you, but after weeks of studying what I can, it’s still way over my head. ??

Thank you,
Stu

• This reply was modified 4 years, 3 months ago by stumur.
• This reply was modified 4 years, 3 months ago by stumur.

Hi @stumur

I’m glad to know that Patrick was was able to help you solve the main issue!

As for the sizes of those fields – I’ve visited the site again but i’m not sure if I’m following you.

For as long as there’s a “three column” layout of those fields, they seem to be nicely scaling down and up. At some point they switch to “one column” layout as the width goes down to “mobile area” – but I’d expect it as keeping them all three side by side on smaller screens could make the form essentially unusable in many cases.

What am I missing?

Kind regards,
Adam

Hi Adam. Sorry – I didn’t explain it very well! ??

Essentially, viewing the home page on the DESKTOP, those three search boxes are all slightly different widths to begin with, which looks poor to me, so I hoped to resolve that first.. the gaps between are equidistant, so that part is good! When I measure the gaps in Google Inspect Element, they measure 167, 213 and 187px each from left box to right. I’m not too fussed which one is the constant, but if they were all, say, 167px, it would look consistent and uniform. Anyway, then, when I slide the screen in from the right side, it all re-draws and re-sizes – of course as it’s meant to, but only the first box stays centered as it moves and resizes, but the other two don’t react the same way.

I also can’t get the “Your Location” text to align left with its box as the other two correctly do. I hope this is more helpful? I appreciate your input greatly – thank you.

S.

Hi @stumur

I hope you are doing well.

You can try this CSS:

/** Desktop CSS **/
@media screen and (min-width: 768px){
#forminator-module-11519 .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;
}

}

However, I’m afraid this is getting too many CSS customizations that can conflict with each other, so we must be careful about adding more code.

Best Regards
Patrick Freitas

That did it.. It’s now perfect. Thanks again Patrick. I can’t believe how good you guys are! ??

Hey Guys. I’m so impressed by Forminator that I’ve attempted to import a form from my previous site and use it on my new site (https://thelivemusicagency.affordaband.co.uk/). I need it to be in two places – both running horizontally across the full screen width. But as you can see, on both instances on my homepage, one is vertical unfortunately, and the other is horizontal, but the submit button doesn’t appear on the right hand end to make it full width. I need it to be the same as my AffordaBand.co.uk site’s one – I just exported that form and thought it would appear the same here. Can you see what’s wrong? Sorry to bother you with this!

Kindest Regards,
Stu M

• This reply was modified 3 years, 12 months ago by stumur.

Edit: Sorry guys – I think I’ve sorted them both! I’m improving! ??

Guys, could you pls let me know what I’m doing wrong with the search form I have sitting in my top slider area over the photo? I can’t get it to go horizontally across the image, like the other form below it does. I don’t know why, as they’re the same exact form, just duplicated and with a different file shortcode.. otherwise identical. https://thelivemusicagency.affordaband.co.uk/