Envelope template form fields are not properly aligned

  • Profile Image
    pbmoore
    Asked on March 31, 2013 at 04:03 PM
  • Profile Image
    jonathan
    Answered on March 31, 2013 at 04:17 PM

    Hi,

    Can you please provide us more details? 

    Is there a specific reason why you need to change the label width? Usually the width of labels depends on the text on it.

    Please tell us also which of your form you need to do this change.

    Will await your response.

    Thanks.

  • Profile Image
    pbmoore
    Answered on March 31, 2013 at 04:48 PM
    Hi Jonathan
    I have tried everything (well obviously not the right thing) and still get the following.


    Description: PMIM-Sig-Sept-27a

  • Profile Image
    jonathan
    Answered on March 31, 2013 at 05:30 PM

    Can you please tell me which form you wanted to change the label width?

    I am sorry, but I could not understand what you meant by this

    Description: PMIM-Sig-Sept-27a

     

    Thanks.

  • Profile Image
    pbmoore
    Answered on March 31, 2013 at 06:21 PM
    Sorry – I meant to have the labels end approx. where the red lines are. It looks sloppy having the boxes extend beyond the edge of the form.


    Description: PMIM-Sig-Sept-27a

  • Profile Image
    pbmoore
    Answered on March 31, 2013 at 06:30 PM
    To see it in real life, go to
    http://www.pmintegratedmarketing.com/contactform.html


    Description: PMIM-Sig-Sept-27a

  • Profile Image
    pbmoore
    Answered on March 31, 2013 at 06:30 PM
    I gather you couldn’t see the diagram.
    I will try to describe it for you.

    The form has a given width… let’s say 400 px.

    In the form is the label – “Name”
    The input box for Name has a width of 400 px that begins 50 px from the left margin and extends 50 px beyond the right margin.

    So for each input box … the box extends beyond the right margin of the form.

    Hope that helps.

    Description: PMIM-Sig-Sept-27a

  • Profile Image
    jonathan
    Answered on March 31, 2013 at 06:49 PM

    Thank you. I can see this now. I think you meant this

     

    Will shortening all the input box be enough? Like this..

     

    Thanks.

  • Profile Image
    pbmoore
    Answered on March 31, 2013 at 06:52 PM
    Yes.. how do I do that? Perhaps I am missing it.
    Also I have Media Queries in Dreamweaver but this form isn’t adjusting to smartphone screen. Is there a way to use queries such as phone.css?

    Description: PMIM-Sig-Sept-27a

  • Profile Image
    EltonCris
    Answered on March 31, 2013 at 07:10 PM

    Hi,

    This will fixed the overlapping fields.

    .form-section, .form-section-closed {

    padding: 0 !important;

    }

    .form-button-error {

    margin-top: 10px !important;

    }

    Simply inject this CSS codes directly to your form in the form builer. Here's how: How to Inject Custom CSS Codes to your Form

    JotForm has media queries for mobiles already, though some of it was overwritten due to the CSS injected to your form. Try playing around with your media query CSS codes and inject it to your form. That should help. Please refer the above guide.

    Thank you!

  • Profile Image
    EltonCris
    Answered on March 31, 2013 at 07:14 PM

    By the way, since you are using your form's source code. You can directly paste the CSS codes provided above to your form source code embedded on your page between style tags. <style> </style>

    Let us know if you have further questions. Thanks!

  • Profile Image
    pbmoore
    Answered on March 31, 2013 at 08:45 PM
    Brilliant… thank you so much. Looks great now.

    Description: PMIM-Sig-Sept-27a

  • Profile Image
    EltonCris
    Answered on March 31, 2013 at 11:20 PM

    Glad it helps. Cheers!