WebSite X5Help Center

 
Ionescu C.
Ionescu C.
User

Subscribe Newsletter Feature  en

Author: Ionescu C.
Visited 451, Followers 1, Shared 0  

Hello, 

It is possible to add a widget like newsletter, when the user reaches the bottom of the website a pop up is displayed stating: Sign in for our newsletter ?

And the use has to only complete only one filed, e-mail adress to be exact.

Any idea/script whould be highly appreciated.

Regards, 

Cristi

Posted on the
17 ANSWERS - 2 USEFUL
Incomedia
Elisa B.
Incomedia

Hi Ionescu, 

I have marked this post as Idea. Meanwhile, you could use the Sendinblue Newsletter service: we ourselves use it and are happy with it. 

Thanks! Kind regards.

Read more
Posted on the from Elisa B.
John S.
John S.
User

I have a page like this:

Read more
Posted on the from John S.
John S.
John S.
User

In 1 I have:

<div id="trigger-div">Chapter 4</div> You could change it to:

<div id="trigger-div"></div>

Read more
Posted on the from John S.
John S.
John S.
User

In 2 I have:

<div id="slider">
<!--call-to-action-->

<a href="mailto:***?subject=Newsletter" target="_blank" style="font-size:40px;">Sign in for our newsletter !</a>
<p>This popup is only for test - <mark>so don't </mark>try to send a mail</p>
</div>
<style type="text/css">
#slider{
/*hide the window*/
position:fixed;
bottom:-200px;
right:0px;
height:195px; width:600px;
background-color:#fff;
/*add border*/
border-top:1px solid #000;
border-left:1px solid #000;
/*add shadow*/
-moz-box-shadow: 0px 0px 15px #888;
-webkit-box-shadow: 0px 0px 15px #888;
box-shadow: 0px 0px 15px #888;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
function isScrolledTo(elem) {
var docViewTop = $(window).scrollTop(); //num of pixels hidden above current screen
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top; //num of pixels above the elem
var elemBottom = elemTop + $(elem).height();
return ((elemTop <= docViewBottom)); //if the bottom of the current viewing area is lower than the top of the trigger
}
var trigger = $('#trigger-div'); //set the trigger
var reached = false;
$(window).scroll(function() {
if(isScrolledTo(trigger)) {
//slide CTA onto screen
if(!reached){
$('#slider').animate({
bottom: 0
}, "fast");
reached = true;
}
}
if (!isScrolledTo(trigger)) {
//slide CTA off of screen
if(reached){
$('#slider').animate({
bottom: -250
}, "fast");
reached = false;
}
}
});
});
</script>

Read more
Posted on the from John S.
John S.
John S.
User

This should function right away for you.

You then have to change :

<a href="mailto:***?subject=Newsletter" target="_blank" style="font-size:40px;">Sign in for our newsletter !</a>
<p>This popup is only for test - <mark>so don't </mark>try to send a mail</p>

The *** should be changed to the mailaddress where you want to receive the request.

You can change the text and font size to what you want. Maybe you have to style it to be adaptive for smaller screens.

This is totally free, and you have full control over what happens. For many 3. party services you have to pay and maybe live with advertisements.

Hope this is the answer to your "problem".

Read more
Posted on the from John S.
John S.
John S.
User

The code (2) can be put in a html (like in the example) but it could also be put in the page properties.

But - it can also be put on all pages using the "Statistics and code" 

On the pages you want the "popup" to be shown, you then have to place a html-object with the code in 1, so you have the trigger for that page.

I will not recommend it on all pages. I think a user will find it annoying - I just mention the possibility.

Please tell us when you have found a proper solution - and what you have chosen.

Read more
Posted on the from John S.
Axel  
Axel  
User

@John,

Nice...

One thing... When ther eis not text behin the popup the link is ok

If there is text behind, linl does not works properly.

Any idea ?

Enjoy!
Axel

Read more
Posted on the from Axel  
John S.
John S.
User

You could change the z-index for the html object.

Read more
Posted on the from John S.
John S.
John S.
User

Maybe you could give a link to your test?

Read more
Posted on the from John S.
Axel  
Axel  
User

@John,

Great remark. You are right....

