-
Posts
-
Hello Team!
I want to embed a typeform (typeform.com) into a page. Typeform has asked me to use this code to create an HTML page on your site with a fullscreen typeform.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<!–Add the title of your typeform below–>
<title>Teacher Application Form</title><!–CSS styles that ensure your typeform takes up all the available screen space (DO NOT EDIT!)–>
<style type=”text/css”>
html{
margin: 0;
height: 100%;
overflow: hidden;
}
iframe{
position: absolute;
left:0;
right:0;
bottom:0;
top:0;
border:0;
}
</style>
</head>
<body>
<iframe id=”typeform-full” width=”100%” height=”100%” frameborder=”0″ src=”https://chordboxx.typeform.com/to/ujLATe”></iframe>
<script type=”text/javascript” src=”https://s3-eu-west-1.amazonaws.com/share.typeform.com/embed.js”></script>
</body>
</html>I’ve tried to use the “code snippet” element and “raw content” element with cornerstone with no success. I’ve also tried to paste the code in the wordpress text with no luck either as it is not embedding the form at 100% of the available screen area inside.
It should show on a full screen like this (https://chordboxx.typeform.com/to/ujLATe).
Please help! 🙂
Thanks
RicardoHi there,
Add iframe tag in raw content element :
<iframe id="typeform-full" width="100%" height="100%" frameborder="0" src="https://chordboxx.typeform.com/to/ujLATe"></iframe>Add following code in child theme’s functions.php file :
function my_custom_Script() { ?> <script type="text/javascript" src="https://s3-eu-west-1.amazonaws.com/share.typeform.com/embed.js"></script> <?php } add_action( 'wp_footer', 'my_custom_Script', 99999 );Hope it helps.
Unbelievable!
I was just about to post the same question as I had this silly skinny bar where my typeform should have been.This support rocks!
Ricardo I PROMISE I’m not here to hijack your post, you’re doing 100% the same as I’m trying to achieve so figured we all combine forces for a quicker resolution to this problem.
The issue was on the typeform end, you don’t choose the bottom option (full page), choose the embed option, I’ve taken a screenshot to show how to get this working —> http://screencast.com/t/niCFLpoAkl
Hope this helps X support too!
Paul.Thanks for sharing Paul 🙂
Thanks Paul and Staff! It worked 🙂
Ricardo
Glad to hear that.
Have a great day! 🙂
Hi guys!
This was the exact solution I was looking for… but I’m not sure what I’m doing wrong.
Would you mind taking a look?
<iframe id=”typeform-full” width=”100%” height=”100%” frameborder=”0″ src=”https://my401k.typeform.com/to/FNzrPm”></iframe>
Hi There,
Thanks for writing in! Please remove the <p> tag you wrap on the iFrame or add the custom css below on customizer.
#x-section-1 p { height: 30em; }Hope it helps, Cheers!
Hi, that worked pretty well, thanks! Not sure how to remove the P tags so I just used the code. Last thing, how can I change that grey background on the bottom to white to match the survey?
Thank you SO much 🙂
And also make it so there isn’t a double scroll on the page? Maybe it won’t work using the code. The whole goal was to make it full screen so there wasn’t the double scroll, and it seemed like the other solution earlier in this post worked for others to do that on X… not sure if I’m just doing something wrong
Hi there,
Thanks for writing in! The grey background seems to be a large background image, try adding this CSS under “Customize > Custom > CSS” to remove it:
.backstretch { display: none; }To remove the second scroll change your iframe code from:
<iframe id=”typeform-full” width=”100%” height=”100%” frameborder=”0″ src=”https://my401k.typeform.com/to/FNzrPm”></iframe>To
<iframe id=”typeform-full” width=”100%” height=”100%” frameborder=”0″ scrolling="no" src=”https://my401k.typeform.com/to/FNzrPm”></iframe>Hope this helps.
Thanks! 🙂
Thank you so much for your help! I was still having issues so I followed the directions on this page:
http://www.wpbeginner.com/wp-themes/how-to-create-a-custom-page-in-wordpress/and inserted the code provided by typeform into the PHP file, and used that as the theme for my page. Thank you for all your help, you guys are the best!
You’re most welcome. 🙂
