For HelloText

_form.html.erb

 <%= form_with(model: section, url: url, local: true,  class: 'form', id: 'product_section_form') do |f| %>
  <% if section.errors.any? %>
    <div id="error_explanation">
      <h3><%= pluralize(section.errors.count, "error") %> prohibited this product section from being saved:</h3>
      <ul>
      <% section.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <%= hidden_field_tag 'full_html_content', nil, id: 'full_html_content' %>

  <div class="form-group">
    <label for="slug" >Slug</label>
    <%= f.text_field :slug, class: 'form-control', placeholder: 'Slug' %>
  </div>
  <div class="form-group">
    <label for="content" >Content</label>
    <%= f.text_area :content, class: 'form-control',  placeholder: 'Enter HTML', size: "20x20" %>
  </div>

  <div class="form-group">
    <% if @section.form %>
      <%=
        link_to 'Remove form', remove_form_product_product_section_path(@section.product_id, @section.id),
                class: 'btn btn-md btn-danger', id: 'remove_form', method: :delete, data: { confirm: 'Are you sure?' }
      %>
      &nbsp;
      <span>
        <i>
          Do not forget to add a container for the form in the section above:
          <b>&lt;div id="form_container"&gt;&lt;/div&gt;</b>
        </i>
      </span>
      <%= render 'form_builder', form: @section.form %>
    <% else %>
      <%=
        link_to 'Add form', add_form_product_product_section_path(@section.product_id, @section.id),
                class: 'btn btn-md btn-warning', id: 'add_form' unless @section.new_record?
      %>
    <% end %>
  </div>

  <div class="form-actions" style="margin-bottom: 5px;">
    <%= f.submit 'Save', class: 'btn btn-success', id: 'product_section_submit' %>
    <button type="button" class="btn btn-success" onclick="$('#load-section-file-modal').modal('show');" style="color: #fff;">Load from file</button>
  </div>
<% end %>

<%= render 'shared/froala', selector: 'product_section_content', use_iframe: false %>
<%= render partial: 'load_from_file', locals: { section_id: @section.id } %>

_form_builder.html.erb

<hr>
<h4>Form in section</h4>

<div class="form-group">
  <%= text_field_tag 'form[submit_to]', form.submit_to, class: 'form-control', placeholder: 'Submit to path' %>
</div>

<%= hidden_field_tag 'form[content]', form.content, id: 'form_content' %>
<div id="form_builder"></div>

<script>
  var form_builder;
  var content = JSON.stringify(<%= form.content ? form.content.html_safe : [] %>);
  $('#form_builder').formBuilder().promise.then( formBuilder => {
      form_builder = formBuilder;
      formBuilder.actions.setData(content);
  });

  $('#product_section_form').submit(function() {
    $('#form_content').val(JSON.stringify(form_builder.actions.getData()));
    return true;
  });
</script>

_load_from_file.html.erb

<div class="load-section-file-modal modal fade" id="load-section-file-modal" tabindex="-1" role="dialog" aria-labelledby="#load-section-file-modal" aria-hidden="true">
  <div class="modal-dialog modal-xs" role="document">
    <div class="modal-content">
      <button class="close" type="button" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">
          <i class="fas fa-times"></i>
        </span>
      </button>
      <div class="modal-body text-center">
        <div class="container">
          <div class="row justify-content-center">
            <div class="col-lg-12">
              <!-- Title -->
              <h5 class="portfolio-modal-title text-secondary mb-10">Load Form Content from File</h5>

              <%= form_tag '/load_section_file', :method => :post, :multipart => true do %>
                <div class="form-group">
                  <%= file_field_tag 'file', required: true %>
                  <%= hidden_field_tag :id, section_id %>
                </div>
                <div class="form-actions">
                  <%= button_tag 'LOAD', class: 'btn btn-success' %>
                </div>
              <% end %>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

edit.html.erb

