0

I've built a contact page on my org's site. It currently has a single Salesforce web-to-case form, but I need to have two separate forms (one for app users and one for general inquiries). I've been trying to troubleshoot an issue with the second form on the page not submitting to the server. I can switch the positions of the forms, but the first one on the page is the only one to successfully submit. So I updated the field id and name values to be unique. Here's what I've tried:

  • Switched form positions. Result: Only first form submits, whichever form is first on the page.
  • Made all fields, including hiddens, unique. Result: no submissions.
  • Made non-hidden fields unique. Result: Only first form submits, and all fields with non-original (Salesforce provided) id and name values come through blank.

It seems like each field's id and name values are important to the server when submitting, but I can't have non-unique values on the page together.

I've been working on this for too long already. My backup plan is to place the forms on separate pages, but the preferred outcome is for both forms to be on the same page. Can anyone provide an answer? Is it possible to have multiple web-to-case forms on the same page?

Brandon
  • 69
  • 1
  • 8

1 Answers1

1

It is possible to have more than 1 web-to-case form on a webpage.

When generating the HTML code for the form you need to change the id value for each of the forms however the name attribute will need to remain the same. The name is what is relevant when you post the data to the server. The id is the unique identifier for the DOM on your webpage. This is why the first form works (where the id is originally assigned) but the second one does not work (duplicate is ignored).

You can refer to the code example below to get an idea on how to structure each of your forms. Notice the use of the name value being repeated but the id attribute is unique

<!-- Form A -->
<form>
    <!-- Your form content above -->
    <label for="name">Contact Name</label><input  id="name-a" maxlength="80" name="name" size="20" type="text" /><br>
    <label for="email">Email</label><input  id="email-a" maxlength="80" name="email" size="20" type="text" /><br>
    <label for="phone">Phone</label><input  id="phone-a" maxlength="40" name="phone" size="20" type="text" /><br>
    <!-- Your form content below -->
</form>
<!-- Form B -->
<form>
    <!-- Your form content above -->
    <label for="name">Contact Name</label><input  id="name-b" maxlength="80" name="name" size="20" type="text" /><br>
    <label for="email">Email</label><input  id="email-b" maxlength="80" name="email" size="20" type="text" /><br>
    <label for="phone">Phone</label><input  id="phone-b" maxlength="40" name="phone" size="20" type="text" /><br>
    <!-- Your form content below -->
</form>

You can refer to this question in regards to the use of id and name within HTML. Difference between id and name attributes in HTML

TheDxh
  • 11
  • 3