Redirect to URL on Submit

Hi.

I have a form that I would like to send the user to a page based on form radio selection.

Right now, we have the form configured to show the information (with a specific link) once the radio selection is made. There are 7 options, each of which has a different set of info and specific link for the user to visit. The problem is that the user goes to the link and doesn't return to the form the submit. So, we would like them to have access to the link AFTER the form is submitted.

Any help with this will be greatly appreciated.

The form / radio button should not show the link, use a descriptive text instead.
In the form end_page Actions section, create a Basics/Redirect action for each link and use the Data/Run Conditions behavior to check if the radio button belonging to the url is checked.
Hope this helps.
Nico

Hi Nico...

The links are not "list" with the radio options and I didn't say that it did. I said when one is selected, the specific info/link "shows" on the form.

Anyways, thank you very much for the help. I truly appreciate it and I will give it a try shortly..

Hi Nico,

I tried your suggestion, but it didn't work. It returns an error saying that the Field 'membership_type' does have a default value.

Error message:
https://pasteboard.co/1F99qgWtDvBc.jpg


Redirect Action configuration:
https://pasteboard.co/KMrI1vjK0Mr6.jpg
Note: membership_teir is the field name. Also, I tried == as well as matches and the same error.

Any idea on how I could resolve this?

if you want the user to access the link AFTER the form is submitted then add the link inside HTML view at the last page

or redirect at the last page if you want a redirect!

Hi Max,

Thanks for helping. The info (with a link) is specific to a selection from a radio group and there are about 8 different options, each with different info and links. So, I need only the specific info/link to show after they submit the form based in the the user's selection.

Originally, we had it that the info with the corresponding link display on in the form one they make a selection, but the problem was that they go to the link and don't return to submit the form. We need them to submit the form, but as usual, users don't follow directions.

Optionally, and that if it's not too difficult, it could work if the user could go to the link while still in the form and then return to the form once they're done with the link. Like in a frame or popup with a "return to complete the form" link to close it. Is this possible?

Many thanks in advance.

Winchester

One solution to this problem could be to use a script that captures the form data and redirects the user to the appropriate link after the form is submitted. This way, the user will be able to access the link without leaving the form page.

Here's an example of how this could be done:

Add an ID to your form and to each of the radio options.
Use JavaScript to capture the selected option and store it in a variable.
Use the same JavaScript code to redirect the user to the appropriate link after the form is submitted.
Here's a sample code:

<form id="myForm" method="POST">
  <input type="radio" name="myOption" value="option1" id="option1">
  <label for="option1">Option 1</label>
  
  <input type="radio" name="myOption" value="option2" id="option2">
  <label for="option2">Option 2</label>
  
  <!-- Add the rest of the radio options here -->
  
  <button type="submit">Submit</button>
</form>

<script>
  const form = document.getElementById('myForm');
  form.addEventListener('submit', function(event) {
    event.preventDefault(); // Prevent the form from submitting
    
    const selectedOption = form.querySelector('input[name="myOption"]:checked').value;
    
    switch(selectedOption) {
      case 'option1':
        window.location.href = 'http://example.com/option1';
        break;
      case 'option2':
        window.location.href = 'http://example.com/option2';
        break;
      // Add the rest of the cases here
    }
  });
</script>

This script will capture the selected radio option and redirect the user to the appropriate link after the form is submitted. You can customize the link URLs and the radio options to fit your specific needs.

I hope this helps!

Does anyone know how to do this? Please, any help will be greatly appreciated.

I just need to know how to make the redirect action display pages, specific to the a radio group selection within the form, after the form is submitted.

Trying to understand what your workflow is like.

So you start with a form with radio selection of 8 options. When a user select an option, they get a link to read some info. You want them to read that info, then return to the form to submit it. Is that right so far?

If so, why not on selecting an option, display the info within the form itself or in a modal? So the user doesn't leave the form at all. Unless your link is on an external site and you need them to go to that link to read.

Or what about making the form multiple sequential pages?

Page 1 - select option
Page 2 - based on selected option, display corresponding info
Page 3 - rest of the form to submit

Please correct me if I misunderstood what you're trying to achieve.

You can use an HTML view with PHP enabled on the last page and switch the link to be shown using PHP

or multiple HTML views and use the "Run conditions" behavior

@Zubairsk

For some reason, your post didn't show up in the thread until after my last post. Thank you. I will give your method a try.

One thing, though. Where do I put the js codes? While I can understand the sample code you wrote and will be able to customize it to my needs, I'm not a coder, so I may have more questions on this.

Again, thank you very much for this.

Winchester

@webbusteruk,

The form is currently a 2 page form (2 pages + end_page), but it will be reduced to a single page form (1 page + end_page) with this revision.

The radio group is the very first form element on the page which allows the user to select the membership type they would like to choose. The rest of the form is really to collect details (name, email, phone number, address, etc.).

You can take a look at the current form here: https://jcdt.org.jm/get-involved/join-fbm?view=form

You can look at the one I'm working on to update here: https://jcdt.org.jm/index.php?Itemid=211

