docuseal/app/views/submissions/_phone_form.html.erb

<%= form_for '', url: template_submissions_path(template), html: { autocomplete: 'off' }, data: { turbo_frame: :_top } do |f| %>
  <% submitters = template.submitters.reject { |e| e['invite_by_uuid'].present? || e['optional_invite_by_uuid'].present? || e['invite_via_field_uuid'].present? } %>
  <dynamic-list class="block" data-multiple-classes="px-3 <%= submitters.size > 1 ? 'pt-3 pb-4' : 'py-4' %> rounded-xl border border-dashed border-base-300">
    <div class="space-y-4">
      <div class="relative" data-targets="dynamic-list.items">
        <div>
          <div class="absolute top-5" style="right: 12px">
            <a href="#" data-action="click:dynamic-list#removeItem" class="<%= submitters.size == 1 ? 'right-2 top-1' : '-top-3' %> relative block w-6 h-6 text-neutral-700 p-1 hidden hover:text-base-content">
              <%= svg_icon('trash', class: 'w-4 h-4') %>
            </a>
          </div>
          <div class="grid <%= submitters.size > 1 ? 'md:grid-cols-2 gap-4' : 'gap-1.5' %>">
            <% submitters.each_with_index do |item, index| %>
              <submitter-item class="grid <%= submitters.size > 1 ? 'gap-4' : 'md:grid-cols-2 gap-1.5' %>">
                <div class="form-control">
                  <% if submitters.size > 1 %>
                    <label class="label pt-0 pb-1">
                      <span class="label-text"> <%= item['name'] %></span>
                    </label>
                  <% end %>
                  <input type="hidden" name="submission[1][submitters][][uuid]" value="<%= item['uuid'] %>">
                  <submitters-autocomplete data-field="phone">
                    <linked-input data-target-id="<%= "phone_phone_#{item['linked_to_uuid']}" if item['linked_to_uuid'].present? %>">
                      <%= tag.input type: 'tel', pattern: '^\+[0-9\s\-]+$', name: 'submission[1][submitters][][phone]', autocomplete: 'off', title: t('use_international_format_1xxx_'), class: 'base-input !h-10 w-full', placeholder: t('phone'), required: index.zero? || template.preferences['require_all_submitters'], id: "phone_phone_#{item['uuid']}" %>
                    </linked-input>
                  </submitters-autocomplete>
                  <% if submitters.size > 1 %>
                    <submitters-autocomplete data-field="name">
                      <linked-input data-target-id="<%= "phone_name_#{item['linked_to_uuid']}" if item['linked_to_uuid'].present? %>">
                        <input type="text" name="submission[1][submitters][][name]" autocomplete="off" class="base-input !h-10 mt-1.5 w-full" placeholder="<%= "#{t('name')} (#{t('optional')})" %>" value="<%= (params[:selfsign] && index.zero?) || item['is_requester'] ? current_user.full_name : '' %>" dir="auto" id="phone_name_<%= item['uuid'] %>">
                      </linked-input>
                    </submitters-autocomplete>
                  <% end %>
                </div>
                <% if submitters.size == 1 %>
                  <div class="form-control flex">
                    <submitters-autocomplete data-field="name">
                      <linked-input data-target-id="<%= "phone_name_#{item['linked_to_uuid']}" if item['linked_to_uuid'].present? %>">
                        <input type="text" name="submission[1][submitters][][name]" autocomplete="off" class="base-input !h-10 w-full" placeholder="<%= "#{t('name')} (#{t('optional')})" %>" value="<%= (params[:selfsign] && index.zero?) || item['is_requester'] ? current_user.full_name : '' %>" dir="auto" id="phone_name_<%= item['uuid'] %>">
                      </linked-input>
                    </submitters-autocomplete>
                  </div>
                <% end %>
              </submitter-item>
            <% end %>
          </div>
        </div>
      </div>
    </div>
    <% if params[:selfsign].blank? && local_assigns[:variables_form].blank? %>
      <%= render 'add_new', template: %>
    <% end %>
  </dynamic-list>
  <%= local_assigns[:variables_form] %>
  <div class="mt-4">
    <%= render 'submitters_order', f:, template: %>
    <%= render 'send_sms', f:, checked: true %>
    <%= render 'extra_phone_fields', f: %>
  </div>
  <div class="form-control mt-4">
    <%= f.button class: 'base-button' do %>
      <toggle-on-checked data-names="send_email send_sms">
        <span><%= button_title(title: t('send'), disabled_with: t('sending')) %></span>
        <span class="hidden"><%= button_title(title: t('add_recipients')) %></span>
      </toggle-on-checked>
    <% end %>
  </div>
<% end %>