I have reduced the size of the popup and this superposition issue is solved.

On my demo: https://wsx5demo.afsoftware.fr

Just one thing.

With the previous script you have this error with Chrome Inspect

To avoid this one just put this line into a comment

<!--<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> -->

Now the Jquery library is loaded with WSX5 .

and everyhting will work fine

Enjoy!
Axel

Read more
Posted on the from Axel  
John S.
John S.
User

@Cristi

Here is a new version of the content in 2.

I have made it more suitable for also mobile devices. As Axel discovered, then the div in the object was "behind" the text on the footer. I have placed a z-index to avoid that.

You have to find the ID of the html-object that contains the code, so it can be "lifted" above the text.

When you have the ID you replace the xx in this line:  #imCell_xx    with your actual value.

Then this should function:

<div id="slider">
<!--call-to-action-->

<a href="mailto:***?subject=Newsletter" target="_blank" style="font-size:30px;">Sign in<br>for our newsletter !</a>
<p>This popup is only for test<br><mark>so don't</mark> try to send a mail</p>
</div>
<style type="text/css">
#slider{
/*hide the window*/
position:fixed;
bottom:-200px;
right:0px;
height:200px; width:300px;
background-color:#fff;
/*add border*/
border-top:1px solid #000;
border-left:1px solid #000;
/*add shadow*/
-moz-box-shadow: 0px 0px 15px #888;
-webkit-box-shadow: 0px 0px 15px #888;
box-shadow: 0px 0px 15px #888;
}

#imCell_xx {
z-index:10000;
}
</style>
<!--<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> -->
<script type="text/javascript">
$(document).ready(function() {
function isScrolledTo(elem) {
var docViewTop = $(window).scrollTop(); //num of pixels hidden above current screen
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top; //num of pixels above the elem
var elemBottom = elemTop + $(elem).height();
return ((elemTop <= docViewBottom)); //if the bottom of the current viewing area is lower than the top of the trigger
}
var trigger = $('#trigger-div'); //set the trigger
var reached = false;
$(window).scroll(function() {
if(isScrolledTo(trigger)) {
//slide CTA onto screen
if(!reached){
$('#slider').animate({
bottom: 0
}, "fast");
reached = true;
}
}
if (!isScrolledTo(trigger)) {
//slide CTA off of screen
if(reached){
$('#slider').animate({
bottom: -250
}, "fast");
reached = false;
}
}
});
});
</script>

Enjoysmile

Read more
Posted on the from John S.
Axel  
Axel  
User

great wink

Read more
Posted on the from Axel  
Ionescu C.
Ionescu C.
User
Author

@John S. can the script be made so taht the user inserts his email adress and than presses Submit/Send/Subscribe?
Something like this :


Regards,

Cristi

Read more
Posted on the from Ionescu C.
John S.
John S.
User

The short answer is: yes

The longer answer is: You have to make some html that grabs the data and that can invoke a PHP script that can send data. Also some JS to check the input and a "response" page.

You find code for that here: https://html.form.guide/email-form/php-form-to-email/

You can from the page make a download of a zip containing the full code.

You then have to edit the code so it meet your needs. The original code contains also a name and a text to be forwarded.

I have made a test here: https://pindown.eu/sparta13/page03.html

The code is put into "call to action"

<!--call-to-action-->

<style>
label,a
{
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;
}

</style>
<!-- a helper script for vaidating the form-->
<script language="JavaScript" src="scripts/gen_validatorv31.js" type="text/javascript"></script>

<!-- Start code for the form-->
<br>
<p style="text-align:center;font-size:30px;">SUBSCRIBE</p>
<br>
<form method="post" name="myemailform" action="form-to-email.php">
<input type="text" name="email" placeholder="Enter a valid email address">
<input type="submit" name='submit' value="submit">
</form>
<script language="JavaScript">
// Code for validating the form
// Visit http://www.javascript-coder.com/html-form/javascript-form-validation.phtml
// for details
var frmvalidator = new Validator("myemailform");

frmvalidator.addValidation("email","req","Please provide your email");

</script>

Submitting the form will invoke the "form-to-email.php" script.

Read more
Posted on the from John S.