-
rpmnationalAsked on May 28, 2015 at 3:45 PM
Hi there,
I tried to embed the form on http://speedy.smcnational.info/test-page-1/. Any ideas?
Thank you,
Luke Baird
-
Mike_G JotForm SupportReplied on May 28, 2015 at 5:57 PM
Could you try to embed the <iFrame> code on the website: http://speedy.smcnational.info// but do not include the <script> section of it to avoid conflict with your web site's <script>.
So instead of you getting the whole <iframe> code and the <script> included with it.
You will just copy the <iframe> section:
and embed it to you website.
I would recommend for you to use the iFrame section if you would like to have the Thank You Message appear same place as the form after submission as this might not work really using the source code of the form.
Let us know how this solution works for you. Thank you.
-
wjkirby287Replied on May 29, 2015 at 3:42 PM
The problem with using the iFrame is it doesn't look right. Here's what i want it to look like:
Here's what it looks like with the iFrame:
I removed the javascript as you said.
Thank you for your help.
-
Mike_G JotForm SupportReplied on May 29, 2015 at 6:39 PM
I would like to apologize if my previous answer didn't work. I understand that this is what you would like to happen.
In order for you to accomplish that, you need to, first, change where your iframe code is located on your web page.
I have replicated your website and placed the iframe here:
Notice that I've added an "id" attribute on <p> so we may be able to add custom CSS to it later on. Then, I have updated the style="width:100%; height:360px; border:none; border-radius:10px !important;"
Then, add this CSS codes on your website, inside <style>
Here's the code:
#formcontainer{
padding:0px !important;
width: 380px !important;
margin-left: 0px !important;
margin-top:-20px !important;
height: 360px !important;
border-radius: 10px !important;
}
After all those, we need now to edit the form by adding Custom CSS to it using this guide.
Here's the code:
.form-all {
padding:0px !important;
margin:0px !important;
height: 360px !important;
padding-top:30px !important;
}
.jotform-form{
padding:0px !important;
width:380px !important;
height: 360px !important;
}
.form-input{
width: 200px !important;
}
.form-label{
float: left !important;
text-align: right !important;
width:100px !important;
}
.form-line{
padding: 0px 19px !important;
}
#input_2{
height:50px !important;
}
That's it. I hope this helps. Let us know if you need further assistance and/or clarifications and we will be glad to help you. Thank you.