[Resolved] Form Code Not Visible

[Michael]

Hi all,

I am having an issue whereby sections of my pop up form code are being removed by WordPress. I have no idea why, and the code is working fine on my live site on Weebly, so the code itself should be fine. This is the code I am adding to the footer in Customizer:

<div class="signup">
  <div class="signup-header">Sustainable Living</div>
  <span class="closebtn">×</span>
  <div class="signup-container">
    <p>Get new articles related to <em>sustainability</em> and <em>eco-friendly home decor</em> direct to your inbox. We respect your privacy.</p>
    <form action="https://reclaimdesign.us9.list-manage.com/subscribe/post?u=0c1d87de694b90628655f4ab9&id=bab84d57de" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" rel="noopener" novalidate>
        <div id="mc_embed_signup_scroll">
    <div class="mc-field-group">
        <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Please Enter Your Email Address" required autocomplete="email">
    </div>
        <div id="mce-responses" class="clear">
            <div class="response" id="mce-error-response" style="display:none"></div>
            <div class="response" id="mce-success-response" style="display:none"></div>
        </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
        <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_0c1d87de694b90628655f4ab9_bab84d57de" tabindex="-1" value=""></div>
        <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
        </div>
    </form>
  </div>
</div>

However, the input box is not displaying, so I looked back at the Customizer footer field and this is the code I see there now (which seems to have stripped all the form code):

<div class="signup">
  <div class="signup-header">Sustainable Living</div>
  <span class="closebtn">×</span>
  <div class="signup-container">
    <p>Get new articles related to <em>sustainability</em> and <em>eco-friendly home decor</em> direct to your inbox. We respect your privacy.</p>
    
        <div id="mc_embed_signup_scroll">
    <div class="mc-field-group">
        
    </div>
        <div id="mce-responses" class="clear">
            <div class="response" id="mce-error-response"></div>
            <div class="response" id="mce-success-response"></div>
        </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
        <div aria-hidden="true"></div>
        <div class="clear"></div>
        </div>
    
  </div>
</div>

Please can you help me get the form code to stay put? Here’s the test url:

https://reclaimdesign-383226.easywp.com/about-reclaim-design.html

[David]

Hi there,

did you find the solution as it looks like the form is displaying correctly when added to the HTML Widget its in ? Let me know

[Michael]

Hi David,

Thanks for getting back to me. I haven’t found the solution yet. I added footer 1 widget and the pop up displayed, but without the input box visible. (By the way, when I added footer 1 widget all the other footer widget options in the customizer menu disappeared, I have no idea why. It fired up this message: “Your theme has 7 other widget areas, but this particular page doesn’t display them. You can navigate to other pages on your site while using the Customiser to view and edit the widgets displayed on those pages.”)

For added fun value, I’m also now having my head twisted by my pop-up jquery code no longer working. I replaced the $s as you told me to before, but for some reason this script is not functioning at all anymore. The only change I made is to reference the new “openbtn” on the page (which is the plus symbol in the top right hand corner).

This is the code:

jQuery(document).ready(function() {
	
	jQuery('.signup').css('display', 'block');
	
	jQueryPopUp = jQuery('.signup');
	
	var hide = JSON.parse(localStorage.getItem('hide'));

	if (hide) {
  		jQueryPopUp.hide();
	} else {
  		// initialize value in case it hasn't been set already
  		localStorage.setItem('hide', false);
	}
	
	jQuery('.openbtn').click(function(event) {
		event.preventDefault();
		jQuery('.signup').show();
		localStorage.setItem('hide', false);	
	});

	jQuery('.closebtn').click(function() {
  		jQuery('.signup').hide();
  		// toggle the boolean by negating its value
  		var hide = JSON.parse(localStorage.getItem('hide'));
  		localStorage.setItem('hide', !hide);
	});
	
});

This is the code that I put in the html footer 1 widget:

<div class="signup">
  <div class="signup-header">Sustainable Living</div>
  <span class="closebtn">×</span>
  <div class="signup-container">
    <p>Get new articles related to <em>sustainability</em> and <em>eco-friendly home decor</em> direct to your inbox. We respect your privacy.</p>
    <form action="https://reclaimdesign.us9.list-manage.com/subscribe/post?u=0c1d87de694b90628655f4ab9&id=bab84d57de" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" rel="noopener" novalidate>
        <div id="mc_embed_signup_scroll">
    <div class="mc-field-group">
        <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Please Enter Your Email Address" required autocomplete="email">
    </div>
        <div id="mce-responses" class="clear">
            <div class="response" id="mce-error-response" style="display:none"></div>
            <div class="response" id="mce-success-response" style="display:none"></div>
        </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
        <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_0c1d87de694b90628655f4ab9_bab84d57de" tabindex="-1" value=""></div>
        <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
        </div>
    </form>
  </div>
</div>

And the code for the open button on the About page (https://reclaimdesign-383226.easywp.com/about-reclaim-design.html):

<div id="openbtn-container">
	<span class="openbtn">+</span>
</div>

With styling:

.openbtn {
	color: #539c22; 
	cursor: pointer;
	display: inline-block !important;
	font-size: 48px;
	line-height: 35px;
	margin: 0 2px 10px;
	padding: 15px 10px 5px 5px;
  	text-align: center;
  	text-decoration: none;
	transition: opacity 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out;
  	-o-transition: opacity 0.3s ease-in-out;
  	-webkit-backface-visibility: hidden;
	-webkit-transition: opacity 0.3s ease-in-out;	
}

.openbtn:hover {
	opacity: 0.7
}

#openbtn-container {
	height: 100%;
	margin: 0;
	padding: 0;
	text-align: right;
	vertical-align: middle;
	width: 100%;
}

