To make the "Contact" button scroll down to your contact form in Kubio on WordPress, you need to follow these steps:

1. Assign an ID to the Contact Form Section

• Edit the Page: Go to the page with your contact form using the Kubio page builder.


• Select the Contact Form Section: Click on the section or block where your contact form resides.


• Set a CSS ID:
  
  
  • Look for the "Advanced" or "Block Settings" tab in the sidebar.
  
  
  • Find the "HTML Anchor" or "CSS ID" field.
  
  
  • Enter a simple ID, like contact-form. (Avoid spaces and special characters.)
  
  
  
  

2. Set the Button Link to the Section ID

• Edit the Button: Click on the "Contact" button to open its settings.


• Link to the ID: In the link field, enter the ID with a hashtag, like #contact-form.


• Save Changes: Make sure you save or update the page.

3. Test the Scroll Behavior

• Preview the Page: Click on the "Contact" button and see if it smoothly scrolls down to the contact form.

4. Add Smooth Scrolling (Optional)

• If the scrolling is not smooth, you can add custom CSS:
  
  
  1. Go to Appearance > Customize > Additional CSS.
  
  
  2. Add the following CSS code:
  
  
  
  

html {
  scroll-behavior: smooth;
}

• Publish the changes and test again.

5. Mobile Optimization (Optional)

• Check the behavior on mobile devices to ensure the scroll works seamlessly across all screen sizes.

If you need more advanced behavior, like animation or delay, let me know!

If the advanced tab is locked out in the free version of Kubio, you can still achieve smooth scrolling to your contact form by using a bit of custom HTML and a manual approach:

1. Add an HTML Block to the Contact Form Section

• Edit the Page: Go to the page with the contact form.


• Add an HTML Block: Drag an HTML block above or within the contact form section.


• Insert an HTML Anchor:

<a id="contact-form"></a>

• This creates an invisible anchor that you can link to.

2. Update the 'Contact' Button Link

• Edit the Button: Go to your "Contact" button settings.


• Set the Link: In the button link field, enter #contact-form.

3. Enable Smooth Scrolling with Customizer or Custom CSS

• Go to Appearance > Customize > Additional CSS and add:

html {
  scroll-behavior: smooth;
}

4. Save and Test

• Save all changes and preview the page.


• Click the "Contact" button to ensure it smoothly scrolls to the form.

This method bypasses the need for the advanced settings in Kubio while still providing the functionality you need. Let me know if this works or if you need more help!