Emailoptin (ajax) and PopUp Pro

Hello!

I just tried out this plugin and were hopeing that I somehow could get it to work with a custom form.

I would like to use the popup to gather email-adresses and tried to put in my regular <form> code in the text of the editior but it just got escaped like <input type=\" etc.

So I'm wondering if there is a good way to implement a custom form to catch e-mailadresses?

I have code understanding and have build the theme I use myself so its no problem to make some code custom but It would be really nice to get it all work together with this plugin.

  • Kasia Swiderska

    Hello Marcus,

    I would like to use the popup to gather email-adresses and tried to put in my regular <form> code in the text of the editior but it just got escaped like <input type=\" etc.

    Could you share code you want to use in the Popup? Is it only HTML or PHP/JS script? Because WordPress will remove PHP and JS code from editor. You would need to use this plugin to use PHP code https://wordpress.org/plugins/php-code-for-posts/ in editor.

    I have code understanding and have build the theme I use myself so its no problem to make some code custom but It would be really nice to get it all work together with this plugin.

    You can always write custom shortcode that will display your form - and then use it in the Popup, and nothing will be removed.

    kind regards,
    Kasia

  • Marcus

    Hello,
    I tried with the following code:

    <form method="post" class="optInForm">
    	<input type="hidden" class="optInFormRefsite" name="refsite" value="xxx" />
    	<input type="hidden" class="optInFormRefplace" name="refplace" value="xxx" />
    	<input type="hidden" class="showNewSubscriber" value="1" />
    
    	<div class="kampanj-submit">
    		<input type="submit" value="Gå med" class="button-red" />
    	</div>
    
    	<div class="kampanj-input">
    		<input type="text" class="input-white optInFormEmail" value="DIN E-POST" onfocus="this.value=(this.value==this.defaultValue) ? '' : this.value;" onblur="this.value=(this.value=='') ? this.defaultValue : this.value;" style="-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;width: 100%;padding: 10px;font-weight: 400;font-size: 16px;">
    	</div>
    
    	<div style="clear: both;"></div>
    </form>

    But I also tried a simple:

    <form name="xx" method="post">
    <input type="text" name="email" />
    <input type="submit" value="send" />
    </form>
  • Ivan Shulev

    Hey Marcus,

    I hope you are having a nice day so far.

    I tried adding the form to a popup in my sandbox environment and it seems to be working properly - no escaping is happening. Both JS and CSS code is there:

    You did mention that you put the code in the text section of the editor, but just to make sure, here is how it looks for me when I edit the popup:

    If this does not help you, my guess is that there is another plugin that is doing the escaping.

    You can try to disable all other plugins and give it a try.

    As my colleague Kasia stated above, you can use a shortcode for the form. You mention "EmailOptin", so I am guessing you are using Optin Forms (https://wordpress.org/plugins/optin-forms). I see that their plugin provides a shortcode, so you can use that.

    If the issue still persists, please enable support access so we can have a look. A detailed guide on how to do that - https://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    I hope this is helpful and I wish you an awesome day ahead!

    Ivan

  • Marcus

    Hello!
    Took some time until I lookt into it again but I got everything to work fine with the shortcode.

    But I have however a problem to submit the data trough the popuppro, it works fine everywhere else on the site except in the popup.

    I have the following form code:

    <form method="post" class="optInForm">
    			<input type="hidden" class="optInFormRefsite" name="refsite" value="xx">
    			<input type="hidden" class="optInFormRefplace" name="refplace" value="xx-popup">
    			<input type="hidden" class="showNewSubscriber" value="1">
    
    			<div class="kampanj-submit">
    				<input type="submit" value="Gå med" class="button-red">
    			</div>
    
    			<div class="kampanj-input">
    				<input type="text" class="input-white optInFormEmail" placeholder="DIN E-POST" style="-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;width: 100%;padding: 10px;font-weight: 400;font-size: 16px;">
    			</div>
    
    			<div style="clear: both;"></div>
    		</form>

    And the following in my head (sitewide):

    // js/optin.php
    $(function() {
    	var optInFormCheck = 0;
    	$(".optInForm").submit(function() {
    		var thisoptInFormCheck = $(this);
    		if($(this).find(".showNewSubscriber").val()=="1") {
    
    			var msg = 'Du kommer nu få nyhetsbrev av oss!';
    
    			$("#optin-popup-msg").append(msg);
    			$("#optin-popup").show();
    
    		}
    
    		$.post( "<?php bloginfo("template_url"); ?>/functions/optin.php", { email: $(this).find(".optInFormEmail").val(), name: $(this).find(".optInFormName").val(), mobil: $(this).find(".optInFormMobil").val(), refsite: $(this).find(".optInFormRefsite").val(), refplace: $(this).find(".optInFormRefplace").val(), kampanjid: $(this).find(".optInFormKampanjId").val() }).done(function( data ) {
    			optInFormCheck = 1;
    
    			if(data!="0") {
    				//sometracking
    			}
    
    			if(thisoptInFormCheck.find(".showNewSubscriber").val()=="3") thisoptInFormCheck.submit();
    		});
    		if(optInFormCheck==0) return false;
    
    	});
    });

    Everything works fine and the popup closes if I wish to do that. But somehow $(".optInForm").submit(function() { wont trigger.
    Suggestions?

    No error in console and I have the same form a couple of times on the site and it works fine. Its just trough the popup in popuppro it wont send.

  • Rupok

    Hi Marcus

    Hope you had a wonderful day.

    But somehow $(".optInForm").submit(function() { wont trigger.

    Can you please confirm you can't event print an alart with .optInForm.submit() when the popup is loaded?

    I don't see any action URL in your form. Can you try using the current page URL as action URL and select "Redirect to Form Target URL" from the drop-down in popup settings?

    Have a nice day. Cheers!

  • Marcus

    Hello!

    There is no actionurl in the form since the javascript part takes care of that that is in <head> section of the site.

    If I put a alert inside the popup's code it works with an alert, but I can't access anything outside from the popup.

    I solved the case to make a action to a specific file that saves the info so the "problem" is solved partway and I have a working solution atleast.

  • Ivan Shulev

    Hey Marcus,

    I hope you are having a nice day so far!

    I am assuming your popup triggers in a certain amount of time. The code below is for a 3 second delay.

    jQuery( window ).load(function() {
    	(function delayedElementAssign() {
    		timeoutID = window.setTimeout(popupSubmitHandler, 3100);
    	})();
    	function popupSubmitHandler() {
    		jQuery(".optInForm").submit(function() {
    			var thisoptInFormCheck = jQuery(this);
    			console.log(thisoptInFormCheck);
    			return false;
    		});
    	}
    });

    The code above waits an additional 100 milliseconds after the 3 seconds it takes for the popup to be added and then executes the submit handler function. Please adjust to reflect your delay.

    I hope this helps and I wish you an awesome day ahead!

    Ivan