Integration of Form into WordPress via HTML didn't work right

Product Support
1

I first want to say that while I’m much more technical than the average computer user, there are some Mautic concepts I don’t have down yet and I use words and phrases to express things that are not the “proper” nomenclature within Mautic.





I’m trying to integrate a Muatic form to an opt in box on my website using the form HTML.



For what it’s worth, my WordPress theme is OptimizePress 2.0.





I created a form in Mautic named “Newsletter Signup Sidebar”.



I then used the “Manual Copy” to copy the form HTML.



I then paste that form HTML into my WordPress theme where appropriate.



There are two URLs of interest.

  1. Within the form in Mautic I’ve specified the form Successful Submit Action should be a redirect to… http://zippe.biz/thank-you-for-joining-our-mailing-list/.
  2. The HTML code contains an “action” tag that specified a URL of… https://imu.mautic.com/form/submit?formId=2



    When the action tag is set to… https://imu.mautic.com/form/submit?formId=2

    After I hit the submit button, a new browser tab opens, the URL of https://imu.mautic.com/form/submit?formId=2 is loaded, and the page is blank.

    However the lead record did get created.



    As an experiment I manually changed the action tag to http://zippe.biz/thank-you-for-joining-our-mailing-list.



    After I did that the redirect page loaded properly, but the lead record in Mautic did not get created.



    I hope this makes sense.



    I also created a screencast video showing the details, and you play it via the link below.



    Screencast (with audio) showing what’s happening



    Am I doing something wrong?: And if so, what am I doing wrong?



    Or is something not working right?
2

I first want to say that while I’m much more technical than the average computer user, there are some Mautic concepts I don’t have down yet and I use words and phrases to express things that are not the “proper” nomenclature within Mautic.

I’m trying to integrate a Muatic form to an opt in box on my website using the form HTML.

For what it’s worth, my WordPress theme is OptimizePress 2.0.

I created a form in Mautic named “Newsletter Signup Sidebar”.

I then used the “Manual Copy” to copy the form HTML.

I then paste that form HTML into my WordPress theme where appropriate.

There are two URLs of interest.

  1. Within the form in Mautic I’ve specified the form Successful Submit Action should be a redirect to… http://zippe.biz/thank-you-for-joining-our-mailing-list/.
  2. The HTML code contains an “action” tag that specified a URL of… https://imu.mautic.com/form/submit?formId=2

When the action tag is set to… https://imu.mautic.com/form/submit?formId=2
After I hit the submit button, a new browser tab opens, the URL of https://imu.mautic.com/form/submit?formId=2 is loaded, and the page is blank.
However the lead record did get created.

As an experiment I manually changed the action tag to http://zippe.biz/thank-you-for-joining-our-mailing-list.

After I did that the redirect page loaded properly, but the lead record in Mautic did not get created.

I hope this makes sense.

I also created a screencast video showing the details, and you play it via the link below.

Screencast (with audio) showing what’s happening

Am I doing something wrong?: And if so, what am I doing wrong?

Or is something not working right?

3

For what it’s worth I created that screencast for my WordPress theme vendor which is why it sounds as if I’m talking to them. I am.

4

I had submitted a support ticket through the Mautic ticket system which Adam responded to, so I have made progress.

My WordPress theme provides two way to displays form from other system:

Autoresponder Integration is where the styling of the form is done within my WordPress theme and all they need is the stuff inside the tag. This is not working to display a Mautic form into my WordPress theme.

HTML is where I simply embed HTMP code to display the form (styling and everything) from the other site (Mautic in this case).

The HTML method works, but creates forms that are plain.

I tried using the Theme specification within the Mautic form but no matter what theme I selected the form never looks any different.

My question now is how do I adjust the styling of the Mautic form.

The attached screenshot shows the difference visually in what the form looks like using the styling that comes with the WordPress theme vs the styling that comes from Mautic.

5

I also have issues with integrating the forms in my Wordpress site.

If I use the shortcode the form is rendered completely wrong. If I use the “automatic” alterantive the form shows up nicely on a desktop computer, but not at all on an ios device.

you can try to form on www.thomasnorden.se/kontakt/

/Thomas

ps. I sooooo want Mautic to work smoothly because I see great opportunities in it for my smaller customers

