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

    Blue Envelope Theme: Centering header widget text

    Asked by ztwersky on September 16, 2014 at 02:04 PM

    Like I said, I don't mind having a header text (and you are correct - when I have a header, there is no problem) but the text in the header will not center - I have tried everything.

    center header header text CSS header CSS JotForm header blue envelope theme
  • Profile Image

    Answered by Ben on September 16, 2014 at 02:54 PM

    Hi,

    I have cloned your form and set the text to be centered. You can take a look at the from here:

    http://www.jotformpro.com/form/42585510163956

    Now to do that we need to make few alterations. First we should remove that 'fix' on the previous thread because it will not allow us to get the proper style.

    Please remove all CSS in the form style box and and then add this one instead of it:

    .form-all
    {
    padding-top: 0;
    text-align: right;
    direction: rtl !important;
    unicode-bidi: bidi-override !important;
    }
    /*--red border on error--*/
    .form-validation-error {
    border: 1px solid #FFB0B0 !important;
    }
    /*---form textbox styles fixed---*/.form-textarea, .form-textbox  {
    border: 1px solid #b7bbbd;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    padding: 4px;
    background:transparent !important;
    width:100%;
    -webkit-appearance: none;
    -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.2), 0 1px 0 rgb(255,255,255);
    -moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2), 0 1px 0 rgb(255,255,255);
    box-shadow: inset 0 0 4px rgba(0,0,0,0.2), 0 1px 0 rgb(255,255,255);
    border: 1px solid #AEAEAE;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }
    ul.form-section li.form-line:first-child {
    background:url('https://shots.jotform.com/elton/images/bg_envelope_02.gif') no-repeat 0 2px;
    }.form-line{
    background:url('https://shots.jotform.com/elton/images/bg_envelope_wrapper.gif') repeat-y;
    }/*---remove error message---*/
    .form-error-message {
    display: none !important;
    }
    .form-line-error {
    background: url('https://shots.jotform.com/elton/images/bg_envelope_wrapper.gif') repeat-y;
    }/*---submit button move--*/
    .form-submit-button{
    margin-top:60px;
    cursor: pointer;
    }.form-textarea:focus, .form-textbox:focus{
    outline:none !important;
    }/*--fix captcha--*/.form-captcha .form-textbox{
    width:130px !important;
    }
    .form-line {
    padding: 6px 28px 6px 30px;
    width: auto;
    }
    .form-buttons-wrapper{
    text-align:center !important;
    background: url('https://shots.jotform.com/elton/images/bg_envelope_11.gif') no-repeat 32px -10px;
    height: 315px;
    margin: -10px -100px -8px -100px;
    }
    .form-button-error {
    position: absolute;
    top: 120px;
    left: 131px;
    width: 195px;
    }

    Just in case you need it, here is how you can inject your CSS How to Inject Custom CSS Codes. Do remember to

    - first clear all CSS entries
    - then click outside of the field (you will see your form in the background changing its style) and
    - after that click again into the field and copy the above CSS code.

    I have marked in bold the part of the code that is calling the proper theme image.

    Now after you have done that you will need to enter the header back to it.

    To do that, please click on the Text widget and drag it over to the JotForm

    Once you drag it over, click on the Edit HTML field

    Now we must click on the HTML field, because otherwise we will break the form..

    Now copy this into the editor:

    Contact Us

    If you change anything other than 'Contact Us' in the above code template will be broken again. But do let us know if you do and we will adjust the settings of it properly. The settings should not be adjusted by using a different photo this time, instead it will be done by adjusting some CSS code, all depending on how you change the text.

    Again, you can take a look at it in action here http://www.jotformpro.com/form/42585510163956 before you start changing code :)

    Now usually if you want to justify the text in the Text widget you can do that by clicking on the align center button in the editor by clicking this button:

    You can see it in the toolbar at around middle (it has orange overlay on it)

    Hope this works for you.

    Best Regards,
    Ben

  • Profile Image

    Answered by ztwersky on September 20, 2014 at 04:14 AM

    Just tried it. Works! Thanks!

  • Profile Image

    Answered by ztwersky on September 20, 2014 at 04:57 AM

    Ok, but now there is a problem with viewing it on a cell phone. Look at what it looks like...

  • Profile Image

    Answered by Ben on September 20, 2014 at 06:06 AM

    Hi,

    I have checked on your website with several browsers and it seems to be working correctly. Can you please tell me the device and browser you have used when you get elements shown as you did.

    Also if you can tell me the ID of the jotform that has this issue if you have changed to another jotform because of the bug.

    Best Regards,
    Ben

  • Profile Image

    Answered by ztwersky on September 20, 2014 at 06:11 AM

    The ID is 42441679648466. I didn't change it.

    The problem shows up on my Samsung S5. PC browsers are fine.

    The page is

    http://www.vinewoodstudios.com/contact-us.html

  • Profile Image

    Answered by Ben on September 20, 2014 at 07:41 AM

    Hi,

    OK, I see. Now I can not check this out on my Android tablet since my battery just died, but will check it out and see what might be going on.

    In the mean time this seems to be the issue with specific device.

    If you do not mind I would like to ask you next details:
    - the version of your Android system- browser that you are using when the page is displayed like that

    I will submit what you have already gave to us to our developers and they will take a look into it as well, but more details they have the easier it is for them to find and resolve the issue.

    They will keep you updated on the resolution of the issue through this same ticket.

    Best Regards,
    Ben

  • Profile Image

    Answered by ztwersky on September 20, 2014 at 08:29 AM

    Android version: 4.4.2

    I don't know the browser but the same problem shows on Safari on my iphone 4.

  • Profile Image

    Answered by Ben on September 20, 2014 at 09:37 AM

    Hi,

    OK. I will add this info for our developers as well and they will let you know once this has been resolved.

    Best Regards,
    Ben