[david.kirkpatrick]

Hi There,

Ive created a custom online form, this redirects to a basic html thank you message, my problem is the iframe code that ive copied has a height which is fine for the form, but when it gets to the thank you message the height is far to big and users would need to scroll up the page to see the thank you messgage, can anyone help me to let me know what the best code is for the iframe, my code is below which has a fixed height, i want this to have an auto height, also when the form is filt out incorrectly the netsuite alert message is also not very nice, can anyone help me to iron out these 2 things please?

code ive used below

also screenshots attached of the form and also the thank you message with far too much height

cheers

Dave
This is a cached copy. Click here to see the original post.

[Nelliott]

Have you tried taking off the height parameter altogether or setting it to “100%”?

[david.kirkpatrick]

Hi There, yes tried both these things and doesn’t work, can you have a look at my code, also my set up doesn’t seem to load all the fields within netsuite have i got something wrong on my template?

Dave

body {

padding: 0px;

margin-right: 30px;

font-size: 13px;

font-family: ‘AvenirLT-Medium’,sans-serif !important;

}

h2 {

margin-bottom: 20px;

color: #4c4d4f;

font-family: ‘AvenirLT-Medium’,sans-serif !important;

}

/* ===========================

====== Contact Form =======

=========================== */

input, textarea {

margin-top:10px;

padding: 10px;

border: 1px solid #999999;

width: 100%;

color: #4c4d4f;

box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;

-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;

-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;

font-family: ‘AvenirLT-Medium’,sans-serif !important;

}

textarea {

width: 100%;

height: 150px;

line-height: 18px;

font-family: ‘AvenirLT-Medium’,sans-serif !important;

font-size: 13px;

}

input:hover, textarea:hover,

input:focus, textarea:focus {

border-color: 1px solid #C9C9C9;

box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;

-moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;

-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;

font-family: ‘AvenirLT-Medium’,sans-serif !important;

}

.form label {

margin-bottom: 20px;

color: #4c4d4f;

font-family: ‘AvenirLT-Medium’,sans-serif !important;

}

/* ===========================

====== Submit Button ======

=========================== */

.submit input {

width: 200px;

height: 40px;

background-color: #4c4d4f;

color: #FFF;

border-radius: 3px;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

font-family: ‘AvenirLT-Medium’,sans-serif !important;

}

/* ===========================

====== Select Box =======

=========================== */

select:hover, textarea:hover,

select:focus, textarea:focus {

border-color: 1px solid #C9C9C9;

box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;

-moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;

-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;

font-family: ‘AvenirLT-Medium’,sans-serif !important;

}

select, textarea {

margin-top:10px;

padding: 10px;

border: 1px solid #999999;

width: 100%;

color: #4c4d4f;

box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;

-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;

-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;

font-family: ‘AvenirLT-Medium’,sans-serif !important;

}

IFS Contact Form

Name

Email

Company

Website

Phone

How did you hear about us?

Recommended by a friend

Positive media review

Area of interest?

Acquire™

Arms™

Bravo™

Cooper Software SDK™

Trax™

[ibudimir]

Hello David,

This is not the best practice but you can try to see if it works. Add the tags to your thank you page. And enforce a smaller height for your iframe on the Thank you page, by using ‘!important’ rule. Example iframe.myFrame {height: 200px !important}. Please let me know if this worked.

Regards,

Ilija

[david.kirkpatrick]

hi can you look at my thank you page code, the iframe is separate and is pasted into joomla, can you add what you think is needed to enable the thank you page to be less in height within the iframe?

both codes below

iframe code

thank you code html

jQuery(‘iframe’).css(‘height’,’140px’);

Thank you for for using our contact form. Your submission has been sent successfully and we will be in touch soon!

[david.kirkpatrick]

hi can anyone help with this, need the iframe to have auto height, when thank you message appears its at the top of the page so you have to scroll up, can this be achieved?

---

rgeorgejr replied on 09/23/2015, 08:43 AM: Hi David –

You can dynamically resize an iframe provided the content is from the same domain (i.e. form is hosted on domain.com, and thank you page is hosted on domain.com) The problem you’re having is your form is hosted on netsuite, and your thank you page is hosted locally on your external site. Am I correct about this?

There is a solution I’ve used before, but it’s a separate library which allows you to resize an iframe dynamic to its content.

It can be found here:

https://github.com/davidjbradshaw/iframe-resizer

There may be a better way to do it, I recommend googling ‘cross domain iframe resize’ to get an idea of other possibilities.

If your use Netsuite to host your thank you page (not sure what type of hosting you have), you could try this:

in the section of your primary page add this code:

then in your iframe:

I’m not 100% certain this will work because i’ve never tried it in this particular application, but it’s worth a shot.

[Joao Wemans]

Hello All,

I am new to these online form topics. I would like to ask a very simple question:

I have a custom record type with online form and i would like to customize it as you did but i dont know where can i start playing with similar code

Where do you put your code @david.kirkpatrick?

Thank you!

[k_dunc]

Hi Joao,

In the Custom Record, click into the Online Forms subtab. Here, you have 2 options. You can create your own custom HTML layout, or you can have NetSuite create a form for you. Given that you said you’d like to customise it, click the “New Online HTML Form” button. This is where you would then link your Custom Record to a Online Custom Record Form. Provide a Name, and if you haven’t done so already, link or create a Template. This is where you would upload an HTML file that will be the basis of your Online Form. Once you’ve linked your HTML file (via the Template), you will need to add Fields from your Custom Record that marry up with Field IDs in your HTML file.

I hope that helps.

Cheers,

Kirk.

[Joao Wemans]

Thanks for the help!!

I found that I cound not see that option because i had “Marketing Automation” feature disabled.

Best regards

[Author]

Posts