Contact Form Embeds

This feature is in beta and available to all users.

The contact form embed allows you to embed contact forms on your website upon submission an email will be sent to the workplace administrators contaning the form details.

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 contact 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.

Contact 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.

Settings > Email Settings > Admin Emails > Notification Settings

Please note, this data submitted is currently not saved anywhere in your workplace. It just sends an email to the team members set in notification settings.

<!-- contact form -->
<div
   contact
   data-labels="true"
   data-label-class="form-control-label"
   data-fields="first_name, last_name, phone, email, message"
   data-input-div-class="col-12 form-group"
   data-input-class="form-control"
   data-textarea-div-class=""
   data-email-placeholder="who@company.com"
   data-message-placeholder="Begin typing your message.."
   data-btn-div-class="col-12 form-group"
   data-btn-text="Contact Us"
   data-btn-class="btn btn-primary btn-block"
   date-msg-class="text-center"
   date-error-msg-color="#DF4759"
   date-success-msg-color="#42BA96"
   date-success-msg="We received your request; we will get back to you as soon as we can."
   data-redirect="false"
>
   <!-- form inserted here via js -->
</div>

Contact Form Example

Form Embeds