How to fix the format and spacing of on the preview screen?

  • Profile Image
    lovep.gifts
    Asked on October 03, 2019 at 12:06 AM
    How to fix the format and spacing on the preview screen?
  • Profile Image
    Jed_C
    Answered on October 03, 2019 at 12:09 AM

    Are you still referring to the preview before submit widget or the form builder's preview screen? Can you please send us a screenshot of which field you want to align in preview mode?

    Looking forward for your response. 

  • Profile Image
    lovep.gifts
    Answered on October 03, 2019 at 12:21 AM

    On the preview before submit widget. I sent a screenshot on my last email.

  • Profile Image
    Jed_C
    Answered on October 03, 2019 at 02:43 AM

    Please give me some time and I will provide you the CSS to adjust the spacing on preview widget.

  • Profile Image
    Jed_C
    Answered on October 03, 2019 at 03:14 AM

    Please copy all the CSS code in this link https://pastebin.com/MG8Jh4b9 and paste it in your CSS tab.

    Here's a sample output:

    1570086853spacing_review_widget.gif

    I hope that helps. Let us know if you have any questions or if you need further assistance. 

  • Profile Image
    lovep.gifts
    Answered on October 03, 2019 at 05:51 AM
    This what happened when I copied the code.
    ...
  • Profile Image
    roneet
    Answered on October 03, 2019 at 07:33 AM

    I believe you are referring to this Form:

    1570102354888888888.gif

    I have noticed all the Form fields are compact Please let us know if you are experiencing any issues. We will take another look.

    Thanks.

  • Profile Image
    lovep.gifts
    Answered on October 03, 2019 at 09:51 AM
    This is what I get with the same code. The spacing is different on each
    line.
    ...
  • Profile Image
    lovep.gifts
    Answered on October 03, 2019 at 10:51 AM
    Re: submit before preview widget: It looks perfect when ALL the fields were
    answered, but in my form some fields may be skipped and are not required to
    be answered. Could they also be group accordingly? And if possible, could I
    have the answers on the right side of the questions, not at the bottom of
    the questions
    ...
  • Profile Image
    roneet
    Answered on October 03, 2019 at 11:09 AM

    I am unable to test the Form as there are many broken conditions in your Form.

    15701152241.PNG

    Could you please fix the conditions so that we can guide you further.

    Thanks.

  • Profile Image
    lovep.gifts
    Answered on October 03, 2019 at 05:51 PM
    Those conditions were on the pages I deleted. I deleted the conditions now.
    ...
  • Profile Image
    EltonCris
    Answered on October 03, 2019 at 07:38 PM

    Inject this CSS codes to your form to make the question and answer side by side.

    .label_i {

        width: 30%;

        display: inline-block;

        box-sizing: border-box;

    }


    .value.border {

        width: 68%;

        display: inline-block;

        box-sizing: border-box;

    }

    Guide: How to Inject Custom CSS Codes

    Expected result:

    ----------------

    To group them, you can use the Header tool then set the Show Title to YES in your Preview Before Submit widget settings.

    In your Preview Before Submit widget settings;


  • Profile Image
    lovep.gifts
    Answered on October 03, 2019 at 08:51 PM
    Copied the code and it looks fine. Set the Show Title to YES but headers
    not showing. Also, may Page 3: Keychain S1 results are not showing on the
    preview before submit.
    Appreciate your help!
    ...
  • Profile Image
    roneet
    Answered on October 03, 2019 at 09:19 PM

    Please allow me some time to check. I'll get back to you.

    Thanks.

  • Profile Image
    lovep.gifts
    Answered on October 03, 2019 at 10:51 PM
    It seems to be working now. I deleted the preview before submit widget and
    added a new one then copied the code you gave me.
    ...
  • Profile Image
    lovep.gifts
    Answered on October 03, 2019 at 11:51 PM
    Sending you a screenshot. I made this a Header. How do I hide a Header if
    fields are not answered? In this form, there were no keychains "ordered"

    ...
  • Profile Image
    BDAVID
    Answered on October 03, 2019 at 11:57 PM

    Your new question will be addressed in a separate forum thread: https://www.jotform.com/answers/1988769

  • Profile Image
    lovep.gifts
    Answered on October 04, 2019 at 01:51 AM
    I skipped some items, this is how the spacing looked like
    ...
  • Profile Image
    jherwin
    Answered on October 04, 2019 at 02:11 AM

    It looks like you have attached a screenshot/image to your latest reply. Unfortunately, we were unable to view the screenshot you attached to your response. Please open this thread: https://www.jotform.com/answers/1987158 through a browser while your account is logged-in then please post the image again.

    Guide: How-to-Post-Screenshots-to-Our-Support-Forum

    We will wait for your response.

  • Profile Image
    lovep.gifts
    Answered on October 04, 2019 at 02:13 AM

    here.

    1570169593skipped items.JPG


  • Profile Image
    jherwin
    Answered on October 04, 2019 at 02:27 AM

    Is this the form you're working on?

    https://form.jotform.com/92712479236160

    Also, does the issue occur if you preview the form before submitting it? If so, I checked your form and could not see any preview before submit widget.

    Let us know if you are referring to something else.

  • Profile Image
    lovep.gifts
    Answered on October 04, 2019 at 02:51 AM
    Yes it's that form. It has a preview before submit widget. It's on page 2.
    ...
  • Profile Image
    Kiran
    Answered on October 04, 2019 at 04:00 AM

    It seems that the blank space is displayed by the image and text fields that are not being displayed in the preview. Please try adding the following CSS code to the form so that the blank space shall not be displayed.

    #previewContainer .html, #previewContainer .control_image {

    display: none;

    }

    Thanks!

  • Profile Image
    lovep.gifts
    Answered on October 04, 2019 at 04:29 AM

    That seems to be working now. Is there another way to group the answers other than headers? Because I was told headers cannot have a condition to be hidden or shown when fields are not answered. Is this possible?1570177775grouping.jpg

  • Profile Image
    jherwin
    Answered on October 04, 2019 at 04:49 AM

    Headers can be hidden using conditional logic, please check my demo form below.

    Demo Form: https://form.jotform.com/92761817659977

    Guide: How-to-Show-or-Hide-Fields-Base-on-User-s-Answer

    The header will hide if you didn't answer the dropdown field. Please give it a try and let us know if that could work for you.

  • Profile Image
    lovep.gifts
    Answered on October 04, 2019 at 04:54 AM

    Never mind the header, that's not what I meant. Is that possible tho on the last screen shot I sent? Double spacing after certain fields.

     

  • Profile Image
    jherwin
    Answered on October 04, 2019 at 06:02 AM

    Unfortunately, that is not possible since each field has a unique name and if we apply custom CSS code in the preview, the texts will be static or fixed where they are positioned in the CSS.

  • Profile Image
    lovep.gifts
    Answered on October 04, 2019 at 06:51 AM
    Got that. I appreciate your help!
    Additional question
    Re: Email after submission
    Can I not include on the email the answers from fields "Choose your item"
    and "Add/Edit items:"
    ...
  • Profile Image
    jherwin
    Answered on October 04, 2019 at 07:08 AM

    I have moved your new question to a new thread to better assist you. Kindly follow this link to your thread https://www.jotform.com/answers/1989013.

    Thank you.