Note: in the currently published one, you can see where the payment info changes depending on what is selected from the radio group. The issue with it, though is that the users are not returning to submit the form after they visit the payment link, so we don't get their details.

So, now I'm trying to remedy this by displaying the payment info AFTER they've submitted their form with their details.

I tried using a modal, but the payment links will not load in iframes. It's unfortunate, but I think I understand the reason why Fygaro doesn't allow this - for security reasons I'm thinking.

I tried vdneut's method, using redirect actions, but the result page returns an error (see screenshots below)
https://pasteboard.co/1F99qgWtDvBc.jpg

With vdneut's method, I created an article for each of the payment info and then created a redirect for each using Run Condition (see screenshot below), but as stated above, I get the error message.
https://pasteboard.co/KMrI1vjK0Mr6.jpg

I hope this helps to explain my situation and give you a clearer view on what I'm trying to achieve. Zubairsk's method seems a bit complicate, but I'm going to give it a try. But, if you know of an easier way, please feel free to lay it out for me.

Thank you, Max, vdneut, and Zubbairsk for the help. I sincerely appreciate it.

Winchester

Ah with the forms I can understand what you want to do now. Yeah payment gateways should never be allowed in an iframe, otherwise this allows any website to easily disguise themselves to scam users. As the payment page is an external website, there's no way to redirect them back after paying - the only way you can do this is if you can host the payment gateway on your website (some Joomla plugins allow you to do so, eg accept Paypal payments).

Also some payment gateways actually let you input which URL to go to after payment is complete, but I'm not familiar with Fygaro to know whether they can do this.

So what I would do in your situation is:

Page 1: User details, including radio options
Page 2: Payment link, depending on the radio option selected. Add some text to tell them to upload the payment confirmation once they're done. (You can use Save Data on this page, so even if they don't go to the last page you still have their details.)
Page 3: Save Data for the payment confirmation file.

Basically on Page 2, you use {data:radios} to lookup the radio option selected, and use Run Conditions ({data:radios} == x) on different HTML blocks to display the correct payment link. I've uploaded a very simple example CF7 form to illustrate this. You don't need JS code to do this, CF7 can already do this natively.

https://filetransfer.io/data-package/fZvzvlfu#link

Chye

Hi Chye,

Thank you very much for this. I will give this a try.

One thing,, though. Are you suggesting that I keep the multi-page form and use the 2nd for the payment info? Because, I think they can work.

I think that would be the way I do it, as once they submit the first page you'll get their details saved so everyone who pays (or not) will have their data captured. Second page is to capture the payment confirmation file, but this can always be chased up later (eg reminder email) as you'll already have their details.

For data protection, you should tell them somewhere that clicking next to Page 2 means they are submitting their details.

Unless Fygaro allows you to redirect back to the form once payment is complete? Some payment gateways (eg Paypal) has a "Redirect after payment" feature though, however that way they could still pay and not complete the form..

Ok.. It sounds like a good idea. I'll give that a try. One thing, though, the only issue I'm anticipating is that the last time I tried, Chronoform wasn't allowing me to set up events across pages.

As for Fygaro. The info/link is really just an html page with a "Pay Now" button. The button opens up in a new page (_blank) and works fine.

Thanks. I'll let you know the outcome.

@Chye: Thank you so much. It worked beautifully.

@Everyone: As for the errors before from other suggested solutions. It seems that issue was from me placing the actions or scripts on the 1st page. That was my bad. I haven't tried the ones before to see if they would still work, but given this discovery, I'm sure if I had placed the actions/scripts correctly, I wouldn't have had those errors. My bad.

Now, there are some other minor issues that I'd like to resolve on the form, but that's for another thread.

Thanks to everyone that helped. I learned a great deal more about Chronoform while fixing my issues, and I truly appreciate it.

Winchester

Ok. I think I spoke too soon. It worked great in Admin preview. But it refuses to load in frontend preview and when published, it doesn't reach the 2nd page at all. A ChronoForm 7 bug in J4, perhaps?

Did you have the draft version in the link you posted above?

If so it seems that from Page 1, clicking next goes to End page. Have you changed your Form type to Sequential? And the link for the Next button points to Page 2?

Hi Chye.

I just double checked. No, the Page One "Next" button is configured to go to Page Two. (see attached screenshot)

https://pasteboard.co/OwrWGNVLQsTF.jpg

And Page Two "Submit" button is set to the "end_page". (see attached screenshot)

https://pasteboard.co/T2ZVzfLtqB5M.jpg

Also, the form is still set to "sequential".

I should note that the Frontend view link take me to the website's home page. This has been the case since the Joomla 4.3.0 update. I've since updated to 4.3.1, hoping this would fix it, but it didn't. I'm thinking the update changed something that broke CF7. Before, in order to show someone the draft of a CF7 form, I could just send them the link from the "frontend view", but I had to place it in a menu item for it to display at all. Now, it turns out that the "next" button, takes you to the home page instead of the actual "next page".

Winchester