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

Hi @stumur

I hope you’re well today and thank you for your question!

I admit, though, that I’m not entirely sure if I understand how this should work. I checked the site and I think the form currently isn’t really doing anything except for redirecting user after submission to a separate page. To be specific, it opens the /live-wedding-bands page in a new browser tab.

So the “first goal” would be to open relevant page (instead of always opening “/live-wedding-bands”) depending on what is selected in the “Your event type” drop-down select list.

Am I correct so far?

If yes, let’s start with this. To achieve this, you would want to start with editing your form and the “Your event type” select field. In “Settings” tab for that field you have four options defined, right? So now you’ll need to change “values” of these options.

– for the “Wedding Event” option set option value to “live-wedding-bands”
– for the “Corporate Event” option set option value to “live-bands-for-corporate-entertainment”
– and accordingly – for two other options set option value to related listing page slug like for these two above.

Once that’s done, apply changes, update the form and note down this select field name. I suppose it’s just {select-1} so I’ll use it in example below. Now go to the “Behavior” section of form settings and in “After submission” set redirect URL to

https://affordaband.co.uk/{select-1}

Update the form and from now on after submission it should send visitor to the relevant listing page, depending on what type of even has been selected.

However, if it comes to further “search” (so e.g. returning only results related to selected dates) that would most likely also need some additional custom coding but it also depends on how this is configured on your end.

In general, just like you used value of select field in redirect URL to redirect to proper page, you can also use values of other fields as “query vars”, for example like this:

https://affordaband.co.uk/{select-1}/?event_date={date-1}

This will then carry over selected date to that page but what to do with this date is a bit different story. You would probably need to register your own query vars on the site and then build a simple search based on this.

Alternatively, you could try going a different route. If you could e.g. re-build those “listing pages” to use “anchor links” (so links like yoursite.com/#something) you could use those in redirect links as well to “scroll to location” or “scroll to date”.

Best regards,
Adam

Adam.. you’re an utter superstar. Thank you so much for a) comprehending what I wanted correctly, and b) bothering to help me! I am so impressed. I’ve spent days on this and made no progress, so thank you so much. Could I just query you on a couple of other things though?

I’m currently trying to place the search button at the far right of the three boxes, instead of below them, which I can’t figure out how to do. And I also need to resize the three boxes to be a uniform size across the page (say 180px each with a 30px side padding?!), and place the search button beside them then, so 4 items in a single row. I’ve wasted three days on this but I can’t seem to make the three boxes identically sized and spaced, with a search button on the right hand end. Is it purely a css issue? I attempt it in Google Elements but I can’t figure it all out. Is it complex somehow, or am I just as thick as hospital crockery? ??

hi @stumur

I’m glad I could help!

As for the fields placing/sizing – Forminator uses “grid layout” that consists of up to 3 columns so that needs a bit of a “trick”.

This CSS should help you get started:

#forminator-module-11519 {
  display:block;
  clear:both;
  width:100%;
  overflow:hidden;
}
#forminator-module-11519 .forminator-row {
  float:left;
}

#forminator-module-11519 input {
  padding-top:9px;
  padding-bottom:8px;
}

#forminator-module-11519 .forminator-button-submit {
  margin-top:20px;
}

It’s not exactly what you asked for but puts all the fields (select, date picker, location field and the butotn) in line and makes them “about even” in terms of paddings and position. So that should give you a foundation for further modifications.

Note though: that’s for default “desktop” view and for mobile devices you might need to create additional CSS using CSS media query.

Best regards,
Adam

Argh.. Darn it – that media query thing really does my head in – but I’m slowly learning. But fantastic, thanks so much Adam.. I’ll insert the above CSS code and try and make that work with some amateur fumbling.. With regard to making it all mobile responsive with that media thingy though, would the below be all I need to add to your above code, or am I way off? I seem to be getting errors just adding it on its own – perhaps as that exact code is already in the extra css area for another unrelated command? Think I’d be better off studying Latin at this point.. ?? :

@media only screen and (max-width: 800px)

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

Sorry mate, I just updated the app by .1v and it’s now made the boxes go all weird. Can you tell me what’s happening there, I’m meant to update?

Hi @stumur

As for media queries:

Basically, you just need to repeat the code that I gave you multiple times (for different screen resolutions) in each “copy” making some adjustments regarding e.g. paddings and margins. In essence:

