Adding a new CTA on a custom module

[SSahabandu]

Hi, I have managed to edit the custom code to add a new CTA to a dynamic page on our website.

However,

1. I can't get the new CTA linked to the form.

2. I now have all CTAs stuck together with no buffer space.

Can someone help me identify the mistake I have made with the edited code.

The website page in concern is 

https://www.floorworld.com.au/product-detail/signature-purity-timber?product_name=Purity%20-%20Timbe...

The 03 CTA's now look like below;

The new CTA added was 'Request Samples', which does not link to the form created.

I am not sure if I have used the right coding to replicate this CTA. I am not even sure why custom modules were developed for this in the first place.

Please let me know how I can get my CTA linked to the form created and get this page to work as intended please.

Thank you.

[amwilie · Accepted solution]

The link is working now, but it looks like https://www.floorworld.com.au/request-samples doesn't exist. You would need to create and publish a /request-samples page. If it's going to be just a form like the https://www.floorworld.com.au/get-a-quote page you could just clone that page and switch in the form you want.

[SSahabandu]

thank you for your help!

[amwilie]

Seeing as the {{ dynamic_page_hubdb_row.request_samples_link }} variable seems to be the only part not being populated in the link my first thought is : did you add a request_samples_link column to the HubDB table the page is pulling data from and add a link path to the column for each row?

Also, the Get a Quote CTA isn't using a table variable for its path so is a variable really necessary for the Request Samples CTA path? 

[SSahabandu]

Yes, I did add the link before, but it was not working. 

I changed the code as follows;

<!-- <a href="/get-a-quote?product_name={#{ dynamic_page_hubdb_row.name }}&brand={{ final_category|join(',') }#}">GET A QUOTE</a> -->
<a href="/get-a-quote?product_name={{ dynamic_page_hubdb_row.name }}&brand={{ dynamic_page_hubdb_row.brand[0].name }}&product_category={{ final_category|join(',') }}&website_lead_form_filled=Get A Quote">GET A QUOTE</a>

<!-- <a href="/request-samples?product_name={#{ dynamic_page_hubdb_row.name }}&brand={{ final_category|join(',') }#}">REQUEST SAMPLES</a> -->
<a href="/request-samples?product_name={{ dynamic_page_hubdb_row.name }}&brand={{ dynamic_page_hubdb_row.brand[0].name }}&product_category={{ final_category|join(',') }}&website_lead_form_filled=REQUEST SAMPLES">REQUEST SAMPLES</a>
{% endif %}

{% if dynamic_page_hubdb_row.room_button_label %}<a href="javascript&colon;void(0)" id="trigger-modal" class="see_room">{{ dynamic_page_hubdb_row.room_button_label}}</a>{% endif %}

</div>
</div>
</div>

and now it goes to a 404 error page. 

Could it be that my form is not done correctly?

Also the CTA's now look like this. I did want them on a horizontal like but this is good too.

Thank you!

[SSahabandu]

Also, if we can do without the variables being pulled form the HubDb file for the 'Request samples' form, how should I go about with the code to link the CTA to the form created?

[amwilie]

Can you show us the code for that CTA section? It's not really possible to tell why the link isn't being filled in by just looking at the site. (If the page is dynamic that's exactly the reason custom modules were built; HubSpot CTAs do not have dynamic capabilities not to mention they load incredibly slow)

As for the spacing you would need to add some CSS:

.cta-wrap a + a {
  margin-left: 5px;
}

[SSahabandu]

Hi, Thanks so much for your reply. I will try the spacing now. 

the code for the 03 CTAs you see in the pic is below. The text in Red is the code related to the CTA that is not connected correctly to the form.

</div>
<div class="cta-wrap">
{% set final_category = [] %}
{% for product_category in dynamic_page_hubdb_row.product_category %}
{% do final_category.append(product_category.name|lower) %}
{% endfor %}

<!-- <a href="/get-a-quote?product_name={#{ dynamic_page_hubdb_row.name }}&brand={{ final_category|join(',') }#}">GET A QUOTE</a> -->
<a href="/get-a-quote?product_name={{ dynamic_page_hubdb_row.name }}&brand={{ dynamic_page_hubdb_row.brand[0].name }}&product_category={{ final_category|join(',') }}&website_lead_form_filled=Get A Quote">GET A QUOTE</a>

<!-- <a href="/request-samples?product_name={#{ dynamic_page_hubdb_row.name }}&brand={{ final_category|join(',') }#}">REQUEST SAMPLES</a> -->
<a href="{{dynamic_page_hubdb_row.request_samples_link}}?product_name={{ dynamic_page_hubdb_row.name }}&brand={{ dynamic_page_hubdb_row.brand[0].name }}&product_category={{ final_category|join(',') }}&website_lead_form_filled=REQUEST SAMPLES">REQUEST SAMPLES</a>
{% endif %}

{% if dynamic_page_hubdb_row.room_button_label %}<a href="javascript&colon;void(0)" id="trigger-modal" class="see_room">{{ dynamic_page_hubdb_row.room_button_label}}</a>{% endif %}

</div>
</div>
</div>