Create a widget that will automatically scroll down your form to the bottom of the page

Hola buen día, saludos

Mi formulario tiene elementos de diseño que lo hacen un poco extenso, entonces pensando en eso quiero colocar en la parte superior un widget que lleve de forma automática al visitante a la parte final del formulario (abajo) que es donde se encuentra el área de registro. Que widget puedo utilizar que cumpla con esta función ?

Adjunto imagen del widget que hace una función similar, solo que lo hace en sentido inverso. El widget que adjunto lleva a la persona haca arriba. Yo quiero que sea al contrario, que lleve a la persona hacia abajo.

Por su atención gracias.

Carlos Silva

Hi carlosedsilva,

Our Spanish Support agents are busy helping other Jotform users right now, so I'll try to help you in English using Google Translate, but you can reply in whichever language you feel comfortable using. Or, if you'd rather have support in Spanish, let us know and we can have them do that. But, it might take a while until they're available again.

Now, coming back to your question, I checked your account and saw multiple forms. Can you send us the form link that you are referring to so we can do so we can see an alternative widget based on your required process?

Once we hear back from you, we'll be able to help you with this.

Hola Jefferson

Con gusto aquí te lo envío:

https://form.jotform.com/carlosedsilva/experiencia-de-servicio-360

Hi carlosedsilva,

Unfortunately, we do not have a widget that will automatically scroll down your form to the bottom of the page. As a workaround, we can use the paragraph element to add a CSS code so we can create a button when you click it, it will scroll down to the bottom of the page. Here's how to do it:

First, we need to get the Field ID value from the Submit button. Here's how to do it:

1. In Form Builder, click on the Build tab in the orange navigation bar at the top of the page.
2. Scroll down and click on the Submit button.
3. Click on the Gear Icon to open Submit Properties.
4. In the Submit Properties window, scroll down and copy the code inside the Field ID text box.

Next, we need to create a Paragraph element and add a source code inside it to make the Scroll Down button. Here's how to do it:

1. In Form Builder, click on the Build tab in the orange navigation bar at the top of the page.
2. Click on the Basic tab on the left side of the page.
3. Look for a Paragraph element and drag it to the top of your form.
4. Click the pen icon to edit the text of the Paragraph Element.
5. In the Paragraph element, click on the Source Code icon.
6. Paste the code below.
7. Click on the OK button to save the changes.

Source Code:

<p class="scroll-to-bottom"><a href="#input_2">Scroll<br />to<br />bottom<br />&darr;</a></p>

Next, we need to inject a CSS code into your form so that when we click the button, it will scroll down to the bottom part of the form. Here's how to do it:

1. In Form Builder, click on the Build tab in the orange navigation bar at the top of the page.
2. Click on the Paint Roller icon on the top right side of the page.
3. In the Form Designer window, go to the Styles tab and scroll down to the Inject Custom CSS text area.
4. Paste the code below:

CSS Code:

.scroll-to-bottom{

 text-align:center;

 position:fixed;

 right:5%;

 bottom:5%;

 border:1px solid #FFFFFF;

 padding:5px;

 border-radius:5px;

 line-height:18px;

 font-size:16px;

 cursor:pointer;

}

.scroll-to-bottom a{

 color: #FFFFFF;

 text-decoration:none;

}

Here's the sample output:

We also have a guide about How to Inject Custom CSS Codes that you can check out.

Give it a try and let us know if you need any other help.