Why my form is not showing properly in my website?

Hi 

I have created a lovely 3-page webform via your platform.

Unfortunately I have an issue I am unable to resolve.

If I embed it as an iframe I lose transparency and other design features.

If I embed it as a code then I have perfect design, but functionality gets lost - I click the button to go to the second page of the form but nothing happens.

I enclose the link to the page where the form is embedded as code and attach a screenshot of how it looks with iframe

Please advise

Hi,

I have checked your website where the form is embedded and I reproduced the issue. Your form is not working on the website. 

To resolve this, I need some clarifications first. I need to know how you implemented the source code. See the source code screen here:

Have you copied the code and embedded in your website? Or have you downloaded the source code and implemented it at your website? The reason I'm asking this is, when I inspect your page, there seems to be .js file missing and that is why the form is not working with source code.

I kindly ask you to clarify how you embedded the form. We will be waiting for your response. We can further investigate the issue upon your clarification.

Thank you for bringing it up. 

Hi 

Thank you for your prompt response.

I tried both, but I got confused with Download.

Currently I am trying to copy code and paste it on the page - in this case, as I said, I get the look, but I cannot achieve functionality. 

Do I need to download some js files? 

Sorry, I have no knowledge of Java, hence your forms look like perfect solution for my kind)))

I notice that you have embedded the form using the full source code on your web page. It seems that there is a conflict with other scripts on your web page that is causing the issue. Could you try embedding the form using default Javascript embed code and let us know how it works.

Let us know if you need any further assistance. We will be happy to assist.  

Ok, I did so - you can check yourself:

http://www.new-boiler-costs.co.uk

In Chrome I get the functionality but not the design.

In Firefox I don't have both - functionality and design.

I checked your form in Chrome and FireFox, the showed up the same, functional but with problem in design.

When I inspected your form I noticed that you embedded your form by using script and iFrame method:

So please try removing script code and adding only iFrame. Then, please try copying and pasting the below CSS code in your Custom CSS field:

element {

margin-top: 40px!important;

}

It should allign the form like this:

Please try and let us know if it works for you.

Thank you!

Sorry, but I don't know what you are talking about in the above message.

I do not have both script and iFrame embedded on my website

I did check it just now and that's how it looks like:

Also, the issue with CSS is not only in the margin from the top - the width, the transparency of the form is also gone.

Can someone help me at last please?

I have tried submitting your JotForm on the web page and the Thank you page is displayed properly. So the functionality is working fine on the web page.

I notice that the form is embedded in a part of a table. Since the form the is responsive, it is adjusting to the width of the column of the table. 

You may adjust the width of the table column on your web page so that the form is displayed correctly. 

Hope this information helps! Let us know if you need any further assistance. We will be happy to assist.  

I have fixed the width of the column the form is embedded into. It has some effect. However, the form is designed at a fixed width of 432px, responsive design was switched off. So, why does it even change its width if it is fixed? Moreover, the background still lost opacity and rounded corners. How do I fix that?

I checked your form and you can set the form transparency by following:

1. Go to Preferences:

2. Click on Form Styles:

3. Under Page Background you can set your color and transparency:

4. It looks like this after adjusting:

Does that look like something you wanted?

Please let us know.

Thank you!

Ok, now we have achieved some opacity, thank you. However, there is still some layer under the form which gives square corners?

Could you try adding the following CSS code to the CSS file on your web page?

iframe#62874755377371 {

    border-radius: 20px;

}

It should be displaying as shown below after adding the above code to your web page.

The other questions are moved to a separate thread and shall be addressed there shortly.

Remove background color of the active input field: https://www.jotform.com/answers/974734

Labels displaying on the top: https://www.jotform.com/answers/974736

Thank you!