Need 2nd Button on Form: Forms Embedded b/w Survey Widget Sections (Submit Contact or Next Secti

[navroop]

Hi, 

Back with new forms questions. We currently have a Self Assessment / Questionnaire Widget that presents a series of 3 Sections of 3 Questions each and provides scoring for each section along the way as well as a final composite scoring.

Since some folks may realize after Section 1 that they need to get in contact, we present a form after each Section of 3 questions. From there we capture four fields of information.

When presenting Section 1 and Section 2 we need two buttons on the form -- one to submit contact information and the other to advance if they want to continue to the next section to answer additional self assessment Questions. In Section 3, we only require the submit button.

This is currently built out using Contact Form 7 which allows for defining two buttons via code where one invokes submission and the other allows to advance to the next part of the Widget tool.

Here's wha the form looks like after Section 1 & Section 2.

Code Defining these two placed into custom form definition for Contact Form 7 looks like:

I've succesfully modified the widget to show a Hubspot form instead via placing the short-code for a form copied from the Hubspot plugin on Worpdress in place of the short-code that calls Contact Form 7 forms.

So, I know that works.

The question then becomes, how do I add a second button to a Hubspot Form and call the requisite next Step so the user can continue with the questionnaire if they're not ready to submit contact info yet?

Is there a way to do this without having to first build out forms in HMTL/CSS on Wordpress and then wiring via the Hubspot API?

Happy to provide more details / answer additional questions. I know we're not the first to ask about second buttons on Hubspot Forms, but have yet to see any solutions posted...

Thanks!

[TomM2]

Hey @navroop there's no way out of the box to do this it would require some customisation, but there's ways to do this without having to build a completely custom form. 

One thing you may want to look into is customising the form embed code. 

If you use your full form embed code instead of the WP shortcode, you can add in custom JS to the form to inject a button into your form. This will obviously require some custom JS and HTML to add in but is a lot lighter work than building a custom form and integrating. 

The other option would just be to build the second button outside the form and move in with CSS, I'd definitely advise the first option over this but if you're not strong on JS this might be a suitable option! 

[navroop]

This is helpful. Actually, your response sparked another idea re: Spam protection which I created a new post about.

The CSS option is out given where it needs to be integrated.

The other option though -- I hadn't realized Custom JS / HTML for addition of a button there was even possible. Any examples of someone doing this or something similar?

I'm a quick study, but a starting point beyond the doc would be amazing...

Thanks again!

[TomM2]

@navroop Realistically it is custom, I don't personally have an example of this off hand that I can share. I've researched and offered additional buttons for client use cases but ultimately another option was more suitable/scalable. Honestly any clients I've consulted with have either decided on a different redirect, different link or follow-up email for something like this. Which is a good question, if you critically analyse your lead journey flow, do you really want someone who is in the middle of filling out your form to leave and go into a completely different flow?

Regarding spam protection, I'm unsure if this is relevant. Am I understanding correctly that you want the additional button to just link to a meeting? If so, there's no link spam protection built in to HubSpot, just recaptcha submission protection, since this isn't a submission there's no built in spam protection for the link click. 

[navroop]

Hi Tom, Sorry two different things. I'll drop a link to the spam protection post, but it's a different matter. I only mentioned it because the link you dropped in your earleir response gave me an idea on how to solve it.

With respect to this particular use case and the need for a second button, it's actually the inverse. This may help clarify:

• We have a Widget that is designed to help people self-assess a type of cybersecurity risk across 3 dimensions.
• We provide an individual Risk score for each of these three dimensions
• We also provide a composite Risk score
• Each of the 3 underlying risk scores is computed based on responses to 3 Questions per dimension.

In previous work on such widgets, the devs/agency we worked with had found:

• That many people will abandon such widgets if presented with all questions at once or when it appears the flow will be too long.
• Breaking it into manageable single Question bites as part of a group of 3 led to better engagement.
• Since the 1st Risk score alone may be enough to prompt further discussion a CTA / form is presented after the first risk score is presented after the first 3 questions.
• But, for those who wish to learn more about their risk, they can continue through to the 2nd section of 3 qeustions after which they'll receive a risk score and again a CTA to get a convo started.
• For those who really want all 3 risk scores they can continue to the 3rd section and answer the remaining 3 questions after which they'll be provided the 3rd Risk score and a Composite Risk and a final CTA.

So the Second button is really just a "Continue Assessment" button to go to next section if you're not ready to fill in the CTA form yet.

We thought through alternatives before building this Widget out originally, and this came through as the best option / flow given the complexity of the space folks are self-assessing risk for.

Thoughts? 

Meantime, I'm going to do some further research re: adding a second button via JS/HTML.

------

In case you're interested in the Spam protection case:

https://community.hubspot.com/t5/Lead-Capture-Tools/Akismet-in-onBeforeFormSubmit-to-Further-Reduce-...

[TomM2 · Accepted solution]

Ah! That makes completely sense, thanks for the context @navroop yeah then the custom embed code is your best option with this. You likely want to use the "onFormReady" callback and use that to trigger your JS to inject the HTML module into your form. 

https://legacydocs.hubspot.com/docs/methods/forms/advanced_form_options 

[navroop]

You rock! Looked up an example of how that function has been used by others and it sounds like more than enough of a starting point.

Thank you!

[BérangèreL]

Hi @navroop, thank you for posting in the Community!

Also, thanks @TomM2 for your help on this 🙂 

Have a lovely day!
Bérangère