How do I modify my code to redirect to a confirmation page upon form submission?

Ask the community
,
1

Hello, I am working on the site https://sabrakrock.wixsite.com/maxswim

I am using a 3rd party email form from Listrak to collect email addresses using an iframe HTML widget. Upon pressing “sign up” on the email form, my desire is that the form would redirect to the 2nd page on the website which gives a confirmation message:

https://sabrakrock.wixsite.com/maxswim/confirmation

Currently, when an email address is entered and the person presses “sign up”, nothing happens. A developer wrote the attached code, but it is not working. How should we write this to allow the redirect properly?

2

Before we can try to assist you, please format your forum post correctly by inserting the code into the code block option.

3

Okay… but it’s super long!

    <style>

        .email_form{

            padding: 0px 10px;

            max-width: 488.746667px;

            margin: 0px auto;

        }

        .email_form form{

            position: relative;

        }

        .email_form .email_inp{

            width: 100%;

border-radius:0px !important;

            background: #fff;

-webkit-appearance: none;

            border: 0px;

            padding: 6px 0px 10px 10px;

            color: #000;

            font-weight: 700;

            box-sizing: border-box;

            font-size: 15px;

            line-height: 22.78pt;

            font-family: sans-serif;   

        }

        .email_form .email_inp::placeholder{

            color: #f93549 !important;

        }

        .email_form .email_inp::-ms-input-placeholder{

            color: #f93549 !important;

        }

        .email_form .email_inp:-ms-input-placeholder{

            color: #f93549 !important;

        }

        .email_form .submit_btn{



            position: absolute;

            top: 0px;

            background: #e80096;

            border: none;

-webkit-appearance: none;

border-radius:0px !important;

            cursor: pointer;

            color: #fff;

            font-size: 10.99pt;

    padding: 14.8px 11px;

            text-transform: uppercase;

            font-weight: 700;

            font-family: sans-serif;

            right: -3px;

        }

 

    </style>

    <div class="email_form">

        <form method="post" action="https://enews.everythingbutwater.com/q/F_-MUdtOMEB-oGt9cuLPBfaC_M8yaUrI2xDGNqV73Na_0I5KXs0EPH6Sr" accept-charset="UTF-8">

            <input type="hidden" name="crvs" value="bZaZvd4tWDXjS8xl8gl1vMZ2G1IqP1nUm7jI7__bOQx5QNIXKvjExQcZNIJABpS_hd2n6uHDSQcP77su-sD5m8QZ9bdBEdspJeaaANwvPyQ">

            <input type="text" name="email" size="40" maxlength="100" value="" placeholder="*Please enter a valid email address" class="email_inp">

            <input type="text" name="NameF" size="10" maxlength="10" value="" tabindex="-1" autocomplete="off" style="float: left !important; position:absolute !important; left:-9000px !important; top: -9000px !important;">

            <input type="text" name="NameL" size="10" maxlength="10" value="" tabindex="-1" autocomplete="off" style="float: left !important; position:absolute !important; left:-9000px !important; top: -9000px !important;">

            <input type="text" name="Comment" size="10" maxlength="10" value="" tabindex="-1" autocomplete="off" style="float: left !important; position:absolute !important; left:-9000px !important; top: -9000px !important;">

            <input type="hidden" name="CheckBox.Source.MaxSwim.com" value="on">

            <input type="submit" id="submit" value="Sign Up" class="submit_btn">

            <a href="https://sabrakrock.wixsite.com/maxswim/confirmation" class="h_btnn"> </a>

        </form>    </div>



<script  src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<script>

	$(window).on("load",function(){

	$(".email_form #submit").on("click",function(){

		console.log("o232k");

		$("a.h_btnn").click();

	});

	});

</script>
4

@rodney-young-jr alright. I am assuming we need to place this part in the onReady of the page. I could be wrong, but i am going in blind here.

$(window).on("load",function(){

$(".email_form #submit").on("click",function(){
console.log("o232k");
$("a.h_btnn").click();

});
});
5

I may have entered it wrong, but it’s still not working - how do I properly enter it? I’m new to corvid

6

