Select Page

Using SendFox with Bloom

If you are an Elegant Themes subscriber and you use Divi you are probably aware of their plugins too. Today I’m talking about Bloom – their fantastic plug in that lets you add beautiful email opt-in forms to your WordPress blog. I plan to write articles about both Elegant Theme and SendFox and why they should be on your radar soon. I’ll link to them here when I do but for now I’m going to assume you use both.

Bloom has a list of mailing list services that it natively works with but unfortunately the service I want to use, SendFox (the free email marketing system for content creators from Noah Kagan’s App Sumo) isn’t on that list.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f67af5d0-b2e4-46bd-aec8-aab1061b412a/Untitled.png

Getting things up and running isn’t quite as easy as simply plugging in a MailChimp or SendInBlue user name but it can be done.

First things first, get Bloom installed. Download it from your Elegant Themes account page then head over to your WordPress dashboard and upload it via Plugins>Add New in the usual way.

Next up, you need to head over to SendFox and generate a form. Log in to your account and go to Forms. Once you’ve got your form all set up something like this, publish it and you’ll get the embeddable HTML form.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/460cd10b-631e-48ad-a255-31afb4b4e756/Untitled.png
https://s3-us-west-2.amazonaws.com/secure.notion-static.com/2c9df857-f5cb-4264-854f-65392b614086/Untitled.png

Now keep that code handy and head over to your WordPress installation and look for Bloom in the sidebar. Click New Opt-In. I’m going for a Fly In this time but Bloom can display our opt-in form in several different ways, have a play around and see which works best with your site and your audience.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/374cec83-d055-4234-96db-d6fc53906127/Untitled.png

Even though Bloom doesn’t natively support SendFox we can chose Custom Form and paste in the code we grabbed from SendFox just now.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/695666e7-3ec8-4a21-bce6-4a673fb25822/PasteCustomHTML.gif

Next up, pick one of the 100+ templates.

You can now use all the functionality of Bloom to customise your form and make it irresistible to your visitors. I’ve kept it basic here and just tweaked some of the colours to match the look of the rest of the site.

I like to make one more tweak before setting the opt-in live. Because the form that SendFox generates is basic HTML, Bloom does a good job of styling it but there’s one thing I want to change to dress it up. The input fields in the form (Name and Email in my case) butt up against each other and I’d like just a little spacing so I add this little but of CSS at the very top of the form. Go back to the Setup page of the Opt-in setup and add the following.

<style>
input {
margin-bottom: 10px;
}
</style>

All that’s left to do now is tell Bloom where you want the opt-in to be displayed. There are loads of options here again but I just want the form to show on post pages and only when the reader has reached the bottom of the post – nobody want’s a signup for blocking their view mid-read!

And that’s it – Bloom with SendFox although this will also work for any unsupported provider that Bloom doesn’t natively support.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b046039b-efac-4e24-8107-64b5f34c9753/Untitled.png

Now go build your list!

7 Comments

  1. Lukasz

    Thanks for this tutorial, Simon. It was very helpful.
    I connected SendFox form with my website using Blooom.
    But I cannot get the distance between First Name field and Email filed.
    I added: input {margin-bottom: 25px;} but the fileds still stick together.
    Do you have any idea, how to add 10px distance?

    Reply
    • Simon

      Hi Lukasz
      If you are pasting it in the the right place then input {margin-bottom: 10px;} should do it. If you are talking about horizontal space however, try using margin-left or margin-right to get the desired effect.

      Reply
  2. Lukasz

    Hi Simon,
    thanks for the tip.
    But I’d like to ask you if you are ok with SendFox/Bloom combo.
    In my case lots of users are blocked, they cannot subscribe to the list.
    Do you have this kind of issues?

    Reply
  3. Ben

    Awesome! You’ve just made my day Simon.
    Simple and efficient!

    And with your little tip for the gap, it’s perfect.
    Subscriptions live and running.

    I just have one problem though. My submit button is very narrow and can hold only the text OK.
    I’ve spent hours trying to sort it out but I have no idea what to do or where to go.

    Thanks again Simon !

    Reply
    • Simon

      Hey Ben, try adding style=”width: 100%;” after the button type=”submit” in the code.

      style=”width: 100%;” makes it the full width of the pop up or you can use
      style=”width: auto;” to make it fit what ever button text you want.

      Hope that helps, Simon

      Reply
      • Ben

        Wow!
        Thank you Simon. You are the best!
        I thought it would be too complicated to fix it and I gave up.
        But no, reading your reply it seems so easy

        I am really grateful.
        I’ll try it as soon as I can and I’ll let you know how it goes.

        Thanks again

        Reply
      • Ben

        Just a little feed back on your last message.
        style=”width: auto” works perfectly fine.

        Thanks a lot Simon

        Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.