6

Kevin,

Perhaps Adam has already pointed this out, but I would guess that the reason it’s not integrating well is because Optimize press is stripping out the JavaScript.

I’m having the same problem although I’m using a different Theme/Plug-In combo, “Thrive Leads” from Thrive Themes. The lead is created in Mautic but like you I get the blank white screen. You can see more here on this post:

https://www.mautic.org/community/index.php/419-how-to-assign-download-and-asset-action-v-1-1

Have you checked the page source to see if the JS from the Mautic form is still there or being stripped out? If it’s gone, perhaps try inserting it manually on the page. That’s what I’m trying to do, with no success thus far.

As for the styling of the two forms, have you tried using the right-click “Inspect Element” feature on your browser? Or Firebug with Firefox? That will give you the styling of the individual elements. You could could then assign the styling to the elements on your HTML form. Use the “Inspect Element” feature to determine what those are as well.

Hope that helps,
Shannon

7

Thomas, if you’re using hosting, the form dropping out on mobile, might be an SSL issue, it was with mine. Go into your WPmautic settings and change the https to http and see if that works.

8

I received a reply from OptimizePress support…

Start Reply
Hi Kevin,

Thanks for reaching back out to us. I’m very sorry for the delay.

I have taken a look at that service and watched the video you sent originally with this other ticket. I have also logged in and looked at the code:

First name
Email
Subscribe
I noticed in the video that the form code had javascript, which probably got striped out as that would cause some issues.

Generally most autoresponder services would work fine with OP with the custom form method however there are some that don’t work well.

Are the signups being added to the list?

The way this autoresponder service is processing the form is not ideal and is probably causing issues which is why OptimizePress thinks the thank you page url is the one listed under the action code.

We have seen similar issues like this before and unfortunately this comes down to the code being provided to you that is causing the issue. OptimizePress can only accept html code that doesn’t rely on javascript or jquery to run within the opt-in forms, so something is happening here where the data being sent back through is not being processed by your autoresponder service due to the other scripts not running as those aren’t compatible with the opt-in forms we provide as elements in OP.

You may wish to try using a custom html element to see if it works that way, but unfortunately there is not a way to use the opt-in form styles with those.

We aren’t able to assist with integrating 3rd party autoresponder services with OptimizePress (either through the API or custom html methods). If the code provided doesn’t work, I’m afraid it wouldn’t be possible for us to fix it.

Please let us know if you have additional concerns or questions and we’ll be happy to help.

Kind Regards,

Kevin

OptimizePress Support Team

End Reply

I was afraid I would wind up stuck between two support organizations each telling me the other software is not working properly.

They insist the autoresponder system must provide HTML code, with javascript or jquery. Mautic provides javascript. Is there an option to obtain code for a form from Mautic that does not contain javascript of jquery?

That may be my only option to allow me to move forward, and I really really really want to move forward.

9

I meant “must provide HTML code, WITHOUT javascript or jquery”.

10

Here is the response I received from OptimizePress support about why they don’t accept Javascript.

=== start
Hi Kevin,

The opt-in form elements within OptimizePress are quite complex, and so is the live editor. Unfortunately some JavaScript codes aren’t able to be used due to how they would conflict with the live editor, so those generally would get striped out. It’s not that we don’t want you to be able to use these, it is just due to how the coding works for these in relation to the code you are trying to put in.

I’m afraid I don’t have an exact answer as our developers work separately from us and while we are happy to help with the main features of OptimizePress, I’m afraid we don’t have the specific details about why this specific code won’t render. JavaScript in some cases just doesn’t play well with OptimizePress which seems to be the case here with this form as it seems it relies heavily on its scripts to function with regards to the redirect so unfortunately that part won’t work. If they had a more basic html form that didn’t use Javascript it would probably work.

It may be possible to create your own html code to work with their platform but as you know, that is not something we can really help with as our support doesn’t include 3rd party script integrations or helping with any code that we don’t already have available or already came with OP.

I’m really very sorry for any inconvenience. I do know from previous tickets that this isn’t the first time you have tried to get other plugins or scripts to work with OP. I certainly realize how frustrating it can be sometimes with WordPress trying to get various plugins/scripts running smooth. There are many factors that come into play when things don’t seem to work together.