@media only screen and (max-width: 768px) {
	
	#openbtn-container {
		margin-top: -75px;
	}
	
}

Can you see anything glaringly obvious that I am doing wrong or missing? I also wanted to ask if it is somehow possible for me to add the social media buttons/open button into a widget that goes beneath the menu bar so that I don’t have to manually add them to every page? I couldn’t see any other header widgets (the only one I saw inserted the icons next to the main logo, whereas I was hoping for a widget that sits beneath the menu).

Thank you very much for your assistance!

[David]

Form looks good to me even threw a test email at it and it redirects to the confirmation page:

Noticed the button height property needs increasing ( or removing ) from the .signup-container .button CSS.

The + button to open the pop-up … where are you adding the Script ? I can’t see it on the page you linked us to. And if i add it via the browser dev tools it works.

You can use a Hook Element to add code or content across the site:
https://docs.generatepress.com/article/hooks-element-overview/

Just a suggestion – its worth disabling autoptimize and any other cache plugins whilst developing – some of the issues could be related to caching

[Michael]

Hi David, I’m adding the script in the footer via a snippit:

add_action( 'wp_footer', function () { ?>
<script src="https://reclaimdesign-383226.easywp.com/wp-content/uploads/js/socialsharing.min.js" async="async"></script>
<script src="https://reclaimdesign-383226.easywp.com/wp-content/uploads/js/hide-signup.min.js" async="async"></script>
<?php } );

Thank you very much for your suggestion. You are right. I hadn’t even considered the auto-optimzer causing an issue. I have disabled it and cleared the wordpress & browser cache. Now the button works and displays the pop-up. Weirdly though, the images in the left hand column no longer display? What have I missed with that? The only plug-ins I have enabled at the moment are:

Add Any Extension To Pages
Code Snippets
GP Premium
Relevanssi (for the search box)
Simple CSS
Simple Page Ordering
Updraft Plus Backup/Restore

Thanks so much for your input.

[David]

Those images are displaying a data attribute for Lazy Loading – Did you have that setup in autoptimize ? Peculiar to see them not load the original image when its disabled.

[Michael]

Hi David,

I removed the code from the footer widget 1 and created a code snippet instead, but have not managed to get it to work. This is the code snipppet:

add_action( 'generate_after_footer_content','mm_insert_sticky_signup_after_footer_content' );  
function mm_insert_sticky_signup_after_footer_content() { ?> 
    <div class="signup">
	  <div class="signup-header">Sustainable Living</div>
	  <span class="closebtn">×</span>
	  <div class="signup-container">
		<p>Get new articles related to <em>sustainability</em> and <em>eco-friendly home decor</em> direct to your inbox. We respect your privacy.</p>
		<form action="https://reclaimdesign.us9.list-manage.com/subscribe/post?u=0c1d87de694b90628655f4ab9&id=bab84d57de" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" rel="noopener" novalidate>
			<div id="mc_embed_signup_scroll">
		<div class="mc-field-group">
			<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Please Enter Your Email Address" required autocomplete="email">
		</div>
			<div id="mce-responses" class="clear">
				<div class="response" id="mce-error-response" style="display:none"></div>
				<div class="response" id="mce-success-response" style="display:none"></div>
			</div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
			<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_0c1d87de694b90628655f4ab9_bab84d57de" tabindex="-1" value=""></div>
			<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
			</div>
		</form>
	  </div>
	</div>

<?php }

Please could you tell me what I’m doing wrong? Thank you for your patience.

PS I fixed the Subscribe button alignment by adjusting the height/line-height as you suggested, added a top margin and set padding to 0 (this was the only way I could get it to centre vertically bizarrely)

[Michael]

Hi David, yes I had ticked the lazy load option in autooptimizer. Perhaps if I re-enable it, untick then disable again it will work. I’ll try that now.

[Michael]

Hi David, that didn’t get the images back which is odd.

However, clearing the cache afterwards caused the code snippet to work and show my pop up.

Do I need to be clearing the cache after every change I make? Or is there a way I can set it to do that automatically to avoid issues while testing?

[David]

Not sure whats up with the images – they’re not even being requested.
May need to remove and re-add them to that page.

Caches are a pain in the proverbials…. Whilst developing a site, especially if adding code, its best to leave them all disabled. And preview the site in an incognito/private browser as this does not cache.

[Michael]

Hi David, I’ll delete them from the media library and re-add them. Do you think I will need to delete all my images? Yes, you are right about caches being a pain in the %$”*! I see in my dashboard that there is a plugin that executes automatically:

Files in the /wp-content/mu-plugins directory are executed automatically.

1 item EasyWP Plugin Integrates with EasyWP to guarantee website performance with caching, monitoring and other services.

It looks like a plugin created by namecheap (whom I bought the domain and Easy WP package from). Do you think there is any way I can get around that?

Thank you for the tip about incognito – I didn’t know about that.

Again, thank you for all your tutoring!

[Michael]

Hi David,

I had to delete all images, then re-add to the media library. I’ve turned the auto-optimizer back on, turned lazy loading back on, cleared the cache via the button in the bar the top of the WP dashboard, and now the images are back. I also found out how to prevent the jquery not working issue (touch wood) by adding an exlude on the directory I am saving the scripts to:

/wp-content/uploads/js/

I added this to the list in the Exclude scripts from Autoptimize section under JS, CSS & HTML tab:

wp-includes/js/dist/, wp-includes/js/tinymce/, js/jquery/jquery.js, /wp-content/uploads/js/

Just running through the steps for the benefit of anyone else who might come across the same problem, as it is not immediately obvious at all how to resolve (or it wasn’t to me at any rate).

Thanks again for pointing me in the right direction 🙂

[David]

Glad to be of help – and thanks for sharing your findings.

[Author]

Posts