Mobile iframe表单水平滚动移动设备

我有一个HTML表单（保存为.php页面，因为其中有一个小片段），我需要与WordPress一起使用。简单地将源代码输入到一个新的WP页面会引发多个语法错误，因此我使用了一个

iframe

，它总体上是有效的

我的问题是，在移动设备上，

iframe

水平扩展。我启用了滚动条，但我希望表单在移动设备的屏幕内垂直呈现。我尝试了各种视口元标记，但它不起作用。我已经在表单页面html和WP页面中尝试了它们

我能做什么

表单HTML是（没有用于所有验证等的JavaScript）：

CSS是：

 <style type="text/css">

    
 th, td {
    
    padding: 10px;}
  

 input[type=text] { 
  
  box-sizing: border-box;
   border: 2px solid #3380C4;
  border-radius: 8px;
}
    
    

select {
     
  box-sizing: border-box;
  border: 2px solid #3380C4;
  border-radius: 8px;
}    
    
input[type=button] {
  background-color: #1367BF;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}
    
    
    </style>

th，td{
填充：10px；}
输入[类型=文本]{
框大小：边框框；
边框：2px实心#3380C4；
边界半径：8px；
}
挑选{
框大小：边框框；
边框：2px实心#3380C4；
边界半径：8px；
}    
输入[类型=按钮]{
背景色：#1367BF；
边界：无；
颜色：白色；
填充：16px 32px；
文字装饰：无；
利润：4倍2倍；
光标：指针；
}

<iframe src="https://newcastleproms.org.uk/obsfinal.php" width="100%" height="200px" frameborder="0" scrolling="yes"></iframe>

 <style type="text/css">

    
 th, td {
    
    padding: 10px;}
  

 input[type=text] { 
  
  box-sizing: border-box;
   border: 2px solid #3380C4;
  border-radius: 8px;
}
    
    

select {
     
  box-sizing: border-box;
  border: 2px solid #3380C4;
  border-radius: 8px;
}    
    
input[type=button] {
  background-color: #1367BF;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}
    
    
    </style>