自定义Insightly HTML联系表单（对齐，间隔字段） [英] Customising Insightly HTML contact form (aligned, spaced fields)

问题描述

我的歉意提前，我有非常温和的编码经验，我试图抓住html ..

在为联系表单应用一些基本代码（下面/附件），我试图整合讨论的内容这里 a>

看起来不太正确，只是像左边的字段标题，后面的实际字段是对齐的，

感谢您提供任何帮助！

感谢很多，我现在设法使它看起来或多或少的想要与一点CSS（附加）。不幸的是，我不能完全按照需要的行为，它提交的洞察精细，但它不会清除提交时的字段，也没有找到一个工作方法提供确认，它发送，除了一个特别丑陋的警报窗口（特别是在chrome）..任何帮助重置提交和一个方法告诉用户，它被发送将是伟大的！我没有尝试一些CSS从这里，但无效...

 < style type =text / css > 
 / ************* CHSE样式表*** / 
 body {
 background-color：transparent; 
 height：360px; 
 width：280px; 
} 
 textarea {
 height：70px; 
 width：273px; 
} 
< / style> 
< style> 
表单标签{
 display：inline-block; 
 width：100px; 
 font-weight：bold; 
} 
< / style> 
< form name =insightly_web_to_contactaction =https://example.insight.ly/WebToContact/Createmethod =post< span style =font-size：14px;> ; span style =color：#FFFFFF; font-weight：bold>< span style =font-family：Open Sans;>< input type =hiddenname =formIdvalue = xxxxxxxxxxxxxxx / xxxxxx ==/> 
< span style =font-size：14px;>< span style =color：#FFFFFF; font-weight：bold>< span style =font-family：Open Sans ;><中心>快速消息：< / center>< br / 
< label for =insightly_firstName>名字：< / label>< input id =insightly_firstNamename =FirstNamerequired =type =text/>< br />< / label>< input id =insightly_lastNamename =LastNamerequired =type =text/>< >< br />< br />< input type =hiddenname =emails [0] .Labelrequired =value =Work email [0] _Value>电子邮件：< / label>< input id =emails [0] _Valuename =emails [0] .Valuerequired =type =text/> ; br />< br />< label for =insightly_background> Message：< / label>< textarea id =insightly_backgroundname =background> 
< / textarea>< br />< br /><中心>< input type =submitvalue =发送讯息>< / center>< / form> ; 
  

解决方案

吸引人的布局的关键是DIVs和CSS。 / p>

首先，使用DIV对各个输入区域进行分组，并将每个区域分为左/右（通过 float ）。

例如，您可能希望标签和输入字段对齐：

div class =snippetdata-lang =jsdata-hide =true>

  .frmGroup {overflow：hidden;}。frmLeft {float：left; width：120px;}。frmRight {float：left; width：300px;}＃thisone {margin-top：50px ;}  

 < form& < div class =frmGroup> < div class =frmLeft>< label for =fn>名字：< / label>< / div> < div class =frmRight>< input id =fntype =text/>< / div> < / div> < div class =frmGroup> < div class =frmLeft>姓氏：< / div> < div class =frmRight>< input type =text/>< / div> < / div> < div id =thisone> < textarea cols =50rows =5>< / textarea> < / div>< / form>  

c $ c> float 指令特别有用，因为它允许并排对齐DIV。然而！它还从HTML流中删除DIV，这意味着它们取零垂直空间。要解决这个问题，请向父DIV添加 overflow：____ 。 例如，我使用 overflow：hidden ]。在底部的jsFiddle中，通过删除/添加该行来实验。

您也可以为特定DIV指定ID，

DIV具有 block 元素的额外优势，与添加< br> 到结束相同的效果。

*还要注意， $ c>< label> 标签实际上只对按钮，复选框等有用，因为它们允许用户通过点击文本标签点击按钮/复选框。

这里是一个jsFiddle 以上演示，您可以尝试。

My apologies in advance, I have VERY modest coding experience and am trying to get to grips with html..

While applying some basic code for a contact form from insightly (below/attached), I'm trying to incorporate whats discussed here

Can't seem to get it right though, would just like the field titles on the left with the actual fields behind them aligned, with a return between each and while sticking to the coding needed for it to work with insightly..

Thanks in advance for any help!

[EDIT 1]

Thanks a lot, I have now managed to make it appear more or less as wanted with a bit of CSS (attached). Unfortunately I can't quite get it to behave as need be though, it submits to insightly fine but it doesn't clear the fields upon submit, nor have I found a working method to provide confirmation that it was sent, other than a particularly ugly alert window (especially in chrome)..Any help on 'resetting on submit' and a way of telling the user that it was sent would be great! I did try a bit of CSS from here but to no avail...

      <style type="text/css">
/*************CHSE Stylesheet ***/
body { 
    background-color: transparent;
height:360px;
width:280px;
}
textarea {
    height:70px;
    width:273px;
}
</style>
<style>
form label{
display: inline-block;
width: 100px;
font-weight: bold;
}
</style>
<form name="insightly_web_to_contact" action="https://example.insight.ly/WebToContact/Create" method="post"<span style="font-size:14px;"><span style="color:#FFFFFF;font-weight:bold"><span style="font-family:Open Sans;"><input type="hidden" name="formId" value="xxxxxxxxxxxxxxx/xxxxxx=="/>
<span style="font-size:14px;"><span style="color:#FFFFFF;font-weight:bold"><span style="font-family:Open Sans;"><center>Quick Message:</center><br/>
<label for="insightly_firstName">First Name: </label><input id="insightly_firstName" name="FirstName" required="" type="text"/><br/><br/><label for="insightly_lastName">Last Name: </label><input id="insightly_lastName" name="LastName" required="" type="text"/><br/><br/><input type="hidden" name="emails[0].Label" required="" value="Work"/><label for="email[0]_Value">Email: </label><input id="emails[0]_Value" name="emails[0].Value" required="" type="text"/><br/><br/><label for="insightly_background">Message: </label><textarea id="insightly_background" name="background">
</textarea><br/><br/><center><input type="submit" value="Send Message"></center></form>  

解决方案

The key to attractive layouts is DIVs and CSS.

First, use DIVs to group the various input areas, and to divide each area into left/right (via float).

For example, you might want the label and the input fields to be nicely aligned:

.frmGroup{overflow:hidden;}
.frmLeft {float:left;width:120px;}
.frmRight{float:left;width:300px;}
#thisone{margin-top:50px;}

<form>
  <div class="frmGroup">
    <div class="frmLeft"><label for="fn">First Name:</label></div>
    <div class="frmRight"><input id="fn" type="text" /></div>
  </div>
  <div class="frmGroup">
    <div class="frmLeft">Last Name:</div>
    <div class="frmRight"><input type="text" /></div>
  </div>
  <div id="thisone">
    <textarea cols="50" rows="5"></textarea>
  </div>
</form>

The float instruction is particularly useful, as it allows you to align the DIVs side-by-side. However! It also removes the DIVs from the HTML "flow", meaning that they take zero vertical space. To counter that, add overflow:____ to the parent DIV. In example, I used overflow:hidden]. In the jsFiddle at bottom, experiment by deleting/adding that line.

You can also give an ID to a specific DIV and style it to have either margin or padding above/below/left/right.

DIVs have the added advantage of being block elements, which has the same effect as adding a <br> to the end.

*Also note that the <label> tag is really only useful for buttons, checkboxes, etc. because they allow the user to click the button/checkbox by also clicking on the text label.

Here is a jsFiddle of the above demo that you can experiment with.

这篇关于自定义Insightly HTML联系表单（对齐，间隔字段）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！