Additional menu

IMTips

Create an Alternate Source of Income Online

You are here: Home / Tips / Add Subscriber To AWeber List Without Leaving Page?

Add Subscriber To AWeber List Without Leaving Page?

Have you ever wondered when you see an AWeber form submit data to AWeber in a fraction of a second without leaving the page? Have you ever wanted such forms on your site as well? I will tell you step by step to get your AWeber form submitted exactly like that.

shabbir recommends moosend

Have you ever wondered when you see an AWeber form (See my AWeber Review) submit data to AWeber in a fraction of a second without leaving the page? Have you ever wanted such forms on your site as well? I will tell you step by step to get your AWeber form submitted exactly like that.

Generate AWeber Form and grab the HTML code for the form.

1. HTML

In the HTML code Find <form and just before the <form add an invisible IFrame.

<iframe id="AweberFormSubmitFrame" style="display: none" name="AweberFormSubmitFrame" src="about:blank"></iframe>

And after the <form add the target window and id to the form tag

target="AweberFormSubmitFrame" id="before"

So finally out code will look like this.

...
<iframe id="AweberFormSubmitFrame" style="display: none" name="AweberFormSubmitFrame" src="about:blank"></iframe>
<form id="before" target="AweberFormSubmitFrame" ...

If you already have a target for form in the code by AWeber as target=”_new”, you can remove it.

Now when user submits the form we want to hide the form with a message to the user.

So just after the closing form tag i.e. </form> add the thanks message to the user.

<div id="after" style="width:99%;border:gray 1px solid;display:none;background-color:#ccc;Padding:5px;height:100px;">Thank you</div>

You can customize the message content as you want.

2. JavaScript

We need to add JavaScript code to the submit button code i.e. when user clicks the submit button we validate the data and then send it to AWeber.

So after <input name=”submit” add

onClick="return _submit_form(this.form);"

so it becomes.

<input name="submit" onClick="return _submit_form(this.form);"

Now finally at the end add the following JavaScript code

<script language="JavaScript">
<!--
function _submit_form(frm){
  var email = frm.email.value;
  var valid_email = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
  if( valid_email.test( email ) ){
    document.getElementById('before').style.display = 'none';
    document.getElementById('after').style.display = 'block';
    return true;
  } else {
    alert("Invalid email address");
  }
  return false;
}
//-->
</script>

This is it and you can see the working example of my AWeber form here.

If you come across any issues getting this done right share your issues in comments below but do mention the URL where you are facing the issue and and I will be more than happy to help.

Readers who read this article also read …



May I help You With ...

Upwork Proposal
Finding Clients
Getting Paid
Setup Website
 

Or Help Yourself ..

Reader Interactions

