Contact form with drop-down alternatives - using the custom liquid area

[fredheimK]

Hello,

I am in need of some help with figuring out how to fully finish my drop-down contact form, which is not placed in the "contact"-page area but at another page using the custom liquid field.

I have coded my way up until a certain point, but have no clue what to do next in order to complete in all.

Below are two pictures showing the actual page, but also the code I've made thus far.

What I am having problems with is:

1. Making sure that the customer actually can send in the contact form
   - And also where the form information will be sent
2. Making it all look visually good
3. Creating space between the "drop-down" field with "what is your request regarding?", and
4. Adding another drop-down area asking how many attendees the event has.

The code I'vre written thus far:

{% form 'contact' %}
  {{ form.errors | default_errors }}

  <div class="first-name">
    <label for="first-name">First name</label>
    <input type="text" name="contact[first_name]" id="first-name" />
  </div>

  <div class="last-name">
    <label for="last-name">Last name</label>
    <input type="text" name="contact[last_name]" id="last-name" />
  </div>

  <div class="Organization">
    <label for="Organization">Organization</label>
    <input type="text" name="contact[Organization]" id="Organization" />
  </div>

  <div class="phone">
    <label for="phone">Phone</label>
    <input type="tel" name="contact[phone]" id="phone" />
  </div>

  <div class="email">
    <label for="email">Email</label>
    <input type="email" name="contact[email]" id="email" />
  </div>

<div class="request-type">
  <label for="request-type">What is your request regarding?</label>
  <select id="request-type" name="contact[request_type]">
    <option>Conference or seminar</option>
    <option>Festival or concert</option>
    <option>Work event</option>
    <option>Private event</option>
    <option>Gift
</option>
    <option>Bar, café, or restaurant
</option>
    <option>Other</option>
  </select>
</div>


  <div class="message">
    <label for="message">Message</label>
    <textarea name="contact[body]" id="message"></textarea>
  </div>

  <div class="submit">
    <input type="submit" value="Create" />
  </div>
{% endform %}

In advance - thanks for all help!

Kind regards,

Kristian

[solverStaff]

Hello @fredheimK 

You can check their official docs https://shopify.dev/themes/customer-engagement/add-contact-form

[fredheimK]

Already tried to do so, as this was where I found some of the code from. It did however not help me in finalizing the form. Thank you for trying to help, but I need some more help than this.

[fredheimK]

Update ...
I've managed to make nearly all done, but need help with one final step:

How can I change the color of the "submit" field so that it seems as an actual button? Preferably to be in brand colors.

Below is a picture and the code for that specific area

  <div class="submit">
    <input type="submit" value="Submit" />
  </div>
{% endform %}

[Simonsron]

<div class="submit">
<button type="submit" style="background-color: color number;color:color number;border:0px;outline:none;">Submit</button>
</div>

[Simonsron]

<div class="request-type">
  <label for="request-type">What is your request regarding?</label>
  <select id="request-type" name="contact[request_type]" style="display:block;">
    <option value="Conference or seminar">Conference or seminar</option>
    <option value="Festival or concert">Festival or concert</option>
    <option value="Work event">Work event</option>
    <option value="Private event">Private event</option>
    <option value="Gift">Gift
</option>
    <option value="Bar, café, or restaurant">Bar, café, or restaurant
</option>
    <option value="Other">Other</option>
  </select>
</div>

Because you don't have the option to set the value of the drop-down,so you are receiving less than the value.