What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Can I insert a line or line break between each product in my email notification?

    Asked by cateringonline on November 23, 2015 at 11:26 AM

    When I receive the email notification, the product selection is one bunch of text, which makes reading very difficult. If you try to select multiple products on my form, you'd know what I mean.

    Is there a way I can either insert a line or line break between each product in my email notification?

    My form ID is https://form.jotform.me/53262495201450

    add line break
  • Profile Image

    Answered by Carina on November 23, 2015 at 11:44 AM

    I made a test submission and the text is formatted:

    Are you receiving a different result? In that case maybe you are using plain text on your email instead of HTML text.

    I will still try to see how we can add a line-break after each selection.

    Let us know if we can assist you further.   

  • Profile Image

    Answered by cateringonline on November 24, 2015 at 03:33 AM

    Hi

    1.  You'd notice that the first product amount (15 SGD) is directly abv Western Bento 2 with no line break. that's a problem cos it makes reading difficult. I need to have a <br> between the "amount" & product below it so that it is very clear.

     

    2.  Currency - Can I just have the currency symbol, instead of "SGD"? Meaning it should look like this - Amount: $15.00, Qty 20.

     

    Thanks

  • Profile Image
    JotForm Support

    Answered by beril on November 24, 2015 at 04:51 AM

    Hi,

    You can separate the product with the CSS code below easily.

    .form-product-item {

    border: 2px solid #EFEFEF;

    margin: 1px;

    float: center;

    width: 293px;

    }

    .form-product-item + br {

    display:none;

    }

    br + b {

    float: left;

    padding-top: 20px;

    }

    .form-payment-total {

    line-height: 50px;

    margin: 1px;

    border: 0px solid #EFEFEF;

    border-radius: 4px;

    padding: 15px;

    padding-right: 193px;

    padding-left: 6px;

     

    }

    You must add the CCS code to your CSS fro Designer.

     

    Here is how to do this:

    1) Click on Designer.

     

    2) Add the code above to your CSS.

     

    3) Click on Save Button.

    If this does not resolve the issue, please let us know and we will be glad to take another look.

  • Profile Image
    JotForm Support

    Answered by beril on November 24, 2015 at 05:03 AM

    Hi,

    I've created a separate thread for changing currency, so anyone in the support staff will be able to assist you with your specific requirement. Please follow up there:

    http://www.jotform.com/answers/710798/?entrymessage=10732640770

  • Profile Image

    Answered by cateringonline on November 24, 2015 at 09:10 AM

    Hi

    Thank you for your reply regarding inserting a line break between the products. Unfortunately you have not understood my problem. My problem is with the EMAIL NOTIFICATION. Pls refer to the attached screenshot. I hope it is self-explanatory.

    Thank you

  • Profile Image
    JotForm Support

    Answered by beril on November 24, 2015 at 10:09 AM

     

    Hi,

    I understand what you mean. However, I realized that It did not affect the submissions.

    As far as I now, it is not possible to add a line break on your submission due to being a payment wizard.

     

     If you have any question or issues, please do not hesitate contacting us. We will be glad to assist you.

  • Profile Image

    Answered by cateringonline on November 24, 2015 at 10:38 AM

    ok thanks.

  • Profile Image
    JotForm Support

    Answered by Charlie on November 24, 2015 at 12:56 PM

    Just to add, I see you are using the "Purchase Order" tool, which is usually for wire transfer or check.

    If you are not into too particular on the content, then you can put a <br> line inside the actual product description, it will allow you to separate the products in a new line when you get them in the notification.

    However, it does come with little change in the format. This is how it looks like in my end:

     

    Here are the steps on what you can do:

    1. I see you already have inserted HTML elements on your product description/name, you can either add <br> at the beginning of the product or at the end. In my case, I added it on the beginning.

     

    2. Now, there are some formatting issues with this so what we will do is manually display the product information one by one by stripping their labels. Here's a guide that you can follow: http://www.jotform.com/help/231-How-to-Strip-Payment-Labels-and-Separate-Payment-Info-on-Email-Alerts. That allows you to fetch each information in the purchase order and use it in your email template.

    For demo purposes, I will only use the ":product" to get the products selected AND so that I can get rid of the bullets that accompanied in the format. Now in my email template, this is what I used {inpu89:product}

     

    Noticed that the total, sub total and other information are not shown, this is because I only choose to show the products selected by using {input89:product}.

    It's up to you on how you would like to format it. I hope this gives you an idea on how to proceed.

  • Profile Image

    Answered by cateringonline on November 25, 2015 at 12:47 AM

    Thanks! this is very helpful indeed.

  • Profile Image

    Answered by cateringonline on November 25, 2015 at 03:55 AM

    Hi Charlie,

    I tried out your solution to insert a line break between products in the email notification. Unfortunately, inserting the line break inside the actual product description did not separate the products in a new line when you get them in the notification. Also, it caused the product name & the check-box to be misaligned.

    :(

  • Profile Image

    Answered by cateringonline on November 25, 2015 at 04:48 AM

    Is there any way to strip the product quantity so that it can be seen prominently in the email notification? And I really don't need the "Amount" to be in the email too.
  • Profile Image

    Answered by Carina on November 25, 2015 at 06:07 AM

    I moved this last question to a new thread as it is a different situation. You can find it here:

    http://www.jotform.com/answers/711670 

    I will still make further tests to see if it is possible to add a line break after the products description.

    Let us know if we can assist you further.   

  • Profile Image

    Answered by cateringonline on November 25, 2015 at 10:21 AM

    Yes, pls do see if it's possible to make it easier to read. As it is, you can see from the screen shot that it's hard to see the qty ordered. I have to get this notification up asap & would appreciate any workable solution jotform can provide.

    thank you

     

  • Profile Image
    JotForm Support

    Answered by Charlie on November 25, 2015 at 11:53 AM

    You can try this one:

    1. First, add page breaks at the beginning and end of your product name. In my case, I added one page break at the beginning and two page breaks at the end of the product name.

    2. After that, use this custom CSS code in your Form Designer Tool.

    .form-product-name > br:nth-child(1) {

        display : none !important;

    }

    .form-product-name > br:nth-child(8), .form-product-name > br:nth-child(9) {

        display: none !important;

    }

    Paste the custom CSS code under the "CSS tab", what that code do is that it removes the page breaks we added in the live form when viewed but remains intact on the notification.

     

    This is how it looks like in my end:

     

    You can clone my form to see my actual setup, here's my cloned form: https://form.jotform.com/53284417137961?. You can clone my form by following this guide: http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL 

    I hope that helps.

  • Profile Image

    Answered by cateringonline on November 27, 2015 at 02:22 AM

    Thank you Charlie!! Wonderful!