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

    I have some weird arrows showing up on my form that I got form your templates

    Asked by skibutte on February 20, 2013 at 12:38 PM

    I created a contact form using one of your templates.

    When I place fhe form on my site using the source code, I get weird arrows that appear in the form. How can I correct this?

    Also, the form has horizontal lines running thru it and the message are is extending into the blue envelope

     

    Thanks!

     

    Doug Norton

    Page URL:
    http://www.yellowletterexposed.com/contact-us/

    Screenshot
    contact form source message horizontal
  • Profile Image
    JotForm Support

    Answered by ardy0689 on February 20, 2013 at 12:53 PM

    Hello Doug, I explored your site and noticed arrows too on some pages. I believe the style or theme of your website are conflicting with the Jotform template you used. What I observed that every list element will impose an arrow bullet image located on your website.

    I do have a work around for this:

    form ul{
    list-style-type: none;
    }

    You can insert that to your CSS file to prevent your master styles conflicting with the form. Let me know if this works for you.

  • Profile Image

    Answered by skibutte on February 20, 2013 at 02:49 PM

    Thanks for your help thus far. Where exactly in the css file would I place the code? Does it need to be on 3 lines like it was written above, or just one line? Does it need anything in front of it or does it need to go under any special heading?

     

    Doug

  • Profile Image
    JotForm Support

    Answered by ardy0689 on February 20, 2013 at 03:08 PM

    You can place it on the bottom as browsers usually render the styles from top to bottom. By placing it at the bottom inside CSS file, you can be sure that it will be the last to be rendered and no other CSS styles will replace it.

    Well, you can actually use the short one and make it one line like this:

    form ul{list-style-type:none;}

    It does not need anything in front of it. Form is an html tag so it is mentioning "<form>" and at the same time targetting the unordered list "<ul>". It will work by itself and does not need to be on any special heading. Please let me know if that works.

  • Profile Image

    Answered by skibutte on February 21, 2013 at 04:18 AM
    Thanks for your help tus far. Where exactly in the css file would I place the code? Does it need to be on 3 lines like it was written above, or just one line? Does it need anything in front of it or does it need to go under any special heading?

    Doug


  • Profile Image

    Answered by skibutte on February 21, 2013 at 04:18 AM
    I Followed your instructions and it still didn’t work.
    Below is the code for the css:
    ---------------------------------------------------
    @charset "utf-8";
    body { margin:0; padding:0; width:100%; background: #e7e1d4 url(images/main_bg.gif) top repeat-x;}
    html { padding:0; margin:0;}
    a { text-decoration:none;}
    a:hover { text-decoration:underline;}
    /* main */
    .main { padding:0; margin:0 auto;}
    /********** header **********/
    .blok_header { margin:0; padding:0; background:#fff;}
    .header { width:1000px; margin:0 auto; padding:0;}
    /* logo */
    .logo { padding:0; margin:0; width:391px; float:left;}
    /* search */
    .search { float:right; padding:0; margin:55px 30px 0 0; }
    .search span { display:block; float:left;}
    .search form { display:block; float:left; padding:5px 0;}
    .search form .keywords { float:left; background: url(images/search_bg.gif) left top no-repeat; border:0; height:16px; width:152px; padding:8px 0px; margin:0; font:normal 11px Arial, Helvetica, sans-serif; color:#a1a1a1;}
    .search form .button { float:left; margin:0; padding:0;}
    /* menu */
    .menu_resize { margin:0; padding:0; background: url(images/menu_resize_bg.gif) top repeat-x; height:51px;}
    .menu_resize_width { width:1000px; margin:0 auto; padding:0;}
    .menu { padding:0; margin:0; width:500px; float:left;}
    .menu ul { padding:0; margin:0; list-style:none; border:0;}
    .menu ul li { float:left; margin:0; padding:0 0 0 15px; border:0;}
    .menu ul li a { float:left; margin:0; padding:21px 0 17px 0; color:#fff; text-decoration:none;}
    .menu ul li a span { margin:0; padding:21px 15px 17px 15px; color:#fff; font:normal 12px Arial, Helvetica, sans-serif; text-decoration:none;}
    .menu ul li a:hover { background:url(images/r_menu.gif) no-repeat right;}
    .menu ul li a:hover span { background:url(images/l_menu.gif) no-repeat left;}
    .menu ul li a.active { background:url(images/r_menu.gif) no-repeat right;}
    .menu ul li a.active span { background:url(images/l_menu.gif) no-repeat left;}
    .menu ul li.current-menu-item a { background:url(images/r_menu.gif) no-repeat right!important;}
    .menu ul li.current-menu-item a span { background:url(images/l_menu.gif) no-repeat left!important;}
    /*RSS*/
    .RSS { width:120px; float:right; right no-repeat; height:21px; font: normal 11px Arial, Helvetica, sans-serif; color:#ffffff; font-size:18px; padding:5px 0 0 0; margin:15px 0 0 0;}
    /*header_text_bg*/
    .header_text_bg { margin:0; padding:0; background:url(images/header_text_bg.gif) top repeat-x;}
    .header_text_bg2 { margin:0; padding:0; background:url(images/header_text_bg.gif) top repeat-x;}
    .header_text2 {height:95px; margin:0 auto; padding:0; width:1000px;}
    .header_text2 h2 { font: normal 28px Arial, Helvetica, sans-serif; color:#fff; padding:20px 0 0 40px; margin:0;}
    /*header_text*/
    .header_text {height:288px; margin:0 auto; padding:0; width:1000px; }
    .header_text .div .left1 { float:left; width:500px; padding:0; margin:40px 0 0 40px; }
    .header_text .div .left1 h2 {font:normal 30px Arial, Helvetica, sans-serif; color:#ffffdc; padding:20px 0 0 0; margin:0;}
    .header_text .div .left1 h2 span { color:#410100;}
    .header_text .div .left1 img { margin:0 10px 0 0; padding:0;}
    .header_text p { font:normal 13px Arial, Helvetica, sans-serif; color:#ffffdc; padding:20px 0 0 0; margin:0; line-height:1.8em;}
    /*bloga_resize*/
    .bloga_resize { margin:0; padding:0; background:url(images/bloga_resize_bg.gif) top repeat-x;}
    .bloga_resize_use { margin:0 auto; padding:10px 20px; width:960px; height:371px;}
    .bloga_resize_use2 { margin:0 auto; padding:0; width:1000px; height:104px; background:url(images/bloga_bg2.gif) top repeat-x;}
    .bloga_resize_use2 h2 { padding:30px 0 0 40px; margin:0; font: normal 45px Arial, Helvetica, sans-serif; color:#fff;}
    .bloga { width:220px; float:left; margin:0; padding:10px;}
    .bloga h2 { font: normal 25px Arial, Helvetica, sans-serif; color:#111213; margin:0; padding:5px 5px; text-transform:uppercase;}
    .bloga p { font: normal 13px Arial, Helvetica, sans-serif; color:#410100; padding:10px 5px; margin:0; line-height:1.8em;}
    .bloga img.normmal { float:left; margin:5px 5px; padding:0;}
    /********** body **********/
    form ul{list-style-type: none;}
    .body { margin:0; padding:0; background:#ffffff;}
    .body_resize { margin:0 auto; padding:0 10px; width:980px;}
    .body h2 { font: normal 28px Arial, Helvetica, sans-serif; color:#410100; margin:5px 0; padding:10px 5px;}
    .body h4 { font: normal 28px Arial, Helvetica, sans-serif; color:#111213; margin:5px 0; padding:10px 5px;}
    /*.body img { float:left; padding:0; margin:5px 5px;}*/
    .body ul { list-style:none; margin:10px 10px; padding:0;}
    .body li { background:url(images/ul_li.gif) left no-repeat; padding:5px 20px; margin:0; font: normal 13px Arial, Helvetica, sans-serif; color:#2c2c2c; border-bottom:1px solid #e2e2e4;}
    .body img.port { float:right; margin:10px 40px 10px 10px; padding:0;}
    .body p { font:normal 13px Arial, Helvetica, sans-serif; color:#4a4c56; line-height:1.8em; padding:5px; margin:0;}
    .body p.news { width:40%; float:left; background:#410100; font: bold 13px Arial, Helvetica, sans-serif; color:#fff; padding:1px 3px; margin:0 5px !important; margin:0 2px;}
    .body p span { font: bold 15px Arial, Helvetica, sans-serif; color:#785a36; line-height:1.8em; padding:5px; margin:0;}
    .body a { text-decoration:none; color:#a47b4a; line-height:1.8em;}
    .body a.black { font: bold 13px Arial, Helvetica, sans-serif; color:#111213; padding:5px; margin:0; float:right;}
    .body_small { width:275px; float:left; margin:0; padding:20px 15px;}
    .body_big { width:642px; float:left; margin:0; padding:20px 15px;}
    .batton { width:100px; float:left; margin:10px 10px; padding:0;}
    ul.sub_nav a { font:normal 12px Tahoma, Geneva, sans-serif; color:#484848;}
    /*bloga*/
    .body .bloga { width:320px; float:left; margin:0; padding:20px 2px;}
    .body .bloga p { font: normal 11px Arial, Helvetica, sans-serif; color:#5f5f5f; padding:5px; margin:0; line-height:1.8em;}
    .body .bloga img.normmal { float:left; margin:5px 5px; padding:0;}
    /* END_bloga*/
    /*************footer**********/
    .footer {padding:0; margin:0; background:url(images/footer_bg.gif) top repeat-x;}
    .footer_resize {width:940px; margin:0 auto; padding:40px 30px; border:0;}
    .footer p { font:normal 13px Arial, Helvetica, sans-serif; color:#fff; padding:10px 0 0 0;}
    .footer a { font:normal 13px Arial, Helvetica, sans-serif; color:#fff; text-decoration:underline; padding:5px 5px; margin:0;}
    .footer img {margin:0px 5px; padding:0; float:left;}
    .footer p.leftt {text-align:left; width:40%; margin:0; padding:5px 20px; float:left;}
    .footer p.rightt {text-align:right; width:50%; margin:0; padding:5px 20px; float:right;}
    /********** contact form **********/
    .form { float:left; width:560px; margin-top:40px; margin-left:10px;}
    /********** contact form **********/
    #contactform { margin:0; padding:5px 10px;}
    #contactform * { color:#F00;}
    #contactform ol { margin:0; padding:0; list-style:none;}
    #contactform li { margin:0; padding:0; background:none; border:none; display:block;}
    #contactform li.buttons { margin:5px 0 5px 0;}
    #contactform label { float:left; margin:0; width:80px; padding:3px 10px; font:bold 13px Arial, Helvetica, sans-serif; color:#555e67; text-transform:capitalize;}
    #contactform label span { font:normal 10px Arial, Helvetica, sans-serif;}
    #contactform input.text { width:400px; border:1px solid #555e67; margin:5px 0; padding:5px 2px; height:15px; background:#fff;}
    #contactform textarea { width:400px; border:1px solid #555e67; margin:10px 0; padding:2px; background:#fff; height:250px;}
    #contactform li.buttons input { padding:3px 0; margin:0 0 0 95px; border:0; color:#FFF;}
    p.response { text-align:center; color:#2c2c2c; font:bold 11px Arial, Helvetica, sans-serif; line-height:1.8em; width:auto;}
    p.clr, .clr { clear:both; padding:0; margin:0;}
    li.bg, .bg { clear:both; border-bottom:1px solid #d1d5d9; padding:10px 0 0 0; margin:0 0 10px 0; background:none; list-style:none;}
    li.line, .line { border-top:1px solid #d9d9d9; padding:0; margin:10px 0; background:none; list-style:none;}
    form ul{list-style-type:none}
    ------------------------------------------------------------------------
  • Profile Image
    JotForm Support

    Answered by jonathan on February 21, 2013 at 08:40 AM

    @skibutte 

    Hi, may I suggest that you use iframe code to embed your form instead.

    Use this guide: -How-to-get-your-Form-s-Iframe-Code

    Please inform us if this make the difference.

    Thanks.

  • Profile Image

    Answered by skibutte on February 21, 2013 at 11:29 AM
    I have changed the code to iframe and it appears that the issue with the arrows has been fixed, but the form is now only showing the title to the form. I have read the forum and tried the suggestion of increasing the height (increased to 1000px and still no change). Please help.

    I am attaching the code for the entire page and the css code.

    Thanks!

    Doug Norton

  • Profile Image
    JotForm Support

    Answered by jonathan on February 21, 2013 at 12:37 PM

    Hi Doug,

    The last time I check your website, the form seems to be OK already.

    Please inform us if other issue persists.

    Thanks.

  • Profile Image

    Answered by onlineworkathome3 on April 10, 2013 at 07:07 AM

    Hi ,  I cannot use this template, "Contact Form with Blue Envelope Theme" i didn't see image in my site , plz help me, ..

    My page http://www.earn2dollar.com/p/contact-us_9.html

  • Profile Image

    Answered by pinoytech on April 10, 2013 at 09:18 AM

    @onlineworkathome3

    I have fixed the issue of your form for you. Can you please take a look at your website now where your form embedded? http://www.earn2dollar.com/p/contact-us_9.html

    I notice also that your Form's iframe codes height is only 40px which is why your form is not completely visible. To fixed that, on your form iframe code that you have embedded into your website just simply change the height from 40px to 578px.

    If you need further assistance, do let us know.

    Thank you!