open an iframe when I click on a input submit

Without FancyBox you could simply change the first line of your form code to include target="_blank" which should open the external form page in a new tab.

But if you want to use a lightbox modal window, then you could simply do this:

1. Activate the iFrame option on your Settings > Media admin page;
2. Remove the subscription form on your site;
3. Replace it with a simple link:

<a href="https://velodrombiketours.ip-zone.com/ccm/subscribe/index/form/" class="fancybox-iframe myButton">Suscribir</a>

4. Then add some button style rules to your themes style.css or via the Jetpack Custom CSS module like:

.myButton {
	-moz-box-shadow:inset 0px 1px 0px 0px #54a3f7;
	-webkit-box-shadow:inset 0px 1px 0px 0px #54a3f7;
	box-shadow:inset 0px 1px 0px 0px #54a3f7;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #007dc1), color-stop(1, #0061a7));
	background:-moz-linear-gradient(top, #007dc1 5%, #0061a7 100%);
	background:-webkit-linear-gradient(top, #007dc1 5%, #0061a7 100%);
	background:-o-linear-gradient(top, #007dc1 5%, #0061a7 100%);
	background:-ms-linear-gradient(top, #007dc1 5%, #0061a7 100%);
	background:linear-gradient(to bottom, #007dc1 5%, #0061a7 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#007dc1', endColorstr='#0061a7',GradientType=0);
	background-color:#007dc1;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	border:1px solid #124d77;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:arial;
	font-size:13px;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #154682;
}
.myButton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0061a7), color-stop(1, #007dc1));
	background:-moz-linear-gradient(top, #0061a7 5%, #007dc1 100%);
	background:-webkit-linear-gradient(top, #0061a7 5%, #007dc1 100%);
	background:-o-linear-gradient(top, #0061a7 5%, #007dc1 100%);
	background:-ms-linear-gradient(top, #0061a7 5%, #007dc1 100%);
	background:linear-gradient(to bottom, #0061a7 5%, #007dc1 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0061a7', endColorstr='#007dc1',GradientType=0);
	background-color:#0061a7;
}
.myButton:active {
	position:relative;
	top:1px;
}

Note that these CSS style rules are an example. They were generated by https://www.bestcssbuttongenerator.com/ and can be replaced by anything you like to fit your site style.

Hope that helps ??

Hi!
Thanks for your answer!
I can’t replace the <form action="url"> for a <a href="url">. This form is given by MailRelay and it has to be like it is.
My question is if I can configure in a js file the url in <form action> to be opened as a iframe with Fancybox.

I already wrote a line in js to force some images to open with Fancybox because they were openend with Prettyphoto by default (because Visual Composer), so I guess what I’m looking for, is something similar but with <form action> instead:

$(".wpb_text_column a[href$='.jpg'],.wpb_text_column a[href$='.png'],.wpb_text_column a[href$='.gif']").fancybox();

I do not think binding $.fancybox to a form element will work but you could try…

Give the form an ID like:

<form id="ipzone" enctype="application/x-www-form-urlencoded" action="https://velodrombiketours.ip-zone.com/ccm/subscribe/index/form/" method="post">
...

Then use script like this:

$('form#ipzone').fancybox({'type':'iframe'});

But I’d be very surprised if this works at all. So please let me know ??

Nop, it doesn’t work.

I’ve written this code and it actually opens a window with fancybox… but although success message appears, data aren’t sent, no idea why:

jQuery(document).ready(function() {
    $('#myform #submit').on("click", function (e) {
        e.preventDefault(); // avoids calling success.php from the link
        $.ajax({
            type: "POST",
            cache: false,
            url: "https://www.velodrombiketours.com/newsletter/exito.html", // success.php
            data: $("#myform").serializeArray(), // all form fields
            success: function (data) {
            // on success, post returned data in fancybox
            $.fancybox(data, {
                // fancybox API options
                fitToView: false,
                openEffect: 'none',
                closeEffect: 'none'
            }); // fancybox
            }, // success
			error: function(data) {
				alert("Ha habido un error");
			}
        }); // ajax
    }); // on
}); //ready

Try

jQuery(document).ready(function() {
    $('#myform #submit').on("click", function (e) {
        e.preventDefault();
	$.fancybox.showActivity();
	$.ajax({
		type		: "POST",
		cache	: false,
		url		: "https://velodrombiketours.ip-zone.com/ccm/subscribe/index/form/",
		data		: $(this).serializeArray(),
		success: function(data) {
			$.fancybox(data);
		}
		error: function(data) {
			alert("Ha habido un error");
		}
        });
    });
});

Exactly the same: modal opens but data aren’t sent.

I have all my tests here

https://www.velodrom bike tours .com/prueba-newsletter

You can test with your own existing mail, it’s not saved anywhere unless you confirm your suscription. If everything is ok a modal should open with successUrl (it has a message “el mail se ha enviado con éxito. revisa tu correo”) and then you should receive a confirmation mail in your mailbox

The only one it works is the one called “iframe manual”. It opens a modal but not with Fancybox

I suppose your issue is the same as posted on https://premium.status301.com/support/topic/open-success-url-from-with-fancybox/ … Please read my advise about the iframe method there because I do not think the ajax approach is going anywhere without control over the submission reponse.

Hi!
I finally solved irt with an easy and simple solution:
No fancybox!
I just show an iframe below the form when it’s submitted. This iframe loads success url or error url and… that’s all!

Thanks anyway for your answers ??