How to show form in popup in website?

Hi all,

Hoping someone can help me.  My website is in SQS (SquareSpace) and I want to have a popup to suggest signing up to my new company newsletter.  And I don't like the choices offered by SQS.  So, I wanted to use JF.  However, I'm having trouble finding a form that would be just a popup, with no background image at all, ideally going wide across the bottom of the pages in my site and just capturing Fname, Lname, company and email address in a single "page" and being fully formatable.  Can someone point me to where I might find such a creature in and amongst the 10,000+ choices?

Thanks VERY much!

Yes it is possible to build form to achieve your requirement. You can build form without any image background and display all the questions in one single line by taking advantage of our shrink feature.

Please take a look at the following demo form I created for you and see if it works as expected: https://form.jotform.com/200202095656044

Feel free to clone this form for a closer look. The following guide should help you in form cloning: https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

If you want to display the form in popup, you can embed your form using lightbox embed code. The following guide should help you: https://www.jotform.com/help/220-How-to-Create-a-Lightbox-Form

Please note that you can auto-popup lightbox form as well. The following guide should help you: https://www.jotform.com/help/203-How-to-Auto-popup-a-Lightbox-Form

Hope this helps.

Do get back to us if you have any questions.

Thanks Ashwin.  How do I get it to display across the bottom of the page (so landscape instead of portrait and docked at the bottom)?

I'm afraid that this customization needs to be done with some CSS code, in order to test, we will need to get the link to your page, please kindly provide us with that, we will be happy to help. 

Hi Kevin,

The home page is https://ariaconsulting.net

I checked the website link and I was not able to see LightBox form. Could you please share a screenshot of the link on your website where you added Lightbox so we can assist you properly?

Related guide: https://www.jotform.com/help/203-How-to-Auto-popup-a-Lightbox-Form

We'll wait for your response.

That would be because I'm attempting to find where you guys have moved the formatting control for the placeholder text.  You've changed the formatting quite a bit since the last form I designed and the intuitiveness is much lower.

Please note that placeholder option is available under advanced tab of the fields property. Please check the screenshot below:

You seems to be using cards form layout. If you want, you can switch to classic layout. You may like to take a look at the following guide which should help you: https://www.jotform.com/help/493-How-to-Change-the-Form-Layout

There is nothing under advanced that allows me to change the font color so the placeholder text can actually be SEEN.  Right now it's white text in a white box.  That equals invisible.

Unfortunately, there's no option to change the color text of the Placeholder. 

If you want, you can switch back to the Classic Form Layout so we can inject custom CSS code and change the color font of the Placeholder.

Related guide: How-to-Change-the-Form-Layout

OK, I think I've got the form setup about as well as I can.  So, how do I make it go to landscape at the bottom of the page?

I would recommend you to kindly clone my colleague's form https://form.jotform.com/200202095656044 and embed it to your web page using the desired method, let us know once it's done so we can assist you with the needed code to display the form as you want (it should be already landscape so we can see how to set it to the bottom). 

You want me to REDO all the work I did already?!@?!?

Please share a screenshot where you want to place the Lightbox form. I checked your form and there's still no embedded form. To post a screenshot here in the Support Forum, please follow this guide: https://www.jotform.com/help/438-How-to-Post-Screenshots-to-Our-Support-Forum

Also, I think the form my colleague's suggestion is for testing purposes only while waiting for your working/main form. 

Well, I will be wanting to have it on all the pages in my site, but for the home page specifically, I would want it to pop up in the area in this shot.

Please be noted that you cannot customize the Cards layout form to extend it across the entire page neither you can change the background and make it transparent. We cannot inject any custom CSS to the Cards layout. It has certain limitations.

That is the reason my colleague suggested to use the demo form suggested by him. We can customize it further by injecting CSS and increasing its width to match the website's width and design.

Thanks.

I cloned that form.  However, as soon as I made any change the platform decided to make it a card layout.

You must be cloning it with card form layout. Please note that you can change the form layout from your form setting. You may like to take a look at the following guide which should help you: https://www.jotform.com/help/493-How-to-Change-the-Form-Layout

Hope this helps.

Do get back to us if you have any questions.

OK, it's changed and I've applied the styling I want.  Now what?

You can now embed your form in your webpage, the following guide should help you: How-to-Create-a-Lightbox-Form

Please note that you can auto-popup the lightbox, please refer to this guide as a reference: How-to-Auto-popup-a-Lightbox-Form

Please give that a try and let us know how it goes.

My question is how get it to be "landscape" oriented across the bottom of the pages?  The lightbox aspect is the easy part ;).  I need help with the hard part.

