Details
If you've embedded a form onto your website but it's appearing or behaving differently, it's usually due to something running on your website.
You can test this by opening the direct link to your form in your web browser. If it looks okay there but not once embedded on your website, then something running on the website is adding additional code somewhere along the line which is altering the appearance.
In most cases, the culprit is CSS (Cascading Stylesheets) code - which is what a website uses to change the appearance of text, buttons, form fields and so on.
How-to Guide
Switch To an iFrame Embed
Rather than pasting the form code onto your website, you can try embedding the form on your website via an iFrame instead.
- Select Lists & Forms from the sidebar.
- Double-click on the desired list, to open forms view for that list.
- Select the tab that corresponds to your form.
- Click the Add Form to Website option, as shown.
- Locate the URL (either the direct link or short link) to the form and copy it.
- On your website, use the following code to embed your form instead of the usual form code...
<iframe src="ADD THE URL FROM STEP 5 HERE" H="600" W="550"> - The form will now be embedded in an iFrame on your website. Adjust the width and height values (these are in pixels) to suit your website's needs.
Other Things To Try
Find the CSS That's Causing the Issue & Alter It
If you're familiar with CSS, you could use something like Chrome DevTools to inspect the various components of the form that are not displaying correctly on your website, in order to locate the CSS element(s) that are causing the issue.
Once known, you can then either edit your website's existing CSS code to make it more specific (so that it doesn't affect our form elements), or write CSS code to reverse the changes that existing CSS code on your website are making to the form.
Please consult your web designer or developer for more details.