Hello everyone,
I need some help solving a use case in Blocs. Have an Option Select (dropdown) with a few values (ie: “Item 01”, “Item 02”, etc…) and a submit button (ie: “Navigate to Item”) next to it. Is it possible for me to link the two up?
So for example, when a user selects “Item 02” and press on the “Navigate to Item” button it will go to whatever URL set for “Item 02”?
Do I have to use a custom code block for this?
Thanks
I don’t think we have enough information to advise you correctly. A dropdown selector in a form will simply send the users selection as part of the form submission. If, however, you want the user to be directed to a specific page of your website AFTER submitting the form, based on their selection, you will probably have to have a custom form script that can read the selection and divert users based on that selection. Maybe if you can give an example of what you expect to happen when someone makes a selection and then submits the form, we may get a better idea of how the requirement can be dealt with.
Hey @hendon52, I want the user to be directed to a specific url after submitting the form. For example: If the user selects “Item 01” which has a value of “blocsapp.com”, after selecting it from the dropdown and pressing on the button, it takes the user to blocsapp.com
I’m assuming you also want the form to submit results to your email IN ADDITION to diverting the user to the relevant page. If this is the case you have a couple of options. The first will be to deploy a custom form script that will redirect the user after form submission based on the selection made in the selector box. This can be a little complicated if you’re not familiar with PHP coding. Remember, that redirects are handle by the form script AFTER receipt of the form. As far as I know there isn’t an option to redirect AND submit in a single operation in any form processing application - the form has to be received by the script and then read by the processing application. It can then be programmed to take further action based on the contents of the form.
The second option is far easier to implement and would probably be easier for your users (particularly if they use mobile devices)
Instead of using a drop-down selector within the form, present users with a choice BEFORE taking them to a form. In the example below. I’ve created selection buttons that users can choose before being taken to the enquiry form:
The buttons are set to open a modal containing a product specific enquiry form. For example, when Option 1 is selected, The form pops up in a modal, like this.
The form in the modal can be be set to redirect users to a specific page in your website, and each can have a different message header that specifies the product of interest.
You can now duplicate the modal for every option and edit the form properties on each version to go to a different success page and to have a different subject line.
To the end user, it looks like you have one form, but behind the scenes, each of the forms will have it’s own properties that will redirect upon submission.
If you use this type of structure, be sure to give the modals and the forms unique ID’s so that it will be easier for you to identify the components when setting up links and editing properties etc.
To make the selector and forms more interesting, you could use small product images as the links to trigger the modals, and you could use the same images as a background to the header in each Modal. This acts as sort of reinforcement that the user has selected the right option. It would look something like this (only set up one button in this example)
@hendon52 thank you. This is great!. I will definitely save for future use. This use case is a lot simpler though. I don’t need to get the form results via email. Maybe using a form is not the right path here?
Just wanted to be able to redirect the user to an external url based on a selection in the dropdown after pressing the button. Maybe I need a script to get the value of the selected item and then bind the value to the button onClick state?
Well, that’s a whole lot simpler to achieve. Here is the code you would add to your web page through a code bric. What you are creating is a simple drop-down menu rather than a drop-down form component.
<select name ='menu1' id ='menu1' class = 'menu1' style = "color: #006699;font-family: Helvetica;font-size: 18px;font-style: normal;background-color: #FFFFFF;padding: 10px">
<option value = "Select an Option and click Submit">Select an Option and click Submit</option>
<option value = "https://apple.com">Option 1</option>
<option value = "https://google.com">Option 2</option>
</select>
<input type = 'button' id = 'btnmenu1' class = 'btnmenu1' style = "color: #FFFFFF;font-family: Helvetica;font-size: 18px;font-style: normal;background-color: #006699;padding: 10px;border-style: solid;border-color: #FFFFFF;cursor: pointer" onmouseover = "this.style.backgroundColor = '#008FD6'" onmouseout = "this.style.backgroundColor = '#006699'" onclick = 'window.open(document.getElementById("menu1").options[document.getElementById("menu1").selectedIndex].value)' value = 'Submit' />
You can style it how you like and add as many options and url’s as needed. Here is what it looks like in a page:
Awesome! Thank You!
Hey @hendon52,
First of all, thank you for your help on this. I did ran into another issue and wonder if maybe you or anyone else here can help. The onclick script doesn’t work in safari for some reason. Any idea?
@rongvang This is a bit of an oddball quirk in mobile safari. I’ve not tried it myself because I don’t have mobile safari to test it on, but one solution that seems to work for others is placing the code into a div, like this:
<div onclick="void(0);">
<select name ='menu1' id ='menu1' class = 'menu1' style = "color: #006699;font-family: Helvetica;font-size: 18px;font-style: normal;background-color: #FFFFFF;padding: 10px">
<option value = "Select an Option and click Submit">Select an Option and click Submit</option>
<option value = "https://apple.com">Option 1</option>
<option value = "https://google.com">Option 2</option>
</select>
<input type = 'button' id = 'btnmenu1' class = 'btnmenu1' style = "color: #FFFFFF;font-family: Helvetica;font-size: 18px;font-style: normal;background-color: #006699;padding: 10px;border-style: solid;border-color: #FFFFFF;cursor: pointer" onmouseover = "this.style.backgroundColor = '#008FD6'" onmouseout = "this.style.backgroundColor = '#006699'" onclick = 'window.open(document.getElementById("menu1").options[document.getElementById("menu1").selectedIndex].value)' value = 'Submit' />
</div>
It has something to do with the fact that mobile safari seems to get confused with onclick events. It doesn’t seem to be able to differentiate between a touch and tap. It’s that first line that appears to be the key. Give it a try and see if it does the trick
Thank You!