help! Making a product a form or requiring form fill out on product,

[KSMGaming]

Hello! 

I've been working on our gaming community website and are in need of making a registration form as a product or as a requirement to purchase. 

essentially we are running tournaments with entrance fee's and need people to fill out specific information when purchasing their entrance ticket. 

I thought about making it a requirement at the end either during or after checkout but I feel like running it as the product itself would work best but im open to ideas.

I used to write code 10 years ago so im knowledgeable but also quite rusty. I tried creating a product template as seen here https://ksmgaming.com/products/single-registration

Even though code is written as certain fields are required you can still skip entire process and hit add to cart. 

would maybea link an external form from a form hosting website to be the actual product itself? 

The important part is having the payment information linked with the information on the form but also not receive any form information if they don't actually purchase. last thing we need is a whole bunch of registered teams who haven't paid.

I'm not sure if I am over thinking it, can somebody please give me some help / advice. 

this is code I have for template. 

<form>
<p class="cart-attribute__field">
<label for="team-name">Team Name</label>
<input required class="required" id="team-name" type="text" name="attributes[Team Name]" value="{{ cart.attributes["Team Name"] }}">
</p>
<p class="cart-attribute__field">
<label for="activision-account-numbers-included">Activision Account (#numbers included)</label>
<input required class="required" id="activision-account-numbers-included" type="text" name="attributes[Activision Account (#numbers included)]" value="{{ cart.attributes["Activision Account (#numbers included)"] }}">
</p>
<p class="cart-attribute__field">
<label for="kd-ratio">K/D Ratio </label>
<input required class="required" id="kd-ratio" type="text" name="attributes[K/D Ratio ]" value="{{ cart.attributes["K/D Ratio "] }}">
</p>
<p class="cart-attribute__field">
<label for="stream-url-only-1-required-per-team">Stream URL (Only 1 required per team)</label>
<input id="stream-url-only-1-required-per-team" type="text" name="attributes[Stream URL (Only 1 required per team)]" value="{{ cart.attributes["Stream URL (Only 1 required per team)"] }}">
</p>
<p class="cart-attribute__field">
<label for="discord-name-check-in-member-required-only">Discord name (Check in member required only)</label>
<input id="discord-name-check-in-member-required-only" type="text" name="attributes[Discord name (Check in member required only)]" value="{{ cart.attributes["Discord name (Check in member required only)"] }}">
</p>
<p class="cart-attribute__field">
<label for="players-2-4-activision-name-kd-ratio-if-applicable">Players 2-4 Activision name - KD Ratio (if applicable)</label>
<textarea id="players-2-4-activision-name-kd-ratio-if-applicable" name="attributes[Players 2-4 Activision name - KD Ratio (if applicable)]">{{ cart.attributes["Players 2-4 Activision name - KD Ratio (if applicable)"] }}</textarea>
</p>
<button type="submit" name="add"
{% unless current_variant.available %} aria-disabled="true"{% endunless %}
aria-label="{% unless current_variant.available %}{{ 'products.product.sold_out' | t }}{% else %}{{ 'products.product.add_to_cart' | t }}{% endunless %}"
class="btn product-form__cart-submit{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}"
{% if settings.enable_ajax %}aria-haspopup="dialog"{% endif %}
data-add-to-cart>
<span data-add-to-cart-text>
{% unless current_variant.available %}
{{ 'products.product.sold_out' | t }}
{% else %}
{{ 'products.product.add_to_cart' | t }}
{% endunless %}
</span>
<span class="hide" data-loader>
{% include 'icon-spinner' %}
</span>
</button>
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
</div>
</div>
{% endform %}
</div>

[pvoulg · Accepted solution]

Hi @KSMGaming, 

If you don't have any other limitations I may not be considering, you can grab user information that you can link to a customer's order (and therefore the payment info) directly from the cart page. You can use cart attributes for that, which will then appear as Additional details inside the order, right below the order Notes.

You can use the Shopify UI Elements generator to create a whole form with the fields you need. Check it out here, it's pretty straightforward.

[KSMGaming]

Hello thank you for your speedy reply

So just to clarify you do mean the "your cart" page before you hit check out correct? 

So if I code in a standard form it will automatically input data to the additional notes section or will i have to code in the destination?

[pvoulg]

Indeed, you can add your form in the cart page, which is right before checkout.

You don't even need to include the <form> tags, or anything else form related (like the buttons—the checkout button will function as the form submission), since technically the whole cart is a form by itself. You only need to include the input fields and their labels and it should work as expected. 

[TechSolver]

@KSMGaming Hi again!

I found this Shopify app that will do exactly what you want. It's $8.99 a month.

[TAVC]

@TechSolver Thank you for posting this.  I know this is forever old, but it's exactly what I needed too!  Thanks for being awesome 😀