As we upgrade our gym website of Activ8.club we continue to learn how to use OxygenBuilder and the power it provides. Overall we have been able to work our way up the learning curve with the great user community. Today however I ran into a new problem that did take some time and a call back to my days of working with Javascript and Sharepoint.

Use Case:

Trent wanted to offer certain documents to visitors to the website and before they could download them capture email details to follow up on. Seems simple enough and most sites do that these days. Our technology platform is GymMaster, WordPress (with OxygenBuilder) and ActiveCampaign. This should be simple as there is a plugin for WordPress to embed the ActiveCampaign forms and there are great tutorials on using forms in OxygenBuilder using the modal component.

A huge acknowledgment to Fabrizo Van Marciano and his YouTube channel on using OxygenBuilder as his video on Pop-Up Contact forms was hugely helpful here.

Issues:

As I followed thru the tutorial from Fabrizo it all went well given I was embedded an ActiveCampaign form, then shit hit the fan. The modal would not close after the visitor clicks the ‘Submit’ button. Not good. Spent an afternoon looking at different options. After some experiments I moved backwards to the other options of embedding the form from ActiveCampaign and not using a short code – Success.

Solution:

Firstly I’m need to make you the reader aware that ActiveCampaign say that using the Word Press Plugin provides extra tracking back into their system so be aware we are not going to be using the Plugin. We are a small gym business so necessary (also it may still be happening, I did not delve into the code that deeply).

1. Within ActiveCampaign create the form that you want to have displayed (I am not going to cover any formatting and CSS here as others have that covered.
2. We wanted our form to direct the user to a download URL so add that to the actions that ActiveCampaign will do. (again not going to cover this much).
3. As you finish the form there is the integration option before you save. Copy out the code for the Full Embed. This will give you all the code
4. Put this into a text editor or however you want to.

Scroll to the very bottom of the code and you will find this section

err ? err.parentNode.removeChild(err) : false;
_load_script(‘https://activ8healthclub.activehosted.com/proc.php?’ + serialized + ‘&jsonp=true’);
oxyCloseModal();
}
return false;
};
addEvent(form_to_submit, ‘submit’, form_submit);
})();

I have added in Bold the new line of code you need to add.

5. Open up Oxygen builder and edit the page you want to add this to. I’m not going to cover all the details of adding an Oxygen Modal and formatting it as again many others do better at that.

6. Add a modal to the page. Add div’s sections etc and set the trigger to be the button/text link you want to have the form open from.

7. Add a code block to the model area. Use the PHP/HTML section and paste in the modified code.

8. All done and test away. The new page will open the modal as required and also follow the rules from ActiveCampaign on what fields need to be filled. After the visitor clicks Submit the modal will close and the download of the document from the URL via ActiveCampaign will occur (FYI we are using the great plugin WordPress Download Manager which provides a direct link URL which you can use with the URL redirect of ActiveCampaign forms.

Now I understand how better the ability to just use other HTML and Javascript within OxygenBuilder I may experiment with some additional lines of javascript to let the visitor know that the download of the document is happening.

I have only been using OxygenBuilder for a year now part time and still getting to grips with the full feature set it offers. What has impressed me so much on this little adventure is that the system is closed and very easily allows for the injection of PHP, HTML and Javascript code into the pages so easily.

Hope this might help others who have the same situation. Take care, stay fit in mind and body.

The Activ8 Team. Sydney