That has to all go into an html iframe on your page as it is.
https://help.listrak.com/en/articles/1523235-using-html-form-code

    <style>
        .email_form{
            padding: 0px 10px;
            max-width: 488.746667px;
            margin: 0px auto;
        }
        .email_form form{
            position: relative;
        }
        .email_form .email_inp{
            width: 100%;
border-radius:0px !important;
            background: #fff;
-webkit-appearance: none;
            border: 0px;
            padding: 6px 0px 10px 10px;
            color: #000;
            font-weight: 700;
            box-sizing: border-box;
            font-size: 15px;
            line-height: 22.78pt;
            font-family: sans-serif;   
        }
        .email_form .email_inp::placeholder{
            color: #f93549 !important;
        }
        .email_form .email_inp::-ms-input-placeholder{
            color: #f93549 !important;
        }
        .email_form .email_inp:-ms-input-placeholder{
            color: #f93549 !important;
        }
        .email_form .submit_btn{

            position: absolute;
            top: 0px;
            background: #e80096;
            border: none;
-webkit-appearance: none;
border-radius:0px !important;
            cursor: pointer;
            color: #fff;
            font-size: 10.99pt;
    padding: 14.8px 11px;
            text-transform: uppercase;
            font-weight: 700;
            font-family: sans-serif;
            right: -3px;
        }
 
    </style>
    <div class="email_form">
        <form method="post" action="https://enews.everythingbutwater.com/q/F_-MUdtOMEB-oGt9cuLPBfaC_M8yaUrI2xDGNqV73Na_0I5KXs0EPH6Sr" accept-charset="UTF-8">
            <input type="hidden" name="crvs" value="bZaZvd4tWDXjS8xl8gl1vMZ2G1IqP1nUm7jI7__bOQx5QNIXKvjExQcZNIJABpS_hd2n6uHDSQcP77su-sD5m8QZ9bdBEdspJeaaANwvPyQ">
            <input type="text" name="email" size="40" maxlength="100" value="" placeholder="*Please enter a valid email address" class="email_inp">
            <input type="text" name="NameF" size="10" maxlength="10" value="" tabindex="-1" autocomplete="off" style="float: left !important; position:absolute !important; left:-9000px !important; top: -9000px !important;">
            <input type="text" name="NameL" size="10" maxlength="10" value="" tabindex="-1" autocomplete="off" style="float: left !important; position:absolute !important; left:-9000px !important; top: -9000px !important;">
            <input type="text" name="Comment" size="10" maxlength="10" value="" tabindex="-1" autocomplete="off" style="float: left !important; position:absolute !important; left:-9000px !important; top: -9000px !important;">
            <input type="hidden" name="CheckBox.Source.MaxSwim.com" value="on">
            <input type="submit" id="submit" value="Sign Up" class="submit_btn">
            <a href="https://sabrakrock.wixsite.com/maxswim/confirmation" class="h_btnn"> </a>
        </form>    </div>

<script  src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
	$(window).on("load",function(){
	$(".email_form #submit").on("click",function(){
		console.log("o232k");
		$("a.h_btnn").click();
	});
	});
</script>

However, as Wix does not provide support for html code that comes from third party providers as they have not had the chance to test it fully works etc.

If you are still having issues with this, then you really need to be going back to Listrak own support and asking them how to integrate it into Wix, however you should just be able to follow the html option and it should all work for you.

To be perfectly honest here, you would be much better and more secure working with their API instead and using Wix Fetch or Wix HTTP Functions.

You can see an example of exposing your site here.
https://www.wix.com/corvid/forum/corvid-tips-and-updates/example-myapi-and-myapiclient

7

Hello - thanks for all the resources! I tried your modified code and it did not work, so what you’re saying is that I need to work with Listrak’s API instead using Wix Fetch or Wix HTTP functions. I appreciate the links, but I am very new to corvid and coding, so I have no idea where to start with using those functions. What’s the best next step?

8

If you want to carry on working with the html form from them, then you will need to make sure that you are using a Wix site with a premium plan to get this to fully work.

At the moment you are using the free Wix website, hence why you have Wix in your name still.
https://sabrakrock.wixsite.com/maxswim/confirmation

If you check the Wix link I posted about before about using iframes, you will see that not everything works with html iframes as some features of them are limited for free users.
https://support.wix.com/en/article/using-iframes-to-display-visible-content-on-your-site

You would be best to check with Listrak and see if their html code is being blocked by Wix will you are just using the free option from Wix, if they can verify that it is being blocked due to the limitations put on it by Wix, then you can only fix it by going with a paid plan from Wix.

9

Awesome support from the community. Thanks team! :slight_smile: Closing Thread.