close ad
 
Important WebAssist Announcement
open ad
View Menu

Web development tutorial

Add a subscribe / unsubscribe feature

Tutorial created by Ray Borduin, WebAssist

Categories: Data Bridge

rating

In this tutorial, we're going to help you make a simple page that allows people on your site to give you their names and email addresses, and a simple page that you can link them to in the emails you send, that will allow them to remove themselves from your mailing list.

This tutorial is for people who want to set up a small newsletter or mailing list. If you are trying to set up a larger mailing list, you will want a more powerful mailing list solution that handles the sending of the emails for you, such as our email solution, PowerMessenger.

arrow downWhat you need to start

  1. A dynamic site set up within Dreamweaver
  2. A blank database
  3. Dreamweaver CS4 or later
  4. Data Bridge installed and activated in Dreamweaver
  5. DataAssist Newsletter Preset, which can be downloaded here
    data-bridge-newsletter-subscribe-unsubscribe.zip

arrow downImport the preset

  1. In Dreamweaver, click WebAssist > Preset Manager
  2. From the Product drop down, select Data Bridge - Preset
  3. Click the Import button
  4. Browse to the data-bridge-newsletter-subscribe-unsubscribe.zip preset file you downloaded earlier
  5. Click Open

arrow downCreate Your Subscribe Page

  1. Create a blank PHP page in the root of your site
  2. Open the blank PHP page
  3. This is to make sure DataAssist creates the pages in the correct directory level
  4. Click WebAssist > Database > DataAssist Pages
  5. Change the Application Type to Newsletter
  6. Make sure the Create the database table for me is checked
  7. This is going to let Data Bridge create the correct database setup for this specific tutorial. It'll be awesome
  8. Change the connection to the one pointing to your blank database
  9. Edit the Page Design to exactly how you wish it to be
  10. For this tutorial, this step isn't needed, so we're keeping the Page Design as Basic, but edit away
  11. Click the Manage Pages tab
  12. Ensure the page is named using the following naming convention:
    Insert > newsletter_subscribe.php

    This is done by following these steps:

    1. Click on the pages under the Define Features section
    2. Change the names under the Page Name & Location field


  13. Click Finish
  14. Uncheck the Save as preset checkbox
  15. Click OK

arrow downUpdate Subscribe Page

Now that we have the database set up, and the subscribe page created, we should customize the text on the subscribe page to be a little more specific to the application we're creating.

  1. In Design view, highlight the text Insert
    This should be within <legend> tags as follows:
    <legend class="groupHeader">Insert</legend>

  2. Change the text to say Subscribe to our newsletter
    This will look as follows:
    <legend class="groupHeader">Subscribe to our newsletter</legend>

  3. In Design view, click on the Insert button
  4. In the Properties Inspector, change the Value to Subscribe
    This will change the text on the button. Don't change any other values in the button, or the subscribe form might stop working
  5. In Design view, highlight the text Please enter a value.
    This will be right after the Email Address field. This will be within a <span> tag as follows:
    <span class="serverInvalidState" id="emailaddress_ServerError">Please enter a value.</span>

  6. Change the text to say This email address is already in our system, or it is invalid. Please use another one.
    This will look as follows:
    <span class="serverInvalidState" id="emailaddress_ServerError">
    This email address is already in our system, or it is invalid. Please use another one.

    </span>

  7. Save the page!


Now that we've made the page all fancy fresh, you should try to add a few email addresses, making sure they are added correctly into your database, and that the validation on the page works as expected.</span></legend>

arrow downThe Unsubscribe Page

Next up, we're going to create an unsubscribe page. This is where it gets a little complicated. The page will either take an email address as a URL variable, then populate it into an Unsubscribe Email field, or allow users to enter their own email address to unsubscribe. They will then have to click submit to drop the email address from the database.

Step 1: Create the page and get it started

  1. Create a new page called newsletter_unsubscribe.php
  2. Open the page
  3. Click Window > Bindings to open the Bindings panel
  4. Click the Add Binding ( ) button
  5. Click URL Variable
  6. Name the variable email and click enter
  7. Click the Add Binding ( ) button
  8. Click URL Variable
  9. Name the variable unsubscribed and click enter
  10. Save!


The URL variables will be used later to prepopulate the email address in a field we'll make, and to check if the unsubscribe form has been submitted or not.

Step 2: Set up Show If rule

  1. Click WebAssist > SecurityAssist > Manage Site Access > Access Rules Manager%u2026
  2. Click the Add Rule ( ) button
  3. Name the Rule unsubscribed
  4. Click the Add Condition ( ) button
  5. Leave the type as Allow
  6. Click the dynamic lightning bolt for the Value field
  7. Expand the URL variable list
  8. Click the unsubscribed URL variable
  9. Click OK
  10. Leave Criterial as =
  11. Enter 1 in the Compare to field
  12. Click OK to create the rule
  13. Click OK to close the rule manager


This rule checks for the URL variable unsubscribed, and if it exists, and if it's also = 1, then it will trigger. The opposite of this is that when ?unsubscribed=1 isn't in the URL, it won't trigger.

Step 3: Create Unsubscribe form

