Company Blog Support
Frank Hagan
Updated

Contents

    Back to Top

    Bloom Forms Integration

    Integrating Bloom Forms

     

    About

    Bloomexternal link is a WordPress plugin that creates customizable and responsive opt in forms. Bloom's integration with ONTRAPORT uses the APIexternal link 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

    Index:

     

    Prerequisites

    Index ↑

     

    Obtaining the Bloom Plugin

    The Bloom plugin is available from Elegant Themesexternal link 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.

    Index ↑

     

    Obtaining ONTRAPORT API Credentials

    1. In ONTRAPORT, click your email address at the top right

    2. Navigate to Administration > ONTRAPORT API Instructions and Key Manager Show me

    3. Click the New API Key button  Show me

       

      1. If you receive the API Application form, fill it out and submit it. Show me

      2. When your API application is approved, return here and generate the key as shown in step 4 below.

      3. We need to ask these brief questions to help protect both you and each of our other existing customers from potential exploits that could hurt their marketing efforts. Approval takes from one to two business days.

    4. When your API Key request has been granted, return and click the New API Key button again. Name the API Key. Select the Contact Owner and check off all Permissions. Click Save. Show me

       

    5. Copy the App ID and API Key for use later Show me

    Index ↑

     

    Configuring Bloom

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

    2. Click the Upload Plugin button and browse to the Bloom zip file downloaded from Elegant Themes. Click Install Now.Show me

    3. Activate the plugin. A new menu item appears named Bloom. Select Email Accounts.Show me

    4. Click the New Account button and select ONTRAPORT from the Select Email Provider drop down.Show me

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

    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.

    Index ↑

     

    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.Show me

    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.Show me

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

     

    Quick tip: 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 squence 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.

     

    Index ↑

     

    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 / 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.Show me

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

    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.Show me

    4. Click the Publish button, then the HTML Version tab, and copy all of the HTML code.Show me

    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.Show me

    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.Show me


      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 shown in number 7 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 Formsexternal link  article.

    Index ↑

     

    FAQs

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

    A. Bloom is supported by Elegant Themesexternal link

    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 Formsexternal link  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.

    Powered by Zendesk