How to set an image as my form's background?

  • Profile Image
    ultraslimplus
    Asked on September 25, 2012 at 01:50 PM

    Hi Folks,

      The next phase in my jotforming is to design the page 2 around the 2nd prepopulated form. I tried to add a background to the page 2 through jotform directly but it only added it within the form and not page wide. So I injected some CSS:

    body{ background-image: url('http://ultimateslimplus.com/images/water_bg.jpg') no-repeat;}

    But it didn't take hold. No background appeared. Not sure if it is due to the purple background I had setup as a test that I still have in place.

    I made many attempts but was also having trouble getting my background to even appear at all.

    Ultamitely I just want to have my background page wide in behind the prepopulated jotform.

    Background:

     

    Current view of form:

    Spence

  • Profile Image
    EduardoMendez
    Answered on September 25, 2012 at 02:49 PM

    Hello Spence,

    Please inject the following CSS code on your form:

    Just edit the text in red with the correct URL for the image that you intent to use as a background.

    html { background: url(https://cms.jotform.com/uploads/image_upload/image_upload/global/9199_water_bg.jpg) repeat fixed; }

    Once you have inserted the CSS code, please make sure to set your background to transparent (Here is a guide if you need detailed instructions on how to set the form's background as transparent).

    Click OK and make sure to save the form.

    Here is a clone of your form to see the end result.

    Let us know if you need further assistance!

  • Profile Image
    guest_22685723139055
    Answered on September 25, 2012 at 04:11 PM

    No Way. That is Awesome!

  • Profile Image
    ultraslimplus
    Answered on September 26, 2012 at 01:01 AM

    Hi,

      So close but no cigar. There is a strange problem. I cannot figure it out. The changes are not being saved. I read other posts. This is different I think. The background is not showing up. Looks like an old version of the form keeps showing up. Tried other browsers. What u make of it?

    After Submission:

    http://form.jotform.ca/form/22584430005242?myProducts5[cc_firstName]=spencer&myProducts5[cc_lastName]=boisvenue&myProducts5[addr_line1]=&myProducts5[addr_line2]=&myProducts5[city]=&myProducts5[state]=&myProducts5[postal]=&myProducts5[country]=United%20States

    What is should look like:

    http://form.jotform.ca/form/22584430005242

    Good luck with that one! Ha I gotchu this time!

    Spence

  • Profile Image
    Rodjit
    Answered on September 26, 2012 at 02:13 AM

    Hi,

    Have you tried clearing your page cache? Seems like no problem on my end; http://screencast.com/t/fQwkqLDi

    Please let us know if the problem is still exist after clearing your page cache.

    Thanks

  • Profile Image
    ultraslimplus
    Answered on September 26, 2012 at 02:38 AM

    Hello, Yes I even tried other browsers that have never loaded it before.

    Wild

    SPence

  • Profile Image
    Rodjit
    Answered on September 26, 2012 at 03:18 AM

    Hi SPence,

    Another solution is to change http://form to http://www ,your URL should now looks like this;

    http://www.jotform.ca/form/22584430005242?

    I hope this helps and would solved your problem. Please let us know if the problem is still there after doing this.

    Thanks

  • Profile Image
    ultraslimplus
    Answered on September 26, 2012 at 11:08 AM

    Hi,

      I tried the www. tip to no end. I will look for more clues for u guys. I'll try to give u something more to work with.

    Spence

  • Profile Image
    ultraslimplus
    Answered on September 26, 2012 at 11:23 AM

    Hi

    Form1 is within a joomla module
    Form1 shows up on home page within a module position
    Form1 is pasted within joomla module as source rather then embed code
    Form1-Could not get form to display any other way then to paste source
    Form1 -Joomla cache disabled



    Tried www. tip and cloning the forms tip.

    Direct Links to the form2 displays as the right one. I will make a change on form2 other then the background to see if it shows up.

    Spence

  • Profile Image
    ultraslimplus
    Answered on September 26, 2012 at 11:32 AM

    Hi,

    The change I made did Not show up. It was not updated. Somehow there is an old version of the form displaying when I get to page 2. I do not have form2 within a module as I am using the orderform.php page which looks like this:

    Text Version:

    <?php
       
        $answers = $_POST;
        //print_r ($answers);
        $url1 = "http://form.jotform.ca/form/22584430005242?";
        $url2 = "myProducts5[cc_firstName]=".$answers[name][0]."&myProducts5[cc_lastName]=".$answers[name][1];
        $url2.= "&myProducts5[addr_line1]=".$answers[shippingaddress][0]."&myProducts5[addr_line2]=".$answers[shippingaddress][1];
        $url2.= "&myProducts5[city]=".$answers[shippingaddress][2]."&myProducts5[state]=".$answers[shippingaddress][3];
        $url2.= "&myProducts5[postal]=".$answers[shippingaddress][4]."&myProducts5[country]=".$answers[shippingaddress][5];
        //echo "<p><br>$url2";
        header("location:$url1$url2");
    ?>

    Spence

  • Profile Image
    EduardoMendez
    Answered on September 26, 2012 at 11:35 AM

    @ultraslimplus

    I notice that when the form is displayed and I click on a field it all gets highlighted covering the background.  You can dissable this by going to your form and clicking on the "Preferences" icon at the top.  The dissable option is on the "Field Styles" tab. 

    As per the form that I see when opening the links that you have given me, it looks like this:

     

    From your previous posts, that is what it should look like.  Correct?

  • Profile Image
    EduardoMendez
    Answered on September 26, 2012 at 11:39 AM
  • Profile Image
    ultraslimplus
    Answered on September 26, 2012 at 12:57 PM

    Hi found another clue...

    The URL i had set in the thankyou page was the http://ultimateslimplus.com/orderform.php

    that would allow form2 to prepopulate.

    If I switch the custom thankyou page url in form1 to lead to http://www.jotform.ca/form/22584430005242  it will goto the right form but will not be prepopulated...

    The URL I have in the orderform.php is http://form.jotform.ca/form/22584430005242

    Spence

  • Profile Image
    ultraslimplus
    Answered on September 26, 2012 at 01:11 PM

    Hi,

     I also just tried changing the

        $url1 = "http://form.jotform.ca/form/22584430005242?";

    to

        $url1 = "http://www.jotform.ca/form/22584430005242?";

    It brings be to the right form but does not prepopulate. It only prepopulates when I have the custom thankyou URL set to http://ultimateslimplus.com/orderform.php

    Spence

  • Profile Image
    NeilVicente
    Answered on September 26, 2012 at 01:58 PM

    @ultraslimplus

    Your problem can be solved easily by changing the $url1 variable to http://www.jotform.ca/form/22584430005242?

    Then, keep the custom URL redirection set to http://ultimateslimplus.com/orderform.php

    Form URL's with www are always kept updated. If you want, you may use that subdomain for all your forms.

  • Profile Image
    guest_22695533993063
    Answered on September 26, 2012 at 02:34 PM
    Hi thanks for the reply, I made sure to try that previously but it did not work either. What i can do though is set it that way and see if there is a server delay or something. Spence
  • Profile Image
    ultraslimplus
    Answered on September 26, 2012 at 02:40 PM

    STOP THE PRESS! (Sorry worked in printing for 12 years as a prepress guy)

    The thing started workin....

    Current settings:

    Custom Thankyou URL switched back to http://ultimateslimplus.com/orderform.php

    www. added to     $url1 = "http://www.jotform.ca/form/22584430005242?";

    Now u know I treid that one repeatedly... Actually come to think of it,, I was trying

    $url1 = "http://www.form.jotform.ca/form/22584430005242?";

    Spence

  • Profile Image
    ultraslimplus
    Answered on September 26, 2012 at 02:41 PM

    ITS WORKING :)

  • Profile Image
    NeilVicente
    Answered on September 26, 2012 at 02:42 PM

    Glad to hear it worked for you.

    I tested it on my end and it is indeed working perfectly.

    Cheers!

  • Profile Image
    ultraslimplus
    Answered on October 02, 2012 at 04:09 PM

    Hi!

    Things are coming along nicely but the prepopulated data has stopped going over...

    It started following a number of design and other additions that I made to the form.

    Any idea what the most likely culprit is? There was a section of the form that I removed which was the Authorize.net Header part. I replaced it with a custom header so.

    Anyways could sure use some help on this as I am at a loss.

    Spence

  • Profile Image
    EduardoMendez
    Answered on October 02, 2012 at 04:31 PM

    @ultraslimplus

    We'll be glad to look into it for you.  Please start a new thread for this question.  Thank you!