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

fredheimK
Excursionist
16 0 4

 

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.

 

 

 

 

fredheimK_0-1672908660441.png

fredheimK_1-1672908714071.png

 

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

 

 

Replies 5 (5)

solverStaff
Shopify Expert
359 40 69

Hello @fredheimK 

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

If my reply helpful then please Like to let me know!
If my answered is right according to your question, Mark it as an Accepted Solution.
Facing more issues ? Hire me For Quick Chat: Say hello in WhatsApp : +8801761469797
fredheimK
Excursionist
16 0 4

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
Excursionist
16 0 4

 

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

fredheimK_0-1672934780461.png

 

 

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

 

Simonsron
Shopify Partner
699 87 122

 

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

 



banned

Simonsron
Shopify Partner
699 87 122
<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.

banned