Subscribe Form Embeds

This feature is in beta and available to all users.

The subscriber form embed allows you to collect leads that will be inserted into your workplace CRM.

Step 1

Add the script tag right before the closing body. Be sure to replace {{workplace_url}} with the URL of your workplace.

<script src="https://{{workplace_url}}.thriveific.app/form-embed.js"></script>

Once you include your workplace JavaScript file you then can include the below subscribe HTML elements anywhere on your website where you wish a form to appear. Only include this script one, this is the script that is used for subscribe forms, lead forms, and contact forms.

Step 2

Copy and paste the HTML element on your page where you would like the subscriber form to be displayed. You can customize HTML classes to match your website's current CSS classes. By default, we use Bootstrap CSS classes as it's the most popular CSS Framework. See form examples below.

Subscribe Form Markup

Below is an example with all customization options. The example below shows the default options that will be applied if they are not overridden.

To make your customizations, simply make changes to the data attributes.

<!-- subscribe form -->
<div
   subscribe
   data-audience-id="1f0e3dad99908345f7439f8ffabdffc4"
   data-labels="true"
   data-label-class="form-control-label"
   data-fields="first_name, email"
   data-input-div-class="col-12 form-group"
   data-input-class="form-control"
   data-email-placeholder="who@company.com"
   data-btn-div-class="col-12 form-group"
   data-btn-text="Request Invite"
   data-btn-class="btn btn-primary btn-block"
   data-msg-class="text-center"
   data-error-msg-color="#DF4759"
   data-success-msg-color="#42BA96"
   data-success-msg="You have successfully subscribed."
   data-redirect="false"
>
   <!-- form inserted here via js -->
</div>

Minimal Example

Below is a form example that will use the default options. This will have the same effect as the form above. Being the default options are applied and we showed them in the above example.

<!-- subscribe form -->
<div
   subscribe
   data-audience-id="1f0e3dad99908345f7439f8ffabdffc4"
>
   <!-- form inserted here via js -->
</div>

Examples

Email Opt-in Example

SMS Example

Say if you wanted to build your SMS list, you can customize the form to only show an input to capture the phone number. See the example below.

Inline SMS Example

Mark up for inline example

<div class="col-12 col-md-8 bg-light p-4 rounded shadow my-3">
   <div 
      subscribe=""
      data-labels="false"
      data-audience-id="1f0e3dad99908345f7439f8ffabdffc4" 
      data-fields="phone_number" 
      data-btn-text="Join SMS List" 
      data-btn-div-class="col-auto ml-n5" 
      data-input-div-class="col"
      data-success-msg="Awesome, we got you taped in!"
      >
   </div>
</div>
Form Embeds