I have injected CSS to make the form appear in the landscape mode. You can clone this form and then embed it as a lightbox in your website:

Here is the Form URL:

https://form.jotform.com/200239227004947

Thanks.

How do I fix the image so it isn't looking ridiculous?

Please replace all the CSS Code in your form with this: https://pastebin.com/raw/sCaEeh6r

Demo Form: https://form.jotform.com/200289031193954

Please give it a try and let us know how it goes.

Unfortunately, this is what I got when I put the lightbox code on a test page in my site after applying the CSS.

I cloned the form of my colleague and I was not able to replicate the issue.

I checked the page or website you shared and I was not able to find the Lightbox link. Could you please guide us on what to click to open the form?

We'll wait for your response. 

As I mentioned, I deployed it to a test page.  Which is very creatively named (https://ariaconsulting.net/new-page-1).

You will note that the lightbox is not coming across the bottom of the page.  Rather, it's popping in the middle.  Plus the display issue with the form itself.

I have injected responsive CSS in your Form which has fixed the alignment of the form.

Hope this helps!

Thanks.

Well, it's improved, thank you. But, it still isn't appearing at the bottom of the web page in a landscape type presentation (which was part of my goal), and the company logo is chopped off and off-center.

It still isn't appearing at the bottom of the web page in a landscape type presentation (which was part of my goal).

What do you mean? Do you want to place the lightbox at the bottom of your form? Please note that the lightbox only appears in the middle of the webpage as it is a pop-up form.

And the company logo is chopped off and off-center.

Can you please show us a screenshot of what the form looks like on your end?

We would appreciate it if you could mark the issue you are referring to so that we can better understand the issue you are reporting and provide you with a fix in a timely manner.

Guide: How-to-Post-Screenshots-to-Our-Support-Forum

Looking forward to your response.

OK, somebody fixed the logo portion so it isn't being pushed to the left and chopped off.  However, at the very beginning of this thread I had said:

"ideally going wide across the bottom of the pages in my site and just capturing Fname, Lname, company and email address in a single "page" and being fully formatable"

To display the lightbox in the landscape mode, you would have to increase the width of the Lightbox window. I have increased it for you. Please re-embed the code into your website. We will fix the form's CSS code for you.

The Lightbox code will be viewed in this way:

Let us know once you have re-embedded the form on your website.

Thanks.

OK, I removed the old code and re-embedded the lightbox code on the test page.  At the moment it looks like this.

Let me check this now and inject responsive CSS now.

Thanks.

I have injected the following CSS in your form:

.form-all {
    width : 100%;
}

.form-textbox, .form-textarea {
    width : 410%;
    max-width : 800%;
}

span.form-sub-label-container:nth-child(2) {
    position : relative;
    left : 570px;
}

.form-all::before {
    background-size : 1060px 157px;
    top : -200px;
    position : relative;
    left : 1%;
}

#\32 00205307861243 {
    height : 650.8px;
}

Could you please review your website now. Please feel free to let us know if you want any further changes.

Result:

Thanks.

Thanks Roneet.  Only one remaining question:  Because the form requires just a bit of scrolling to realize it's a form and to fill it out, how can I add text that would appear right below the company logo to indicate that the popup is for a newsletter sign up?  It would need to be right at the very top of the form 'body' below the logo.

Might be easier to understand with this mock up.

I added the "Welcome! Let's Stay Connected. Sign Up for Our Newsletter!" message to your form. Kindly check your webpage: https://ariaconsulting.net/new-page-1 and see if that meets your needs.

That works.  But an issue I just noticed.  In the 'build view' the fields have labels.  In the 'actual view' there are no labels.  Did I accidentally turn something off that should be on??

The hidden field label of your form is due to the theme you are using.

To resolve the issue, please inject the custom CSS codes below to your form.

.jotform-form .form-line[data-type="control_textbox"] .form-label, .jotform-form .form-line[data-type="control_textarea"] .form-label, .jotform-form .form-line[data-type="control_fullname"] .form-label, .jotform-form .form-line[data-type="control_email"] .form-label, .jotform-form .form-line[data-type="control_address"] .form-label, .jotform-form .form-line[data-type="control_phone"] .form-label {

    display: block !important;

}

Feel free to let us know if you need any further assistance.

Well, 2 of 3 are there now ;))

Please inject this CSS code to rectify the issue.

.jotform-form .form-line[data-type="control_textbox"] .form-label.form-label-top {

    display: block !important;

}

Let us know if you need any further assitance.

Golden!  Thanks guys!