AR Forms broken since added Content in Content builder + AR form not visible in builder

[denhen89]

** I posted this already ones, but got no answer. Dont get me wrong, but i am not satisfied with this theme at all due to the fact that i am fighting since couple of days with the same problem and i really hope that i get some help otherwise i really would like to give that license back. I have build already 4 websites with 4 different themes and never had such a problems **

Hello,

i am having a lot of problem since beginning with the themeco pro theme. My target is to put a “AR Forms” form into the header, which has worked ones, but as soon as i moved to the Content builder and added some content, the form broke down and overlapped the content. I really tried everything and its pretty confusing that it worked ones and now no matter what i change in the Header builder, i am just not able to get form into the header with the correct size.
I put the AR-Forms shortcode into a Content Area Element.

Another problem is that the Form is not appearing in the Builder. It also has worked ones, but then it was not anymore visible. I found out that when i moved to the Content builder the form was visibile. I can not really precisly explain what exactly is going on, because its for me such a random behavior.

This is how i would like to display the form inside the header:

Thanks for your help in advance.

[Prasant]

Hello Denis,

I am really sorry for the issues you are facing.

I checked to see if AR Forms is available on WordPress.org plugin repository so that I can test on my dev site but it seems that it’s a premium plugin listed on CodeCanyon. Further, I tried to login using the shared credential but I am getting following message and the given credentials is not working:

ERROR : Invalid username. Forgot Password?

Can you please confirm the login details again so that we can test out the problem?

Thanks.

[denhen89]

Hello,

i somehow managed not to create the user but now you should be able to login with the same login name and password.

Yes, ARForms is a premium plugin which i purchased on CodeCanyon. Slowly i think that the problem is that plugin. I tried to put a lot of text inside the Content area element where i had the form shortcode and its showing the text on the whole width, but when i enter just the form shortcode then the form is displaying not correct. I then went from the Header builder to the Content builder and created a contect area element inside a full width row and the form is also displaying not correct. Its displaying the fields not next to each other, but among themselve if i can say so.

No sure what is going on, but i really tried everything i can.

PS: Sorry for creating the second thread

[denhen89]

So, i just found out that it has to be a problem with the theme and to be honest i have enough of it. I am losing too much time on those problems.
I activated the tweenty nineteen theme and jsut added the shortcode to the content and the form looked as it should. Then i deactivated it and activated the themeco pro theme and the form has displayed almost correctly. Swtiched then from content area element to Text element and put the shortcode inside that element. Form has displayed then correctly.

Then i added some content inside the content builder and the form is again broken now and again i cant fix it, not even with activated the twenty nineteen theme and again the themeco pro.

I am not a coder, so i am not able to tell whats the problem but as i said already, i am losing just time because of such problems. I can not fix this problem since a week. Without that kind of problems the website would be for sure almost done.

[ruenel]

Hello Denis,

Please be informed that Cornerstone and Pro Editor will disable any loading of contents that require jQuery. This is the reason why you cannot view the AR form in the Cornerstone/Pro Editor preview area. As soon as you save the page and view the page live, the AR form will display. Just like what I have in my test page (see the secure note).

Hope this explains it briefly.

[denhen89]

Hello,

thanks for your reply.

Okay, i understand and that the Form is not displaying in the builder is the smallest problem, but why its such a problem to get the form to display as it should in the header. Why it gets broken as soon as i add content in the content builder?

[christian]

Hey Denis,

The problem with the AR Forms when added in the Header Builder is it does not load its arf_front.css unlike when you add it in the Content Builder. They should load the CSS like their maincss. Please relay this to the plugin author or support.

Regarding the issue with the form added in the Content Builder, I’m sorry but it’s not clear to me what the issue is. I checked the test page created by Ruenel and the form displays correctly.

Would you mind elaborating the steps so we could replicate the issue? What specific contents did you add?

Thanks.

[denhen89]

Hello,

thanks for your help. I contacted the support of ARForms and send them what you wrote about the not loaded arf_front.css when the form is in the header. I hope they will help me.

Is there any other contact form plugin which will do what i like to do, in the header? If so, please let me know and i will forget quickly about the ARForms plugin. I just want to continue to work on the website.

Unfortuantely i am really not able elaborate the steps to replicate the issue. When i for the first time added the form inside a content area element in the header then after some container settings the form displayed as it should, but as soon as moved to the “content builder” and added section, rows and elements, the form went broken. Even after deleting everything in the contact builder, the form was still broken. I then managed to get the form displaying correctly in the header after activating the twenty nineteen theme and then activating again the themeco pro theme. But again, as soon as i added something in the content builder the form was broken and and since then nothing helps anymore to get the form displaying correctly.
It such a strange behavior that i am not able to tell what causes the problem but it seems that its not only a problem on the ARForm plugin, but more likely the combination of plugin and theme in the header.

[christian]

Hey Denis,

Simple contact form plugins like Contact Form 7 would surely not cause problems and it’s recommended because it’s light-weight (this means good for page load) and Contact Form 7 is an approved plugin.

You, however, need to code your own CSS if you wish to style the fields like that of AR Forms. For laying out the form, you can use our structural shortcodes namely the [content_band], [container] and [column]. For more details about them, please see the Shortcodes section in our Knowledge Base.

Referring to my previous screenshot, the AR Form is working even with other contents added so, at this time, I could not replicate the issue so I have no solution to provide.

Hope that helps.

[denhen89]

Thanks again for your quick reply.

i would like to use some plugin where i dont need to do custom css.

I see that on the screenshot its displaying correctly, but the form is not in the header. Could you test it inside the header (name is Left Left template).

I will soon try build the same header but i will just add the form without any Headline elements, etc. and see if it then will work, but you said that the form is not loading some css file so i dont believe it will work, but lets see. Otherwise i will need to put the form in the Content section and not header, but that would be not how i like to have it.

[christian]

Hi again Denis,

I assigned your Left Left header to the test page and when I checked in the front-end, it was displayed.

You already know the problem with the form’s layout and that is a stylesheet of AR Forms is not loaded.

Referring to the red box in the screenshot above, it’s because you limited the height of the Container containing the AR Form

You can change the Max Height to none.

Hope that helps.

[denhen89]

Yes i do understand. I hope the support staff from ARForms can fix this problem.

Yes it does display the form, but not as it should display. The fields should not be among themselve but in rows. E.g. 3 fields in one row, etc…, so that the form will fit inside the header and the height should be 592px as the background image is height. Now it is overlapping, because the form displays not as i build it in the form builder.

[christian]

Hey Denis,

The “3 fields in one row” is part of the layout that I mentioned. The CSS responsible for that is not loaded.

Thanks.