Next up is creating a simple unsubscribe form and showing it when an email hasn't been removed yet.

  1. Click WebAssist > Forms > Insert New Form
  2. Leave the form type as New from Blank
  3. Click the edit button

  4. Change the Submit value to Unsubscribe

  5. Click the Add Fieldset ( ) button

  6. Click on the newly create Fieldset: 1

  7. Change the Label to Unsubscribe from our newsletter
  8. Click on Group: 1

  9. Change the Category to Form elements
  10. Change the Type to Text: Medium
  11. Change the header to Email Address

  12. Click Finish to finish the form editing
  13. Click Finish to close the Save dialog
  14. Click Finish one last time to add the form to the page
  15. Click on the text field in the form
  16. In the Properties Inspector, click the dynamic lightning bolt next to the Init value field
  17. Expand the URL variables
  18. Click the email variable
  19. Click OK to insert it as the default value
    This way, if there is an "?email=emailaddress" in the URL, the field will automatically populate to that email address
  20. Highlight the entirety of the <div> created around the form
  21. Click Window > Server Behaviors to open the Server Behaviors panel
  22. Click the Add Server Behavior ( ) button
  23. Click WebAssist > SecurityAssist > Show Region
  24. Select Not unsubscribed as the rule
  25. Click OK to apply the server behavior
  26. Save EVERYTHING!


Now this form will show whenever the unsubscribed URL variable is absent from the URL (when it's not equal to 1 to be more precise). This will show the form as long as the dropping of the email address from the database hasn't gone through

Step 4: Delete entered email

Now we need to add a nice little server behavior that will take the entered email address, and remove it from the database.

  1. Click Window > Server Behaviors to open the Server Behaviors panel
  2. Click the Add Server Behavior ( ) button
  3. Click WebAssist > Data Assist > Delete > Single Record Delete
  4. Make sure the Connection and Table are set to the correct values
  5. Set the Key column as the emailaddress column
  6. Click the dynamic lightning bolt for the Value field
  7. Expand the form
  8. In this case it is Default_NewFromBlank_Default, but this can differ depending on the form
  9. Click the Unsubscribe_from_our_newsletter_Email_Address_Text variable
  10. Click OK to insert it as the Value
  11. Click the Browse button for the Go to field
  12. Select the current page, which in our case is newsletter_unsubscribe.php
  13. Click the Parameters button next to URL


  14. If there isn't a parameter, add one
  15. Enter unsubscribed as the Name
  16. Enter 1 as the value
  17. Click OK to add the parameter
  18. Click Choose to add the Go to page
  19. Click OK to add the Delete Record server behavior
  20. Save the page!

Step 5: Create Success message

Now we're going to create a success message, and hide it until the email has successfully been unsubscribed.

  1. In the body of the page, enter the text; Your email has successfully been removed
  2. Highlight the text
  3. Click Window > Server Behaviors to open the Server Behaviors panel
  4. Click the Add Server Behavior ( ) button
  5. Click WebAssist > SecurityAssist > Show Region
  6. Select unsubscribed as the rule
  7. Click OK to apply the server behavior
  8. SAVE IT ALL!!
  9. Now the success message will only show when the URL variable "unsubscribed" has a value of 1.

arrow downWhat to do next...

You did beautifully, and I'm so darn proud of you. I feel like a parent.

The next step is using this database of emails for good; not evil. Send awesome newsletters, and when you send out your newsletter, you can send a link that goes to your unsubscribe page with the ?email= parameter and the email address the newsletter is being sent to as the value. This will let them click a fancy unsubscribe link and their email address will be populated in the field to unsubscribe.

arrow downReviews and comments

Comments will be sent to the author of this tutorial and may not be answered immediately. For general help from WebAssist, please visit technical support.

Sign in to add comments
rating

mmichals347710: 9 Years, 10 Months, 3 Weeks, 5 Days, 23 Hours, 34 Minutes ago

How do you make this all work with power messenger?

rating

Team WebAssist: 9 Years, 10 Months, 3 Weeks, 5 Days, 22 Hours, 38 Minutes ago

PowerMessenger is a full email marketing solution with a pre-built form already included for users to subscribe to your emails. It includes the database and all the admin tools to manage your subscribers and design / send emails to them. With PowerMessenger, you would not need this tutorial.

rating

mmnpinto361034: 9 Years, 4 Months, 2 Weeks, 1 Day, 15 Hours, 47 Minutes ago

On Step 4: Delete entered email i can't see the parameters button. I can't see and i'm not able to insert one. I've got the dreameaver CC 2014.1. Everything is ok until this step. Any help please

rating

Team WebAssist: 9 Years, 4 Months, 2 Weeks, 1 Day, 13 Hours, 4 Minutes ago

mmnpinto361034, I added a screenshot on that step. The parameters button should be next to the URL field. If you don't see that, please get assistance via technical support. (Click on help in the main website menu.) We'll be able to go back and forth with you much more quickly there.

Jeff Napadow: 9 Years, 3 Months, 2 Weeks, 4 Days, 18 Hours, 6 Minutes ago

In Dreamweaver CC there isn't a "Parameters" button to add a value to the delete record portion of the tutorial.

rating

Team WebAssist: 9 Years, 3 Months, 1 Week, 5 Days, 16 Hours, 39 Minutes ago

Jeff Napadow, Adobe removed the parameters button on Windows. :(
Add the parameter manually to the end of the delete page name by changing:
delete.php
Or whatever the delete page name is to:
delete.php?unsubscribed=1

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.