Comments

  2. Interesting post || I am very new this awber. I would like to use facebook login to get users emails. Once user login in my application i will get his email and need to save in my awber list. So please help us how can we do this . Also share me if there is any code snippets [javascript or php etc].

      • Thanks for the reply !! I have seen it but its some thing like we need to create a page in facebook and conformation login login there kind[https://auth.aweber.com/1.0/oauth/authorize?oauth_token=Aq8Kjz0GSHa0o9sFpl3Z55iH].

        what exactly I need is I will keep a facebook login in my android app. So once the user clicks on login I will take his email and name and I need to add them to the awber subscribers list. for this is there any API type supporting? please help me.

        Thanks

        AK

  3. Thanks for the code. Works almost fine. The only problem is just after it has displayed the “Thank You” message, the page redirects to the old default “Thank you” page. Strange because the redirect URL is not there in my form. And I am not using the Aweber Javascript version code.

    another issue – what if the visitor trying to sign up is already subscribed? By default the Aweber form would redirect to the designated “Already subscribed” page but is it possible to have a message just like your “Thank you” message?

    Thanks.

    • Aroy, those options should be selected in the AWeber form creation interface and then copy the needed HTML code and paste it into the hidden fields and then it would work as you expect.

      • Thanks Shabbir for the reply. I got the first part fixed. (it was a typo that changed the form target to something else).

        Now for the second part, I do have the hidden field in the form to redirect an already subscribed person to the “Thanks but you are already subscribed” page but it won’t work. The Thank You message still pops up even though the person is already subscribed.

        I there any solution to this problem. I don’t mind if the page actually redirects to the “already subscribed” page instead of showing different message on the same page.

        Thanks.

        • Aroy, you can select the already subscribed page in your AWeber interface and then follow the following instructions. If you still have issues, share your installation url and I will be able to update you with the final code you need to add in the plugin.

          • I’m not on WordPress and so, not using any plugin.

            It’s a static HTML squeeze page page I am trying to test this technique and everything works fine except that already subscribers are not redirected to the page where it says “Sorry, but you are already subscribed”.

            This should be the desired scenario –

            New Subscriber: Show Message without leaving the page
            Already Subscribed: Redirect to the “already subscribed” page.

            But I guess your code is not yet capable of doing it. It shows the same thank you message in both the cases.

            • Ohh yes that is true because we are not getting the output from AWeber and so we are not dealing with the errors but just showing the message.

              • Yes, even if you try your own optin form here – http://cache.g4estatic.com/form-submit-inline/AWeber-form.html you would see it happening. I am subscribed to you list but it keeps saying “Thanks” as many times as I sign up with the same email address instead of taking me to the “You are already subscribed” page.

                This has made your otherwise excellent script a bit incomplete. But I understand it’s not possible to add that function. Thanks anyway.

  4. Thank you so much! I used this on a client’s website http://rathandco.com for AWeber form since I was miffed that you couldn’t easily install a non-page-reloading form (how behind?!) and your code worked great.

    I added some styling on top of my form for the notification message

  6. Works great! Thanks Shabbir. Good substitute for an AJAX approach, which usually doesn’t work in IE due to XDR POST restrictions.

  7. Hello

    Is it possible to have two aweber in one form? i mean i want when someone put their email. it will be going to be saved on the two list.

    regards
    john

  8. I need to develop it in my Aweber Account How i have created a application on awebar namely OptimalQuotes it returns me with a
    Consumer Key: and Consumer Secret: and a application id how i will fetch them in my site i need the full code

    • I could not add users to my AWeber account programatically when they register on my site because the keys needs to be authenticated each time and users cannot authenticate my AWeber account.

    • You are checking both the fields in one condition and try to do that in different if conditions and that should be fine for you.

      if (validname)
      else alert

      if (validemail)
      else alert

      If you think 2 alert box would be annoying you can have some text added to the message and set a flag where user is give the right message.

      if (validname)
      else alert_message_name flagged

      if (validemail)
      else alert_message_email flagged

      Depending on both the flag value show an alert box.

      • Also apart from that you can also test the valid name inside an if element of Valid Email and vice versa.

        Not sure how confident you are but it is just matter of if else and for developer it is simple but if you have issues let me know what you want to do and I can get it done for you.

  10. I have managed to validate the name and email with a combined alert but not seperate using the below lines of code i put together. Would like to seperate the alerts so that they appear if the name is incorrect first and then if the email address is incorrect. I am new to programming in java and php, although have been making money online with marketing and social networking, but never used php, so any help would be much appreciated. Thank you.

    • For Name all you can check for not blank and only characters. Nothing more than that is possible. If you want you can do the checking with few lines of JS code. I can also help you with that code if you want.

  11. Hi there. I am wanting to do the same for the NAME field. In other words the above checks only for a valid email but what about the Name field. How can I build that in into the Javascript? Thanks

  12. this was a life saver since cross-domain ajax and CORS were killing me with compatibility issues.
    thanks

  13. please i need the html code to submit registration form data from my website to my e-mail address. the code should be such that when the submit button is clicked, the data in the form will be sent immediately and a confirmation thank you message window will be displayed with an okay button. pressing the okay button should redirect back to homepage.
    i count on your reply, thanks!

    • I am not sure I understand the complete process but let me guess. You are saying you want an AWeber form where thanks page has a button to be redirected to your home page. Is this what you are looking for?