Modify Contact Forms

Hello, I need your help understanding the correct syntax for making a simple change to a contact form I’m creating… and I think I’m missing some code or simple change to accomplish this (keeping in mind that I’m a self-taught learner).
What I’m trying to do is place the email and phone numbers fields in the same row but in two columns on the contact form.

So far I have only managed to reduce the area of both fields but aligned to the same column

And this is the structure of the CSS code I’m using. I clarify that I took the syntax from one of the pages in the same theme:

<label>
[text* your-name autocomplete:name placeholder “Tu Nombre”] </label>

<div class=”whb-row”>
<div class=”whb-column whb-col-6″>
<label>
[email* your-email autocomplete:email placeholder “Tu correo electrónico”] </label>
</div>
<div class=”whb-column whb-col-6″>
<label>
[tel tel-221 minlength:10 maxlength:13 placeholder “Tu Whatssapp”] </label>
</div>
</div>

<label>
[textarea* your-message placeholder “Tu mensaje”] </label>
<p>
[acceptance acceptance-482] Acepto la política de privacidad. [/acceptance]
</p>
[submit “Enviar”]

Attachments:

You must be logged in to view attached files.

Hello,

To place the email and phone number fields side by side, you’ll need to use this structure.

Here’s an example you can follow:

<div class="wd-grid-g">
  <div class="wd-grid-f-stretch">
    <div class="wd-col"><label>Email</label>[email* your-email]</div>
    <div class="wd-col"><label>Phone</label>[tel tel-221]</div>
  </div>
</div>

This will display both fields in two columns on the same row. Let us know if you need help implementing this on your form.

Best Regards,

[Author]

Posts