Contact Form Tweak

Highlighted
Tourist
8 0 0

Hello there!

 

I use a paid theme for my online bookstore and have just created a new contact form for bulk purchase. I created a table to enable my customers supply the book information and quantity. I was also able to create a "click to add new row" link  using JS in case they want to order multiple titles . Everything is working well on the storefront but I only see information contained in the last row when I open the email. 

 

 

            <table class="order_table static_content_override" id="mytable">
              <tbody id="order_table_body">
                <tr style="background:#232f3e; color: #ffffff;">
                  <th>Title</th>
                  <th>Author</th>
                  <th>Qty</th>

                </tr>
                <tr>
                  <td>
            		<input style= "height: 25px;"id="contact-form-name" type="text" class="form__field form__field--text" name="contact[Title]"  autocapitalize="words" required>
                  </td>
                  <td>
                  	<input style= "height: 25px;" id="contact-form-name" type="text" class="form__field form__field--text" name="contact[Author]"  autocapitalize="words">            
                  </td>
                  <td>
                  	<input style= "height: 25px;" id="contact-form-name" type="number" class="form__field form__field--text" name="contact[Quantity]"  min="15" max="500" required>                 
                  </td>

                </tr>
              </tbody>
            </table>
      		<a id="insert-more">Click to add a row</a>
    
              
        <div class="form__input-wrapper form__input-wrapper--labelled">
          <textarea id="contact-form-message" name="contact[Additional Message]" rows="5" class="form__field form__field--textarea" aria-label="{{ 'contact.form.message' | t }}"></textarea>
          <label for="contact-form-message" class="form__floating-label">Any special instructions or request</label>
        </div>
 $("#insert-more").click(function () {
     $("#mytable").each(function () {
         var tds = '<tr>';
         jQuery.each($('tr:last td', this), function () {
             tds += '<td>' + $(this).html() + '</td>';
         });
         tds += '</tr>';
         if ($('tbody', this).length > 0) {
             $('tbody', this).append(tds);
         } else {
             $(this).append(tds);
         }
     });
});

 

 

 

Bulk Order.png

 

Please how can I get the information supplied in the other rows displayed in my email? I was thinking maybe like adding the row number as prefix to the input names using JS or so ( 1 Title, 1 Author, 1 Quantity; 2 Title, 2 Author, 2 Quantity etc). Or is there a way I could get emailed the complete table with all the borders?

 

It is pertinent to note that I am not exactly good at coding especially JS, I only managed to copy and modify the above JS.

 

Thanks in advance.

0 Likes
Highlighted
Shopify Partner
579 69 93

@bemny 

You need to increment the name / title / author to make them unique records 

name="contact[Author1]"
name="contact[Author2]"
.....
name="contact[AuthorN]"

etc 

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution

Skype : lokendra.panwar1
0 Likes
Highlighted
Tourist
8 0 0

Thanks @Propero for the suggestion. However I'm unable to do this since the extra rows are added with JS on link click. So I think the increment should also be done using JS but I have no idea how.

0 Likes
Highlighted
Tourist
8 0 0

@Ninthony please can you assist me? Thanks

0 Likes