my-code here /* this is default for desktop, for screen wider than 800px */

@media only screen and (max-width:800px) {

my-code-but-adjusted-here /* this is for screens up to 800px wide */

}

@media only screen and (max-width: 400px) {

my-code-but-modified-even-more /* but this is for screens smaller than 401px of width */

}

I believe you get the idea.

As for update. You mean that you have updated Forminator, right? Where there any additional updates like e.g. theme update? If there’s any cache on site/server, did you try to clear it up?

Best regards,
Adam

Hey Adam! Thanks a lot for replying and I’m sorry to be a pest. I get all what you’re saying (sort of), but this is just defeating me – I’ve been a whole week now in Google Elements just trying to thrash out a way to make all those 4 boxes space evenly across that one row, and I’m no closer to when I started. I’m adjusting all sorts of pixel numbers for paddings and margins and div sizes.. I’m a rank beginner, but I’m almost sure people who know how to do this don’t bother with any of that microsurgery or maths calculations to work out the box sizes and spaces in between to spread evenly across the 890px wide div. Is there a simple way to slightly indent the line on both ends, and make the three boxes (say) 180px or 200px wide, with a smaller (say 140px) wide search button on the end, all spaced apart by say 30 or 40px? I’d really appreciate anything you can offer.

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

Hi @stumur

I’d love to help you more with it but it’s really going more into “custom development” area. I think there’s already some changed applied to original code that I shared (other than what I suggested) and it makes it a bit more “complex” as it’d be too easy to mess things up by adding more and more CSS.

It would be best to start with a completely clear/default start – so with all the additional code (related to that form) that’s been already added there. I’ll be happy to give it another shot if you want me to (though please note that I might not be able to do it “immediately” so I’d appreciate some patience on that) but I’d need to know it’s fresh start – all the code is removed.

Or, alternatively, you could export the form from site and share it with me and I would then put it on my own site and come up with “generic” CSS that would do that. If there’d be anything “broken” after adding it to your site we’d at least know that it’s theme affecting it.

Kind regards,
Adam

Thanks very much Adam. Days on and I still can’t figure this out, and I’d really appreciate your assistance as I can’t move forward til I get this working correctly. I’m not sure how to send you the form’s exported code, so I hope it’s okay to paste it here.. I can’t find a PM thing to message you anywhere..!:

[Moderated: Large code excerpt removed per forum guidelines. Please use Pastebin and Gist and copy your code there. Then return here and paste the link to that here.]

• This reply was modified 4 years, 8 months ago by stumur.
• This reply was modified 4 years, 8 months ago by t-p.

I’m awfully sorry.. I hope this is right?:

https://github.com/StuMur/StuMur/blob/master/Align%20Forminator%20Boxes

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

Did this help, Adam?

Hello @stumur ,

Please try this code:

#forminator-module-11519 {
  display:block;
  clear:both;
  overflow:hidden;
	min-width: 890px;
}
#forminator-module-11519 .forminator-row {
  float:left;
}

#forminator-module-11519 .forminator-col {padding-right: 20px;}

#forminator-module-11519 input {
  padding-top:9px;
  padding-bottom:8px;
}

#forminator-module-11519 .forminator-button-submit {
  margin-top:20px;
}

#forminator-module-11519 .forminator-field, 
#forminator-module-11519 .forminator-field .forminator-input{width: 180px;}

#forminator-module-11519 .forminator-row + .forminator-row {margin-left: 20px}

`

kind regards,
Kasia

Hello @stumur

I hope you are doing well!

We haven’t heard back from you for a while now so we’ve marked this ticket as resolved. If you do have any followup questions or require further assistance feel free to reopen it and let us know here.

Kind regards,
Nastia

Hi Guys,

Sorry for the delay in replying.. Coronavirus obliterating things for us atm. No – I’m afraid this code hasn’t resolved the centering and box sizes etc for me, no surprise though as I’m a bit of a n0ob to all this stuff. I’ve tried quite a few variations of your code and I’m yet to have it cetnre and look right. I’m at the point where I think I might need to look at other alternatives, or hire someone, which I can’t afford. Thank you for your replies. Any suggs of course I’m all ears! ??

Hello @stumur ,

Where exactly have you added the last code we provided? I don’t see that exact code in the source of your site.
Can you try adding it again, exactly as I provided, so I can check why it is not working on your site? It was working on mine.

kind regards,
Kasia