提问人：Taaajn 提问时间：9/28/2023 更新时间：9/28/2023 访问量：30
设置 Google 表单样式
Styling google forms
问：
我正在尝试通过创建自己的 html 并使用 entry.xxxxxxxxx 名称来自定义谷歌表单的布局。这是一个多部分的 Google 表单，我认为这使得它更难管理。
我使用了 Stefano Brilli 的 Google 表单 HTML 导出器，但我没有设法让页面历史记录正常工作。
所以我通过lazycode购买了Just Forms Pro Advanced来调整这个表格。 但是表单以某种方式使用了输入名称，在这种情况下，我必须将其更改为 entry.xxxxxxxxx。而且这个名字包含一个点，这在jquery中显然是不支持的？有人对此有解决方案吗？有没有办法使用，例如，id而不是名称？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contact form</title>
<!-- Your META here -->
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0" name="viewport">
<!-- Stylesheets -->
<link rel="stylesheet" href="j-pro/css/demo.css">
<link rel="stylesheet" href="j-pro/css/font-awesome.min.css">
<link rel="stylesheet" href="j-pro/css/j-pro-modern.css">
<script src="j-pro/js/jquery.2.2.4.min.js"></script>
<script src="j-pro/js/jquery.j-pro.js"></script>
</head>
<body class="bg-pic">
<div class="j-wrapper j-wrapper-640">
<form action="j-pro/php/action.php" method="post" class="j-pro j-multistep" id="contact" enctype="multipart/form-data" novalidate>
<div class="j-header">
<p>Contact Us</p>
</div>
<!-- end /.j-header-->
<div class="j-content">
<!-- start steps -->
<div class="j-row j-step-titles">
<div class="j-span6 j-step-title">
<div class="j-steps">
<span>Step 1:</span>
<p>Personal info</p>
</div>
</div>
<div class="j-span6 j-step-title">
<div class="j-steps">
<span>Step 2:</span>
<p>Message</p>
</div>
</div>
</div>
<!-- end steps -->
<fieldset>
<!-- start First name Last name-->
<div class="j-row">
<div class="j-span6 j-unit">
<label class="j-label">First name</label>
<div class="j-input">
<label class="j-icon-right" for="first_name">
<i class="fa fa-user"></i>
</label>
<input type="text" name="entry.671783982" id="first_name" class="name-group">
</div>
</div>
<div class="j-span6 j-unit">
<label class="j-label">Last name</label>
<div class="j-input">
<label class="j-icon-right" for="last_name">
<i class="fa fa-user"></i>
</label>
<input type="text" name="last_name" id="last_name" class="name-group">
</div>
</div>
</div>
<!-- end First name Last name -->
<!-- start email -->
<div class="j-unit">
<label class="j-label">Your email</label>
<div class="j-input">
<label class="j-icon-right" for="email">
<i class="fa fa-edit"></i>
</label>
<input type="email" name="email" id="email">
</div>
</div>
<!-- end email -->
</fieldset>
<fieldset>
<!-- start subject -->
<div class="j-unit">
<label class="j-label">Your subject</label>
<div class="j-input">
<input type="text" name="subject" >
</div>
</div>
<!-- end subject -->
<!-- start message -->
<div class="j-unit">
<label class="j-label">Your message</label>
<div class="j-input">
<textarea spellcheck="false" name="message"></textarea>
</div>
</div>
<!-- end message -->
</fieldset>
<!-- start response from server -->
<div class="j-response"></div>
<!-- end response from server -->
</div>
<!-- end /.content -->
<div class="j-footer">
<button type="submit" class="j-primary-btn">Send</button>
<button type="button" class="j-primary-btn j-multi-next-btn">Next</button>
<button type="button" class="j-secondary-btn j-multi-prev-btn">Back</button>
</div>
<!-- end /.footer -->
</form>
</div>
<script>
$( document ).ready( function(){
$( "#contact" ).justFormsPro({
rules:{
entry.671783982: {
requiredFromGroup: [1, ".name-group"]
},
last_name: {
requiredFromGroup: [1, ".name-group"]
},
email: {
required: true,
email: true
},
subject: {
required: false
},
message: {
required: true
},
},
messages:{
entry.671783982: {
requiredFromGroup: "First name or last name is required"
},
last_name: {
requiredFromGroup: "First name or last name is required"
},
email: {
required: "Email is required",
email: "Incorrect email format"
},
subject: {
required: "Subject is required"
},
message: {
required: "Message is required"
}
},
formType: {
multistep: true
},
});
});
</script>
</body>
</html>
我尝试了多种其他方法，但此刻我完全被困住了。如果人们总是填写表格的所有字段，我就可以让它工作。因此，如果所有内容都正确填写，则不需要检查。但是，如果他们不这样做，表单会重定向到谷歌表单本身来完成它，所以这看起来有点傻。 这就是我购买此表格的原因，但现在我因为 entry.xxxxxxxxx 而陷入困境。
我确实需要 Google 表单，因为它还与 Document Studio 协同工作，后者会在提交 Google 表单时触发操作。
答： 暂无答案
评论