如何实现表单First Name与Last Name字段同行内联显示

需求背景 #

现有对接Salesforce的WebToLead表单默认所有字段纵向排列，仅需将First Name和Last Name两个输入框调整为相邻同行显示，其余表单项保持原有纵向布局，无需将整个表单设置为全局内联样式。

实现逻辑 #

• 不修改表单全局布局规则，仅对姓名字段做独立容器包裹，通过弹性布局单独控制这两个字段的排列方式，完全不影响其他表单项的原有布局
• 保留所有原表单的隐藏字段、字段name/value属性，不改动Salesforce提交映射逻辑，保证表单提交功能正常

修改后完整可用代码 #

<form action="https://test.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">
  <input type=hidden name="oid" value="00D0E000000DlzH">
  <input type=hidden name="recordType" value="01224000000B8m0">
  <input type=hidden name="00N1o00000Jsr1R" value="-">
  <input type=hidden name="retURL" value="https://www.maximo.ae/">
  
  <label for="salutation">Salutation</label>
  <select id="salutation" name="salutation" required style="width:100%;margin:4px 0 12px;padding:8px;box-sizing:border-box;">
    <option value="">--None--</option>
    <option value="Mr.">Mr.</option>
    <option value="Ms.">Ms.</option>
    <option value="Mrs.">Mrs.</option>
    <option value="Dr.">Dr.</option>
    <option value="Prof.">Prof.</option>
  </select><br>

  <!-- 姓名字段独立布局容器 -->
  <div style="display:flex;gap:12px;margin-bottom:12px;">
    <div style="flex:1;">
      <label for="first_name" style="display:block;margin-bottom:4px;">First Name</label>
      <input placeholder="First Name" id="first_name" maxlength="40" name="first_name" size="20" type="text" required style="width:100%;padding:8px;box-sizing:border-box;"/>
    </div>
    <div style="flex:1;">
      <label for="last_name" style="display:block;margin-bottom:4px;">Last Name</label>
      <input placeholder="Last Name" id="last_name" maxlength="80" name="last_name" size="20" type="text" required style="width:100%;padding:8px;box-sizing:border-box;"/>
    </div>
  </div>

  <label for="company">Company</label><input placeholder="Company" id="company" maxlength="40" name="company" size="20" type="text" required style="width:100%;margin:4px 0 12px;padding:8px;box-sizing:border-box;"/><br>
  <label for="phone">Phone Number</label><input placeholder="Phone No" id="phone" maxlength="40" name="phone" size="20" type="text" required style="width:100%;margin:4px 0 12px;padding:8px;box-sizing:border-box;"/><br>
  <label for="email">Work mail</label><input placeholder="Email" id="email" maxlength="80" name="email" size="20" type="text" required style="width:100%;margin:4px 0 12px;padding:8px;box-sizing:border-box;"/><br> 
  
  Kindly identify your area of interest?
  <select id="00N0E00000HLPfA" name="00N0E00000HLPfA" title="Area of interest" required style="width:100%;margin:4px 0 12px;padding:8px;box-sizing:border-box;">
    <option value="">--None--</option>
    <option value="Job Opportunities">Job Opportunities</option>
    <option value="Solutions/Services">Solutions/Services</option>
    <option value="Vendor Partnership">Vendor Partnership</option>
  </select><br>

  <label for="lead_source">How did you hear about us?</label>
  <select id="lead_source" name="lead_source" required style="width:100%;margin:4px 0 12px;padding:8px;box-sizing:border-box;">
    <option value="">--None--</option>
    <option value="Advertisements / Marketing Campaigns">Advertisements / Marketing Campaigns</option>
    <option value="Events and Conferences">Events and Conferences</option>
    <option value="Magazines / Publications">Magazines / Publications</option>
    <option value="Referrals / Word-of-mouth">Referrals / Word-of-mouth</option>
    <option value="Telemarketing">Telemarketing</option>
    <option value="Web search (Google, Yahoo, etc)">Web search (Google, Yahoo, etc)</option>
    <option value="Social Media (LinkedIn, Facebook, etc.)">Social Media (LinkedIn, Facebook, etc.)</option>
  </select><br>

  <label for="description">Your Message</label><textarea name="description" style="width:100%;min-height:100px;margin:4px 0 12px;padding:8px;box-sizing:border-box;"></textarea><br>
  <input type="submit" name="submit" style="padding:10px 24px;cursor:pointer;">
</form>

<style>
/* 移动端适配：屏幕宽度小于480px时姓名字段自动转为纵向排列 */
@media (max-width: 480px) {
  form > div[style*="display:flex"] {
    flex-direction: column;
  }
}
</style>

注意事项 #

• 所有Salesforce要求的字段标识、隐藏参数完全保留，和原代码逻辑一致，不会导致Lead数据提交失败、字段映射丢失问题
• 仅对姓名字段组做了布局调整，其余所有表单项的排列顺序、布局逻辑完全和原表单一致
• 补充的基础样式统一了输入框、下拉框、文本域的宽度和内边距，视觉效果更规整，可根据自身网站风格调整样式参数
• 自带移动端适配，小屏幕下不会出现姓名字段挤压变形的问题

内容的提问来源于stack exchange，提问作者Satvinder Kaur