<div class="container">
  <div class="row">
    <div class="content col-12">
      <h2>Edit section</h2>
      <div class="text-right">
        <%= link_to 'Manage Questionnaire', edit_product_product_section_questionnaire_template_path(@section.product_id, @section.id), class: 'btn btn-warning text-right' %>
      </div>
      <%= render 'form', section: @section, url: product_product_section_path(@section.product_id, @section.id) %>
    </div>
  </div>
</div>      

product_sections_controller.rb

class ProductSectionsController <  ApplicationController

  def show
  end

  def new
    @section = ProductSection.new
    @product = Product.find params[:product_id]
  end

  def create
    @product = Product.find params[:product_id]
    product_section = @product.product_sections.new section_params
    if product_section.save
      redirect_to product_path(@product), notice: 'Saved'
    else
      render :new
    end
  end

  def edit
    @section = ProductSection.find params[:id]
  end

  def update
    @section = ProductSection.find params[:id]
    if @section.update(section_params)
      if params[:form].present?
        form = Form.find_or_create_by(product_section_id: @section.id)
        form.update submit_to: form_params[:submit_to], content: sanitize_select(form_params[:content])
      end
      redirect_to product_path(@section.product_id), notice: 'Saved!'
    else
      render :edit, alert: 'Could not save'
    end
  end

  def destroy
    @section = ProductSection.find params[:id]
    @product = @section.product
    if @section.delete
      redirect_to product_path(@product.id), alert: 'Are you sure?'
    else
      render :questionnaire_completed, warning: 'Could not delete'
    end
  end

  def add_form
    product_section = ProductSection.find params[:id]
    product_section.create_form
    redirect_to edit_product_product_section_path(product_section.product_id, product_section.id), notice: 'Form added!'
  end

  def remove_form
    product_section = ProductSection.find params[:id]
    product_section.form.delete
    redirect_to edit_product_product_section_path(product_section.product_id, product_section.id), notice: 'Form removed!'
  end

  def load_file
    @section = ProductSection.find params[:id]
    file = File.open params[:file].tempfile
    content = file.read
    form = Form.find_or_create_by(product_section_id: @section.id)
    form.update content: JSON.parse(content).to_json
    redirect_to edit_product_product_section_path(@section.product_id, @section.id), notice: 'Content loaded from file!'
  end

  private

  def section_params
    params.require(:product_section).permit(:slug, :content, :has_form)
  end

  def form_params
    params.require(:form).permit(:submit_to, :content)
  end


end

section.html.erb

<%= @section.content.html_safe %>

<% if @section.form %>
  <script>
    var form_tag = '<form action="<%= @section.form.submit_to %>"' +
        'class="form" accept-charset="UTF-8" method="post">' +
        '<div id="form_fields"></div><div id="questionnaire-modal-container"></div></form>'
    $('#form_container').html(form_tag);
    var formData = JSON.stringify(<%= @section.form.content ? @section.form.content.html_safe : [] %>);
    var formRenderOptions = {formData};
    $('#form_fields').formRender(formRenderOptions);

    // Post form processing
    // Add elements to DOM or do some styling or JS execution
    inlineProcessing();


    // Add the modal skeleton
    let modal = '<%= j(render 'questionnaire_modal') %>';
    $('#questionnaire-modal-container').html(modal);

    $("#form_submit").click(function(e){
        //e.stopPropagation();
        e.preventDefault();
        // form needs questionanaire

        if ($('#requires_questionnaire').val() == 'always') {
          let path = '/questionnaires/new?section_id=' + <%= @section.id %>;
          $('#questionnaire-container').load(path);
          $("#questionnaire_modal").modal('show');
        }

        // form needs questionnaire based on age
        if ($('#requires_questionnaire').val() == 'age') {
          if (parseInt($('#age').val()) >= 60) {
            let path = '/questionnaires/new?section_id=' + <%= @section.id %>;
            $('#questionnaire-container').load(path);
            $("#questionnaire_modal").modal('show');
          } else {
            $('#questionnaire-container').html('');
            $("form").submit();
          }
        }

        // form does not need questionnaire at all
        if ($('#requires_questionnaire').val() == 'never') {
            $('#questionnaire-container').html('');
            $("form").submit();
        }
      });
  </script>


<% end %>