Viewing Jotform forms are looking bad in Firefox and Opera

  1. Portal Home
  2. Forum
  3. EverWeb
  4. Bug Reports

Jotform forms are looking bad in Firefox and Opera



User: Gentlemens-agency 12 years ago
I'm using multiple Jotform forms on my website and they look great in Safari and Google Chrome, but they look really bad in Firefox and Opera.
I'm using the form on a default shape and it fits in Safari and Chrome, but doesn't fit in Firefox and Opera?

Here I have 3 Forms which I use you can test them in all 4 browsers and you will the difference in the browsers.

http://www.gentlemens-agency.com/contact.html
http://www.gentlemens-agency.com/vacatures.html
http://www.gentlemens-agency.com/boekingen.html

I hope you guys can do something about it.
The forms are Embed from Jotform but the same happens when I try it with the source code or the iFrame.

This is the contact source code Jotform generates
I hope that you guys will add in the future your own widget so that I can make a bookings form or a application form without other websites.


<script src="http://cdn.jotfor.ms/static/jotform.js?3.1.1414" type="text/javascript"></script>
<script type="text/javascript">
JotForm.init(function(){
JotForm.highlightInputs = false;
});
</script>
<link href="http://cdn.jotfor.ms/static/formCss.css?3.1.1414" rel="stylesheet" type="text/css" />
<link type="text/css" rel="stylesheet" href="http://cdn.jotfor.ms/css/styles/nova.css?3.1.1414" />
<link type="text/css" media="print" rel="stylesheet" href="http://cdn.jotfor.ms/css/printForm.css?3.1.1414" />
<style type="text/css">
.form-label{
width:150px !important;
}
.form-label-left{
width:150px !important;
}
.form-line{
padding-top:2px;
padding-bottom:2px;
}
.form-label-right{
width:150px !important;
}
.form-all{
width:570px;
background:transparent;
color:#000000 !important;
font-family:'Verdana';
font-size:12px;
}
</style>

<form class="jotform-form" action="http://submit.jotformeu.com/submit/31346762603351/" method="post" name="form_31346762603351" id="31346762603351" accept-charset="utf-8">
<input type="hidden" name="formID" value="31346762603351" />
<div class="form-all">
<ul class="form-section">
<li class="form-line" id="id_1">
<label class="form-label-left" id="label_1" for="input_1">
Naam<span class="form-required">*</span>
</label>
<div id="cid_1" class="form-input">
<input type="text" class=" form-textbox validate[required]" data-type="input-textbox" id="input_1" name="q1_naam" size="50" value="" />
</div>
</li>
<li class="form-line" id="id_3">
<label class="form-label-left" id="label_3" for="input_3">
Email adres<span class="form-required">*</span>
</label>
<div id="cid_3" class="form-input">
<input type="text" class=" form-textbox validate[required]" data-type="input-textbox" id="input_3" name="q3_emailAdres" size="50" value="" />
</div>
</li>
<li class="form-line" id="id_5">
<label class="form-label-left" id="label_5" for="input_5"> Telefoon nummer </label>
<div id="cid_5" class="form-input">
<input type="text" class=" form-textbox" data-type="input-textbox" id="input_5" name="q5_telefoonNummer5" size="50" value="" />
</div>
</li>
<li class="form-line" id="id_4">
<label class="form-label-left" id="label_4" for="input_4">
Bericht<span class="form-required">*</span>
</label>
<div id="cid_4" class="form-input">
<textarea id="input_4" class="form-textarea validate[required]" name="q4_bericht" cols="40" rows="6"></textarea>
</div>
</li>
<li class="form-line" id="id_2">
<div id="cid_2" class="form-input-wide">
<div style="margin-left:156px" class="form-buttons-wrapper">
<button id="input_2" type="submit" class="form-submit-button">
Verzend
</button>
</div>
</div>
</li>
<li style="display:none">
Should be Empty:
<input type="text" name="website" value="" />
</li>
</ul>
</div>
<input type="hidden" id="simple_spc" name="simple_spc" value="31346762603351" />
<script type="text/javascript">
document.getElementById("si" + "mple" + "_spc").value = "31346762603351-31346762603351";
</script>
</form>
User: Roddy 12 years ago
These pages you have linked to are created by iWeb. What does this have to do with EasyWeb?

The contact form, for example, is only correct in Chrome and not in any of the other browsers. The submit button is chopped in Safari and missing in Firefox.

At least part of the problem is that the form uses external CSS styles and then uses HTML for the input widths so there's no possibility of getting all the input boxes the same width in the webkit browsers and Firefox.

This is how the basic form looks in Safari, Chrome and Firefox...



As you can see only Chrome displays it correctly.

It's not very good practice to place items on background shapes when you can easily change one line in the CSS.

Look for this in the internal styles...

.form-all {
width:570px;
background: #FF90E7; /* change this to the color of choice */
color:#0000FF !important; /* text color */
font-family:'Verdana';
font-size:12px;
border: 1px solid #000; /* border width, styles ... color */
}

I have commented the changes and this is the result...



-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Gentlemens-agency 12 years ago
The pages I used to show you are created by iWeb but Easyweb does show exactly the same in the preview mode.
And I'm trying to remake and improve my site in Easyweb.

And I'm using a transparent background to put the form on a nicer background for the effect. othewhise its so pink and cheap ;)
User: Roddy 12 years ago
If you are paying Jotform you should get them to sort out the problem. It doesn't just exist in iWeb and EasyWeb. The examples I showed above were done in a code editor.

You could recreate the form code and styles and still use the Jotform post method.

I just stuck in the pink for illustration. You can use a gradient so that it is the same as the shape you used. There are numerous online generators. Example...

http://www.colorzilla.com/gradient-editor/

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.


Post Reply
You must login or signup to post.