时间戳

首页 > 解决方案 > 如何使嵌入谷歌表单响应？

html - 如何使嵌入谷歌表单响应？

问题描述

我正在做一个项目，但还不知道任何后端代码，所以我正在使用嵌入谷歌表单，但这不是响应式的。这是我试图使该表单响应的代码，但不知何故该代码不起作用。

.contact-form {
    background-image: linear-gradient(to right, #d8d8d8, #3c557f);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    padding: 50px;
    .contact-form-conainer {
        padding: 50px !important;
        @media screen and (max-width: 768px){
            font-size: 15px !important;
            margin: 0 20px 0 20px !important;
            padding: 10px !important;
            overflow: hidden !important;
        }
        @media screen and (min-width: 576px){
            font-size: 15px !important;
            margin: 0 20px 0 20px !important;
            padding: 10px !important;
            overflow: hidden !important;
        } 
        @media screen and (max-width: 576px){
            font-size: 15px !important;
            margin: 0 20px 0 20px !important;
            padding: 10px !important;
            overflow: hidden !important;
        }
    }
}</style>


<div class="container-fluid contact-form">
        <div class="contact-form-container">
            <iframe
                src="https://docs.google.com/forms/d/e/1FAIpQLSe_ajLSx8IN9zQNS_SIwOyPV-iIMtoTj-nHOqyu5nSR10GTIQ/viewform?embedded=true"
                width="640" height="780" frameborder="0" marginheight="0" marginwidth="0">Loading…&lt;/iframe>
        </div>
</div>```

标签： htmlcssgoogle-forms

解决方案

你快乐吗你的 HTML 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 100%; /* 1:1 Aspect Ratio */
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}
</style>
</head>
<body>

<h2>Responsive Iframe</h2>
<h3>Maintain Aspect Ratio 1:1</h3>
<p>Resize the window to see the effect.</p>

<div class="container"> 
  <iframe class="responsive-iframe" src="https://www.morrmat.com"></iframe>
</div>

</body>
</html>

推荐阅读