Form Positioning Question

  • Profile Image
    gymnastics411
    Asked on February 10, 2013 at 02:50 PM

    HELP!!! I'm having problems positioning my form in the correct field.  You may see the problem here: 

    www.gymnastics411.com

    I want the form to be positoned on the left hand side of the header graphic.  Part of the problem is that the iframe is defaulting to 100%.  I've tried to position with the custom css but have been unsuccessful to date. 

    Can anyone assist???  I'm most grateful for your advice!

    Price

  • Profile Image
    gymnastics411
    Answered on February 10, 2013 at 04:19 PM

    any takers????

  • Profile Image
    speel
    Answered on February 10, 2013 at 07:16 PM

    Hi,

     

    You can use what is called the CSS float property. Just go in to edit your form under Jotform's platform and select "Preferences", once you are in there select "Form Styles". Then go in under "Inject Custom CSS" and fill in with the float property code, save and go in under embed and select the updated code onto your website.

    Speel

  • Profile Image
    gymnastics411
    Answered on February 10, 2013 at 07:33 PM

    Hi Speel,

    Thanks for your response, however I've already tried that.  Further, I think the float is only one issue here.  The main problem is that the form defaults to 100%.

     

    I hope someone can be of service!

     

    Thank you in advance for you help!

     

    Price.

  • Profile Image
    EltonCris
    Answered on February 10, 2013 at 10:00 PM

    Hi Price,

    Remove you current CSS codes and inject this instead:

    .form-all {

    margin: 0 !important;

    }

    That should align your form to the left bottom of the header graphic. If you want to place on the left in line with the graphic then you have to embed your form infront of the image. Currently your graphic image is dislayed as "block".

    Thanks!

  • Profile Image
    jeanettebmz
    Answered on February 10, 2013 at 10:06 PM
    Please follow the guide below on how to Inject Custom CSS codes

    1. While  on  your form (Edit Mode), click Setup & Embed then  Preferences



    2. On the Preferences window, goto Form Styles tab and then insert your CSS Code under Inject Custom CSS Box.

    Clicking on "Close Settings" will then automatically  save the changes.

    Our forum contains various injected CSS solutions which you may find useful as well

  • Profile Image
    EduardoMendez
    Answered on February 10, 2013 at 10:16 PM

    Another suggestion would be to use the following form in stead:

    http://form.jotformpro.com/form/30408554105951?

    Feel free to clone the form and use it as your own!

    http://www.jotform.com/help/28-Cloning-a-Form-from-a-Web-Page

  • Profile Image
    gymnastics411
    Answered on February 11, 2013 at 06:27 AM

    Thank you to each of the jotform folks that responded.  Eduardo I appreciate your approach and I may use that as a backup.  adding the image created a couple new problems so I'm going to try tha current method first.

    Cris I want to try your method and I have realigned the form.  Now you've stated that if I want the form to overlay on the image I have to change the image from "block".  I'm not sure what you mean.  Could you explain and possibly offer a suggestion to fix?

     

    Thanks!

  • Profile Image
    EltonCris
    Answered on February 11, 2013 at 07:07 AM

    @gymnastics411,

    Ok, try this fix.

    First you have to set your form background to transparent since the image you had will served as your form background and so the image will not be covered by your form background. To set your form background to transparent, add this CSS to your existing form's injected CSS codes.

     

    body, html, .form-all{

    background:transparent !important;

    }

    Guide: How to Inject Custom CSS Codes to your Form

    --

    Now, to set the image as a form background, use div tag and add the image there. After that, place your form code inside the div tag. Please use the code below this post.

    <div style="background:url('http://gymnastics411.com/wp-content/uploads/2013/02/header-graphic-homepage-gymnastics-411.png') no-repeat;">

    <script type="text/javascript" src="//www.jotform.us/jsform/30043742315140"></script>

    </div>

    Hope this helps. Thanks!

  • Profile Image
    gymnastics411
    Answered on February 12, 2013 at 06:24 AM

    Well....No Cigar!  That got us part of the way ther as you can see from my homepage gymnastics411.com.  However now my header image is buried.  I don't have your "transperent" command inserted at this time because it affected the rest of the page and made my site whole background transparent by inserting the div tag.

    What's interesting, if  I insert the source code into the div tag with the image instead of the short code the form and image align properly.  However, this creates a bunch of other cosmetic issues to the form and it just looks crappy.

    Your suggestions?

  • Profile Image
    EltonCris
    Answered on February 12, 2013 at 06:45 AM

    I have fixed the transparent form. It should now be fine.

    Also, I just noticed that there was a slight error with my previous div code I've provided to you. Notice the <div> closing tag, it should be </div>. My mistake, please re-embed the code again using the following codes:

    <div style="background:url('http://gymnastics411.com/wp-content/uploads/2013/02/header-graphic-homepage-gymnastics-411.png') no-repeat;">

    <script type="text/javascript" src="//www.jotform.us/jsform/30043742315140"></script>

    </div>

    Thanks!

  • Profile Image
    gymnastics411
    Answered on February 12, 2013 at 07:11 AM

    Fantastic!!!  Only two small issues!!

     

    1.  This solution has shrunk the height of the header picture 525 px.  How can I adjust?

    2.  I've tried to erase the "email" tag above the email field on the form creator.  It keeps showing up again.  How can I force it to be gone?

     

    Thanks again for your wonderful support!!!

  • Profile Image
    EltonCris
    Answered on February 12, 2013 at 08:12 AM

    Hi,

    1. Simply add background-size: 1000px 525px; on your div style attribute. 1000px is the width and 525px is the image height. Use the following code:

     

    <div style="background:url('http://gymnastics411.com/wp-content/uploads/2013/02/header-graphic-homepage-gymnastics-411.png') no-repeat;background-size: 1000px 525px;">

    <script type="text/javascript" src="//www.jotform.us/jsform/30043742315140"></script>

    </div>

    2. Try editing it again and save your form afterwards. Clear your browser's cache if the form still displays the outdated one. You might be viewing the old cached version of your form.

    Let us know how this turns out. Thank you!:)

  • Profile Image
    gymnastics411
    Answered on February 12, 2013 at 08:02 PM

    Hi Cris,

    Neither one of these solutions is working.  Any other suggestions?

  • Profile Image
    EltonCris
    Answered on February 12, 2013 at 11:33 PM

    Hi

    Thanks for the updates.

    1. Try defining height and width, that should help base on my test here as well.

    <div style="background:url('http://gymnastics411.com/wp-content/uploads/2013/02/header-graphic-homepage-gymnastics-411.png') no-repeat;background-size: 100% 100%; height:525px !important;width: 1000px !important;">

    <script type="text/javascript" src="//form.jotform.us/jsform/30043742315140"></script>

    </div>

    Just adjust the values if necessary.

    2. I don't see any difference between your form on edit mode and on the live version. This is how it displays on my end. I would suggest to review the changes you've made. Which part of the form you've omitted?

  • Profile Image
    gymnastics411
    Answered on February 21, 2013 at 02:10 PM

    Cris,

     

    2 things: 

    1.  Above I want to remove the word "E-mail" from above the email form.  The form lets me do it and shows me a preview without it but when it saves and shows up on my site it is back again.  What gives???

     

    2.  if you visit the page:  http://gymnastics411.com/about-us/ - I am trying to create a black bar below the image that I've inserted.  The image I've inserted is the same color as my background so that it will blend into the background.  however this doesn't happen as the background surrounds the image.  I only want black below the image so that it looks like a bar below what will be a header image or another way of saying it would be that I only want black on the background of the email, html and button fields in my form.  How do I acheive this?

  • Profile Image
    pinoytech
    Answered on February 21, 2013 at 03:55 PM

    Hi,

    1.  Above I want to remove the word "E-mail" from above the email form.  The form lets me do it and shows me a preview without it but when it saves and shows up on my site it is back again.  What gives?

    - Inject this codes in to your form to remove the label.

    #label_3.form-label-top {

    display: none;

    }

    2.  if you visit the page:  http://gymnastics411.com/about-us/ - I am trying to create a black bar below the image that I've inserted.  The image I've inserted is the same color as my background so that it will blend into the background.  however this doesn't happen as the background surrounds the image.  I only want black below the image so that it looks like a bar below what will be a header image or another way of saying it would be that I only want black on the background of the email, html and button fields in my form.  How do I acheive this?

    - Are you referring to which part of your website or form for further assistance?

    Thank you!