Subscribe Contact Form Code

Learn where to locate code to place a subscribe form directly onto your website to capture new contacts for your list.

Support avatar
Written by Support
Updated over a week ago

Capturing new subscribers is an important strategy for optimizing your email marketing campaigns. An easy way to obtain new subscribers is through a signup point on your website. Listrak makes it easy to add HTML to your website to with form code. 

Generate Form Code

Navigate to Help & Support > Help & Support Subscribe Contact Form 💡 You will need to select the correct list from list navigation dropdown menu.

Select your options:

  • Segment Field Groups to Include: This option allows you to collect additional data on the form by saving it to your Listrak Profile fields. Select additional field groups to include in your subscribe form beyond email address. After the form code is generated, you can remove any profile fields included in the group that you do not want to display. You can make edits to fields you want to use when you generate the form code. The fields and field groups must be created prior to generating your form code.

    💡 Use field groups such as source to track which form a contact used to sign up or CustomerInfo to collect information such as a contact's first name.

  • After submission, redirect to: You can design the form to redirect to a custom page after a contact fills out the form. Enter the URL in the text box. If you don’t specify a redirect location, the page will automatically redirect to Listrak’s generic subscription confirmation page.

    💡 Creating a custom landing page provides a positive customer experience by confirming their subscription to your program.

  • Enable Double Opt-In: A double opt-in is used if you want to require your contacts to confirm their subscription. Subscription is confirmed after the contact signs up through your website by sending a message asking them to click a specific link. This message is located under Settings > System Email Messages Double Opt-In. You can customize this message based on your business needs.

    💡 Helpful Tips:

    • This setting may decrease opt-ins by creating a second step in the process. Consult your legal team to determine if this setting is necessary.

    • Using this form code will allow a customer who unsubscribes and then attempts to re-subscribe will receive a double opt-in message regardless of this setting.

  • Send Welcome Email: This setting is used to send the Welcome system message located under Settings > System Email Messages Welcome. This system message is not part of your Welcome Series solution. If this setting is turned on the contact is not entered into your Welcome Series solution unless you have executed an external event (see next step for more information).

    💡 A fully configured Welcome Series solution provides a Typically, this is left at the default setting of No and an external event is executed.

  • Include External Events: An external event is the bridge between subscription on your website and your automated campaigns in Listrak Conductor. Executing an external event places your subscribers into a Conductor Conversation if it is included in your trigger step. The external event must be configured before creating your form code.

  • Click Update to apply selections to the HTML that is generated in the Subscribe Form Code section of this page.

  • In the Subscribe From Code section, click Select All at the top right of the form code text area to copy the code.

Place the subscribe form code directly onto your website, or have your web developer use your web styling to brand your code. You can also edit the appearance by following the steps below.

💡 Using this form code will allow a customer who unsubscribes and then attempts to re-subscribe will receive a double opt-in message regardless of your settings above.


Editing Form Code

The code you created may contain additional profile fields you do not want to include in a specific form, or you may want to edit the appearance. You can edit the form code to change these elements. The screenshots below show the code in Adobe Dreamweaver for editing, but you can also use notepad or a similar external code editor.

Copy the raw code from the Subscribe Form window in Listrak and paste it into your external code editor. Some elements of the form you may want to edit the appearance. In the example below, you will learn how to delete elements you do not need in a specific form.

Raw HTML from Listrak in Dreamweaver

Delete Form Headlines

Follow these steps to delete the Please fill out the form instructions:

1. Start at the top of the <table>.

2. Delete the ‘Please fill out this information’ row. Be sure to start with the beginning <tr> tag, and select everything until the ending <tr> tag.

Delete Unneeded Table Rows

You can also delete additional roles by following the process above until you are left with information would like to collect. For example: address, the source you created (e.g. AccountCreate), any necessary customer fields (first name, birthdate, zip code, etc.), as well as the sign up button.

⚠️ DO NOT DELETE THE FORM OR INPUT TAGS AT THE TOP OF THE PAGE. Those elements are what will allow your form to work.

After you’ve finished deleting the rows your form may resemble the example below:

Hiding Form Elements

You may have information you would like to collect information automatically on the form, but not show this information on the form. This is often done to track information, such as source where a contact will not change the value.

Find the <tr> row that defines the information you want to hide.

Select the first <label> tag, and highlight everything until you reach the </label> tag (illustrated below). Delete this information.

Find the value="off" attribute at the end of this same section of code.

Change "off" to "on". This will allow the field to be hidden on the form, but will still pass the correct source value when someone subscribes.

Now you're finished - the code is ready! You can now save your text file locally on your machine as filename.HTML. This file can now be opened in web application and you can test the form by subscribing email addresses to your Listrak account. Learn more about testing below.


Testing

Once you have saved the HTML form you can open it in a browser. Input your test information and submit the form. You be directed confirmation screen if you did not define a redirect URL when you generated the code. If you did specify a redirect, you should be taken to the specified page.

Once you have submitted the form you will want to confirm that it was added into Listrak correctly. The subscription may take a few minutes to appear in the Listrak platform.

Navigate to Contacts > Email Contacts Search for a Contact. 💡 You will need to select the correct list from list navigation dropdown menu.

  1. Enter the address you used to test.

  2. Click Search.

  3. Click the email address link to make sure that all of the correct profile information was imported if you included any profile field groups in the segmentation settings.

  4. If you executed an external event, check your email inbox to see if you have received the messages from your automated campaign.

  5. 7. If the information is passed correctly, the code you generated can now be added to your website.

Did this answer your question?