search
Partners Support Log In
Frank Hagan
Updated

Contents

    Back to Top

    Bloom Forms Integration

    About Bloom Forms

    Applies to: ONTRAPORT Pro and above.

    Bloom is a WordPress plugin that creates customizable and responsive opt in forms. Bloom's integration with ONTRAPORT uses the API to create a Contact record in ONTRAPORT and subscribe the Contact to a Sequence. Bloom does not need a corresponding Smart Form in ONTRAPORT to capture contacts, and will work with either an integrated or stand-alone, non-integrated WordPress website.

    bloom-forms.png

    Obtaining the Bloom Plugin

    The Bloom plugin is available from Elegant Themes in their Developer and above package (starting at $89 per year). The Elegant Themes subscription includes access to all of their WordPress themes and plugins for use on as many sites as you wish. Download the Bloom plugin after purchase. You will upload and configure Bloom in WordPress.

    The Bloom plugin can be used on a WordPress site integrated with ONTRAPORT through the PilotPress plugin, as well as on stand-alone WordPress sites. All of the Elegant Themes products are compatible with ONTRAPORT.

    Obtaining ONTRAPORT API Credentials

    1. In ONTRAPORT, click your email address at the top right.
    2. Navigate to Administration > Integrations > ONTRAPORT API Instructions and Key Manager

    3. Click the New API Key button

      new-api-key-button.png
    4. If you receive the API Application form, fill it out and submit it.


    5. Click the New API Key button again. Name the API Key. Select the Contact Owner (we recommend using the Admin user) and check off all Permissions. Click Save.

      create-key.png
    6. Copy the App ID and API Key for use later.

      copy-keys.png

    Configuring Bloom

    1. Log into your WordPress Admin section, click Plugins and Add New.

      wp-add-new.png
    2. Click the Upload Plugin button and browse to the Bloom zip file downloaded from Elegant Themes. Click Install Now.

      wp-install-now.png
    3. Activate the plugin. A new menu item appears named Bloom. Select Email Accounts.

      wp-email-accounts.png
    4. Click the New Account button and select ONTRAPORT from the Select Email Provider drop down.

      select-op.png
    5. Name this integration (any name will do). Paste in the API Key and APP ID obtained from ONTRAPORT. Click the Authorize button.

      wp-auth.png
    6. The Email Accounts screen will show the Account Name and the Sequences your new opt in Contacts can be subscribed to upon opting in.

    Add Contacts to a Campaign using a Bloom Form

    Currently, Bloom forms only pull the first 50 ONTRAPORT Legacy Sequences. Sequences are what ONTRAPORT used before Campaign Builder. We've contacted Elegant Themes team, asking them to upgrade our integration to use Tags instead of Sequences so that you can add Contacts to your Campaigns (or Legacy Sequences or Legacy Rules).

    If you have an ONTRAPORT Pro level or if your account was created before Jun 2017, follow these instructions below.

    1. Log into your ONTRAPORT account. Click the profile icon > Administration


    2. Go to the Legacy Features tab.


    3. Toggle the Sequences feature on. Sequences will appear in the left hand navigation.
    4. Click the Sequences tab and toggle the Rule Steps in Sequences switch on.


    5. Go to Contacts > Sequences


    6. Click Click the + New Sequence button

      new sequence button

      select-op.png
    7. Select Step Sequence

      Select Step Sequence or Date Sequence
    8. Add a Rule step


    9. Schedule step: 0 days and send at Immediate


    10. Name the Rule: Add to Campaign
    11. Click the + Add Action button and select Add/Remove Contact from Campaign



      wp-auth.png
    12. Select Add from the first dropdown and the desired Campaign in the second dropdown.
    13. Click the close button on the step.
    14. Click the Save button to save the Sequence
    15. In your Bloom Form, refresh the page and select the new Sequence you created.

    Create an Optin Form

    Bloom can use its own opt in forms and populate the new Contact record in ONTRAPORT using the API. It subscribes the Contact to a Date or Step Sequence upon opt in. This simplified method is very easy to use. You'll want to create the appropriate Sequence in ONTRAPORT before creating the form in Bloom.

    1. To create an opt in form, click the Optin Forms link in the Bloom menu and the New Optin button.

      wp-new-optin.png
    2. Select an opt in form style, and on the Optin Configuration page's Setup tab, select ONTRAPORT for the Email Service Provider, the account name, and the Sequence in the Select Email List drop down box.

      wp-setup-form.png
    3. Finish the design of the opt in form using the Design and Display Settings tabs Bloom provides.

    Note: Before creating any opt in forms, make sure you have a suitable Sequence for your contacts to be subscribed to when they submit the form. A typical sequence might contain a Rule step to assign Tags, add membership details, etc., and an Email step to welcome them.

    Notes:

    • Initial Opt in Only: Standard Bloom opt in forms work only for new Contacts. Existing Contacts will not have the form processed and will receive a message that they are already on the mailing list. Use the Advanced: Using Bloom's HTML Forms method if you want to have existing Contacts fill out the form.
    • Partner Program: Standard Bloom opt in forms do not pass Partner program information to ONTRAPORT. See the Advanced: Using Bloom's HTML Forms section if you need Partner program tracking.
    • Marketing Tracker / UTM Parameters: The parameters are stripped and are not recorded in ONTRAPORT.

    Advanced: Using Bloom's HTML Forms

    Bloom's HTML form option will accept Smart Form HTML code and preserve the Smart Form's settings, including the redirect or thank you page, subscription to Sequences and applying Tags. Using this feature requires knowledge of CSS to style the Smart Form's input labels, spacing, background color, etc. The method below is a simplified example. Consult with an experienced CSS developer for help with this feature.

    1. In ONTRAPORT, create a new Smart Form using the default fields and settings. Click on each field to edit the field's settings. Remove the Field Label and put the text for that label into the Placeholder

      html-01.png

    2. Set the Submit button field to be center aligned.

      html-02.png
    3. On the Settings tab, select the opt in you desire; we are using Single for this example. Select your Landing Page or custom URL for the thank you page, and add any Tags or Sequences you desire. Other Settings, such as Always On Rules, will not fire as expected but the thank you page redirect, Tags and Sequences will work.

      html-03.png
    4. Click the Publish button, then the HTML Version tab, and copy all of the HTML code. You may not have the HTML Version form code available as explained in our List Bombing article.

      html-04.png
    5. In Bloom, create a new Optin form. Select Custom HTML Form in the Select Email Provider drop down. Paste the HTML code from ONTRAPORT into the box provided.

      html-05.png
    6. Click the Next: Design your optin button and select a form style. Bloom will adjust the number of fields on the optin form to match the ONTRAPORT Smart Form. After selecting the style of form, click the Next: Customize button.
    7. Select the options for your form. At the bottom, in the Custom CSS box, add the CSS to style the input fields and background color surrounding the ONTRAPORT form fields.

      This CSS example provides some of the style declarations you can use. Please consult with an experienced CSS developer for help with custom coding.

      .moonray-form-input { 
      	border: 1px #777777 solid !important; 
      	max-width: 90% !important; 
      	margin-left: 15px !important; 
      	} 
      .moonray-form-input-type-submit { 
      	padding-top: 10px !important; 
      	padding-bottom: 10px !important; 
      	} 
      .moonray-form-clearfix { 
      	background-color: #333333 !important; 
      	} 
      .moonray-form-error-message { 
      	z-index: 1000 !important; 
      	}
      


      Some ONTRAPORT form classes you might use:
      • .moonray-form-input - styles the input fields on the form. End each style declaration with "!important". In the image above, the border, max-width and margin-left are adjusted.
      • .moonray-form-input-type-submit - styles the submit button. In the image above, the padding-top and padding-bottom are adjusted.
      • .moonray-form-clearfix - styles the whitespace that will appear around the form fields. In the image above the background-color is specified.
      • .moonray-form-error-message - styles the error message that pops up when a required field is not completed. The z-index property ensures the error message pops up on top of the rest of the form and can be seen.
    8. Click the Next: Display Settings button and finish configuring the form.
    9. View the form and adjust the form's settings as desired. Test to ensure the form adds the Tags, Sequences and redirects to the proper thank you page. With the settings as shown above, this form appears like this:

      html-07.png

    Notes:

    • Partner Program: The HTML Form will pass through the Partner program information if you use a Direct Link and have the ONTRAPORT tracking script on the page. The tracking script is automatically added by PilotPress. Add the tracking script found in the ONTRAPORT Administration section for sites not integrated with PilotPress.
    • Marketing Tracker / UTM Parameters: The parameters are stripped and are not recorded in ONTRAPORT.
    • Order Forms: You can insert Order Forms using the Advanced HTML Forms method, and all the Settings (such as Success and Fail Rules) will work. However, you must use "Hide Itemization" on the form to make it responsive as explained in our Order Forms article.

    FAQs

    Q. Where can I get support for the Bloom plugin?

    A. Bloom is supported by Elegant Themes

    Q. Can I use Bloom on any WordPress site, even one I don't integrate with ONTRAPORT?

    A. Yes, the Bloom plugin will work on any WordPress site.

    Q. Do Contacts added with Bloom forms need to opt in again?

    A. No, all Contacts coming into your database via a standard Bloom form are set to Single Opt In.

    Q. Does Bloom have order forms?

    A. No, Bloom only has opt in forms for the simplified method. You can insert an order form using the Advanced HTML Forms option but you must make it responsive as explained in our Order Forms article.

    Q. What Smart Form features are available when using the Advanced HTML Forms option?

    A. You can use single, double or double opt in optional. In addition, you can set the "thank you" page to redirect the Contact after submission. The final two features that work are adding Tags and Sequences. Note that Always On Rules, notifications, and other options on the Settings page do not work for regular opt in forms. If you are using Bloom for Order Forms, all the Settings will work as expected, including notifications, and Success and Fail rules.

    Q. Can I use a regular Bloom opt in form with existing Contacts to add them to a new Sequence?

    A. No, by default the standard Bloom opt in forms are for new Contacts opting in only. The form will not process for existing Contacts. You can use the Advanced HTML form option described above to add new and existing Contacts to a sequence.

    Q. Does Elegant Themes get access to my ONTRAPORT billing details or personal profile?

    A. No, Bloom uses our open API and does not have access to your billing details.

    Articles in this section

    Created - Updated
    Have more questions? Submit a request

    Comments

    • Avatar
      Lia Huber | NOURISH

      Is there any way to make that integration more user-friendly, so we don't have to customize the CSS for the HTML form? I'd REALLY like to use various formats of this pop-up (inline text, widget, etc.) to push to various lead magnets, but will likely have existing contacts opting in for them. And this is BY FAR the most intuitive, good looking, solid opt-in generator I've found so far. I would LOVE to be able to use it to its full advantage ...

      Thanks!

    • Avatar
      Frank Hagan

      For most forms you should be able to use the provided CSS as is with the exception of:

      .moonray-form-clearfix {
      background-color: #333333 !important;
      }

      That sets the background color around the form fields. It appears white otherwise. The "#333333" is dark grey; you would edit that for the background color you want using standard HTML color coding.