Kind Regards,

Kevin

OptimizePress Support Team
=== emnd

11

Hi guys, long story short, the form submission problem should be fixed in the upcoming version 1.1.3. (You can check if that’s your case)

Slightly longer explanation: It’s happening because your websites (probably WYSIWYG editors) are striping out the iframe element which is needed for javascript to communicate with a different domain. Search for CORS if you want to read about the problematic.

Long explanation:
https://www.mautic.org/community/index.php/510-looking-for-wordpress-plugin-popup-with-exit-intent-that-works-/p1#p2025
https://github.com/mautic/mautic/issues/605

12

Having the same problem with thrive leads :
When i push the submit button it goes to the url set on the form action

in this case the plugin doesnt strip the iframe, it stips the javascript :

13

Are you using Mautic version 1.1.3?

Mautic forms created in a older version also has to be re-build, because the HTML is cached. There is a button for it. Select all your forms in the Form Manager and click the button wirh arows in the circle.

14

[quote=2268:escopecz]Are you using Mautic version 1.1.3?

Mautic forms created in a older version also has to be re-build, because the HTML is cached. There is a button for it. Select all your forms in the Form Manager and click the button wirh arows in the circle.[/quote]

Yup Version 1.1.3, dowloaded and installed yesterday.

I’ve tried a lot of diferente things like add the script and the iframe in de source code of my website but it still redirect to the wrong page.

Also tried to add one html fiel in ThriveLeads Builder and the lead record is created, but it doesnt redirect or shows any message.

In the mean time i found an hack that ist not the perfect way to do things but its working. I’ve installed the WP-Mautic Plugin and inserted the shortcode in the HTML fild that ThriveLeads builder has.
He his recording contacts and showing the message or redirecting.
This way I manage to use some ressources that the plugin gives me like A/B Testing, when and were to show the optinbox but all the Form styling has to be done codding.

PS: sorry my english, hope it makes sense

Luis

15

Hi @Luisfm

I am using thriveleads builder as well. If you want a better looking form without the hassle of coding the style of your form, you can do this:

  1. Copy the HTML code of your Mautic form (Manual Copy)

  2. Login to your wordpress site

  3. Go to Thrive Opt-in > Add new > Give your opt-in a name (example: “Mautic”) > then paste the code from Step 1 in the box where it says “autoresponder code”

  4. Click the “Generate Fields” button

  5. Delete the one line highlighted in yellow below:

  6. Click “Publish”

  7. Go to your thrive content builder

  8. You should now see your new opt-in > drag and drop this to your content builder

  9. Edit the style and look of your form thru your content builder, no more coding necessary.

Hope this helps :wink:

16

hey @fuzzyboy

Thanks for your help but unfortunatly it didn’t solve my problem. it solved my problem!
I’m not using the thriveleads builder, i’m just using the popup plugins from thriveleads.
Tried to delete the line you marked but i’m getting the same error, after click on submit it redirects to mautic.mydomain.com/form/submit?formId=2 and it should redirect to mydomain.com/thank-you-page and it worked!

:smiley:

17

Thanks for posting this guys!!! @Luisfm @fuzzyboy

I was curious to see how this jives with Thrive related to the single name input on Thrive Leads and the FirstName LastName inputs on Mautic. I would like to keep my optin to just name & email for simplicity sake!

18

Hey y’all,
I’m not seeing a Thrive Opt-In in my Wordpress dashboard. Is this an additional plug in I need to purchase or install beyond the Content Builder / Lead Pages?

Thanks
Derek

19

@zennerd - Yes. Thrive Leads is a separate plug-in. It will also be a separate purchase if you only bought the Content Builder. If you purchased an Agency License you would already have it.

Hope that helps.

20

As near as I can tell, the above fix no longer works. The line that’s supposed to be deleted is no longer present in the Mautic form code. I went through the form code line-by-line, deleting each one, in turn, and no love.

For me, Mautic form code will not work in a Thrive form. And currently, it seems that the oAuth1 API is broken as well.

https://www.mautic.org/community/index.php/5389-urgent-if-you-update-and-are-using-thrive-api-integration

I couldn’t get the API to work, either.
Keith