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

    Background positioning

    Asked by sklayman on May 28, 2012 at 08:50 AM

    Hi,

     

    A few weeks ago you helped creating this form: http://form.jotformpro.com/form/21262588136960

    and overcome the background/fields positioning

    I was hoping I could duplicated it and just replace the background for different clients, but don't know how to repalce the background image.

     

    The form url was already sent for printing, so i MUST fix it on same URL. (http://www.jotformpro.com/form/21481793733964 - background attached)

    Can you please help?

     

    Thanks 

    Shai (Paying and satisfied cutomer:))

     

    Page URL:
    http://www.jotformpro.com/form/21481793733964

    Screenshot
  • Profile Image
    JotForm Support

    Answered by abajan on May 28, 2012 at 01:02 PM

    Hi Shai

    Assuming that to create this second form, you attempted to copy the first form and replace its background image with that in your screenshot, please do the following:

    1. Open the first form

    2. Right-click the My Forms link and open it in another tab or window so that you now have the first form on one browser tab (or window) and the list of forms in the other browser tab (or window)

    3. While on the My Forms page, click the second form (מבצע בלק) and then its "Edit" button

    4. Delete both of the form's fields (right-click each of them and when the menu pops up, click Delete)

    5. While on the Setup & Embed tab, click Preferences > Field Styles and change all values which don't match those shown below:


    6. Click the Form Styles tab and change all values which don't match those shown below:


    7. Replace the .form-all {direction:rtl;} rule in the "Inject Custom CSS" section with the following code:

    .form-section {
    padding-right: 70px;
    padding-top: 45px;
    padding-bottom: 50px;
    }

    /*--remove error button--*/
    .form-error-message {
    display: none !important;
    }

    .form-line-error {
    background: none repeat scroll 0 0;
    }

    .form-line-active {
    background:none !important;
    }

    .form-all {
    direction: rtl;
    background:
    url(https://cms.jotform.com/uploads/answers/answer/sklayman/102937_black.jpg)
    no-repeat;
    padding-top: 240px !important;
    }

    (If you have another copy of the background image stored at different URL, you may substitute it for that highlighted in red. Incidentally, in this context, it's not necessary to wrap the URL in quotes.)


    8. Close the Preferences

    9. From the Quick Tools menu, insert the following fields, by clicking them in succession, in the order shown:

     Full Name
     Phone
     E-mail

    10. Go to the browser tab that has the first form, right-click its Full Name field and when the menu pops up, click Show Properties 

    11. Click שם מלא and when it becomes highlighted, copy it and close the Properties window

    12. Go to the browser tab containing the second form, right-click its Full Name field and when the menu pops up, click Show Properties

    13. Click "Full Name" and paste its Hebrew equivalent

    14. To the right of Required, select "Yes" and then close the Properties

    15. Repeat steps 10 to 14 for the Phone and E-mail fields, substituting נייד and מייל respectively

    16. Go to the browser tab containing the first form, click פרטי and when it becomes highlighted, copy it

    17. Return to the second form's tab (or window), click "First Name" and when it becomes highlighted, paste [Ctrl+V] what was copied

    18. Repeat steps 16 and 17 for the remaining sub labels ("Last Name", "Area Code" and "Phone Number")

    19. Go to the first form's tab, right-click the submit button's field and click Show Properties

    20. Click שלח and when it becomes highlighted, copy it and close the Properties

    21. Go to the second form's browser tab, right-click the submit button's field and click Show Properties

    22. Click Submit, paste שלח

    23. Select Simple Orange for Button Style, close the Properties and save the form

    If everything was done correctly, your form should now look like this clone. Should you require clarification on anything, do let us know.

  • Profile Image

    Answered by sklayman on May 28, 2012 at 01:43 PM

    Your support is amazing as always! 

    Thanks a bunch!

    You are a life saver! :)